ProInstagramInstagram StoriesPopup

Instagram-Stories-Widget: Popup

Instagram-Stories-Widget: Popup

Ein Instagram-Story-Widget bringt Ihre Live-Instagram-Stories auf Ihre Website. Diese Vorlage zeigt sie als kleinen schwebenden Avatar mit dem Label Watch Stories, und Besucher öffnen Ihre Stories und Beiträge mit einem Klick in einem Popover.

Was das Instagram-Story-Widget zeigt und wo Sie es platzieren

Ein Instagram-Story-Widget ist ein eingebettetes Element, das Ihre aktuellen Instagram Stories über die offizielle Instagram-API in eine Webseite holt. Es aktualisiert sich von selbst, solange Stories live sind, sodass Ihre Website zeigt, was Sie posten.

Ein Instagram-Stories-Popup fügt den vertrauten Avatar-Ring als kompaktes Overlay hinzu. Es bringt Social Content auf die Seite, ohne sie zu dominieren, und passt daher dort, wo ein vollständiger Feed zu schwer wirken würde.

Nutzen Sie es für Produkt-Drops, Clips hinter den Kulissen, Events oder Tagesangebote. Es passt zu E-Commerce-Produktseiten, Startseiten, Kampagnen-Landingpages und Creator- oder Lifestyle-Websites.

Um Stories zu verbinden, muss Ihr Instagram-Konto ein Business- oder Creator-Konto sein. Unser Leitfaden zum Einbetten von Instagram Stories behandelt alle Voraussetzungen, und die Seite zum Instagram-Stories-Widget zeigt Layouts und Tarife.

  • Startseite: ein Social-Berührungspunkt, der Ihren Hauptinhalt nicht nach unten schiebt.
  • Preisseite: kurze Clips von Kunden oder dem Team schaffen Vertrauen, ohne die Tarife zu überfrachten.
  • Produktseiten: Stories, die das Produkt im Einsatz zeigen, sind nur einen Klick vom Kaufen-Button entfernt.
  • Landingpages: Kampagnen-Stories halten eine Launch-Seite so lange aktuell, wie sie läuft.

So fügen Sie Ihrer Website ein Instagram-Story-Widget hinzu

  1. Verbinden Sie Ihre Instagram-Stories-Quelle in EmbedSocial.
  2. Wählen Sie die Vorlage Instagram Stories Popover.
  3. Passen Sie Avatar-Stil, Popover-Text und Widget-Position an.
  4. Legen Sie fest, wann und wo das Widget auf der Seite erscheinen soll.
  5. Kopieren Sie den Einbettungscode.
  6. Fügen Sie ihn in Ihre Website, Landingpage oder Ihr CMS ein und veröffentlichen Sie.

WordPress

Öffnen Sie die Seite im Block-Editor und fügen Sie einen Custom-HTML-Block hinzu. Fügen Sie den Einbettungscode ein und aktualisieren Sie die Seite. Das Popup schwebt über dem Inhalt, wo auch immer der Block sitzt.

Shopify

Gehen Sie zu Online Store > Themes > Customize und fügen Sie der gewünschten Vorlage einen Custom-Liquid-Abschnitt hinzu. Fügen Sie den Einbettungscode ein und speichern Sie.

Wix

Fügen Sie ein Element Embed a Site oder HTML iFrame hinzu (der Name hängt von Ihrer Editor-Version ab). Fügen Sie den Code ein und veröffentlichen Sie.

Squarespace

Bearbeiten Sie die Seite und fügen Sie einen Embed Block hinzu. Fügen Sie den Code in das zugehörige Codefeld ein und speichern Sie.

Layout Am besten für Zeigt Vorlage
Popup Stories ohne neuen Bereich hinzufügen Schwebender Avatar und ein Popover mit Stories und Beiträgen Instagram-Stories-Widget: Popup
Autoplay-Slider Ein eigener Stories-Bereich Eine Reihe hoher Story-Karten, die sich von selbst weiterbewegen Instagram Stories Autoplay-Slider
Stories-und-Beiträge-Slider Stories mit Ihrem Feed mischen Ein horizontaler Slider mit Stories und aktuellen Beiträgen Klassisches Instagram-Stories-und-Beiträge-Slider-Widget

Häufig gestellte Fragen

Kann man Instagram Stories einbetten?
Ja. Verbinden Sie in EmbedSocial ein Instagram-Business- oder Creator-Konto, wählen Sie eine Stories-Vorlage und fügen Sie den Einbettungscode auf Ihrer Website ein. Live-Stories der letzten 24 Stunden werden automatisch übernommen.
Welche Größe hat das Instagram-Story-Widget?
Dieses Popup bleibt klein: ein runder Story-Avatar und ein kurzes Label Watch Stories, das über der Seite schwebt. Die Stories öffnen sich in einem Popover, sodass Sie dafür keinen eigenen Bereich reservieren müssen. Für einen größeren, dauerhaft sichtbaren Block nutzen Sie stattdessen eine Slider-Vorlage.
Warum funktioniert mein Instagram-Widget nicht?
Prüfen Sie zuerst das Konto: Die Instagram-API verbindet nur Business- oder Creator-Konten. Prüfen Sie dann, ob eine Story live ist, denn abgelaufene und archivierte Stories werden nicht automatisch übernommen. Stellen Sie zuletzt sicher, dass der vollständige Einbettungscode in einem Block steht, der JavaScript ausführt, etwa einem Custom-HTML-Block.
Aktualisiert sich das Instagram-Story-Widget automatisch?
Ja. Es holt Ihre neuesten Stories, solange sie live sind, ganz ohne Änderungen an Ihrer Website. Um eine ältere Story nach 24 Stunden sichtbar zu halten, laden Sie sie manuell in das Widget hoch.
Kann ich neben Stories auch Beiträge zeigen?
Ja. Diese Vorlage zeigt Ihre Instagram Stories zusammen mit anderen Instagram-Beiträgen im Popover. Für einen Bereich, der beides mischt, probieren Sie das Classic Instagram Stories And Posts Slider Widget.
Kann ich festlegen, wo das Instagram-Stories-Popup erscheint?
Ja. Die Position des Widgets legen Sie in Schritt 3 fest, und in Schritt 4 wählen Sie, wann und wo es erscheint. Testen Sie es mit Ihrem eigenen Konto in einer 7-tägigen kostenlosen Testversion.

Machen Sie diese Vorlage zu Ihrer eigenen.

Passen Sie sie in EmbedSocial an und betten Sie sie in wenigen Minuten auf Ihrer Website ein, ganz ohne Code.