Instagram-Feed in Webseite einbinden: So geht es!

Einbinden eines Instagram-Feeds in eine Webseite

Viele Marken und noch mehr ihre Kunden sind von Instagram fasziniert: Statistiken zufolge tummeln sich auf Instagram mehr als 200 Millionen Unternehmen. Satte 1 Milliarde Instagram-User öffnen die App, um Stories von Freunden, Influencern sowie Marken zu folgen.

Angesichts solcher Zahlen ist es verständlich, warum Marken und Organisationen einen Instagram-Feed auf ihrer Webseite oder ihrem digitalen Dienst einbinden möchten: Das Einbinden des Instagram-Feeds auf der Webseite führt zu mehr Besuchern deines Instagram-Accounts. Darüber hinaus fördert sie das Engagement. Denn die Algorithmen von Instagram bevorzugen ansprechende Inhalte (und Ads). Sich von der Masse abzuheben, gestaltet sich für Unternehmen zunehmend schwerer. Darum sollte dein Marketingteam alle Content-Assets, die es bereits für Social Media erstellt hat, in vollem Umfang nutzen. Deine Webseite sowie andere digitale Anwendungen sind eine hervorragende Quelle, um mehr Traffic auf dein Instagram-Profil zu generieren. Auf diese Weise wächst auch die Zahl deiner Follower.

Vielleicht folgen dir deine bestehenden Kunden derzeit noch nicht auf Instagram. Ein Instagram-Feed, der sich in Echtzeit aktualisiert, kann das ändern. Darüber hinaus erhöht er auch bei neuen Webseitenbesuchern und Interessenten deine Authentizität.

Indem du Instagram in deine Webseite einbindest, lieferst du direkt Social Proof. Dadurch erhöht sich auch die Conversion Rate. Viele Instagram-User erwähnen dein Unternehmen oder sie nutzen deinen Hashtag für Feedback und Bewertungen. Das Integrieren von User-Generated Content (UGC) und Rezensionen auf deiner Webseite, die Kunden auf Social Media veröffentlicht haben, schafft Vertrauen und erleichtert es deinen Kunden, eine Kaufentscheidung für deine Produkte und Dienstleistungen zu treffen.

Mit dem Instagram-Widget von Flockler ist das Einbinden eines Instagram-Feeds in jede Art von Webseite in wenigen Minuten erledigt. Dafür musst du weder Entwickler sein noch Programmierkenntnisse besitzen.

Etwas weiter unten in diesem Blogpost findest du Anleitungen. Diese erklären dir, wie du Flockler in beliebte Content-Management-Systeme (CMS), Website-Builder und E-Commerce-Plattformen einbetten kannst. Darunter beispielsweise Shopify, WordPress und Squarespace. Daneben lässt sich dein Instagram-Feed aber in jede beliebige Webseite und jeden digitalen Dienst integrieren.

So bindest du einen Instagram-Feed in eine Webseite ein

Wenn du nur eine Handvoll Posts einbinden und diese nicht zu oft aktualisieren beziehungsweise ändern möchtest, dann ist der HTML-Einbettungscode von Instagram die richtige Wahl. Um einen Instagram-Post in eine beliebige Webseite zu integrieren, gehst du folgendermaßen vor:

  1. Logge dich über deinen Desktop bei Instagram ein.
  2. Öffne die URL des Instagram-Bildes, das du auf deiner Webseite einbinden möchtest.
  3. Klicke auf die drei Punkte in der oberen rechten Ecke des Bildes und wähle dann „Embed“, also „Einbetten“ aus.
  4. Kopiere den Instagram-HTML-Code und integriere ihn in eine beliebige Webseite wie WordPress.
  5. Das ausgewählte Instagram-Bild erscheint auf deiner Webseite.

Wenn du anstatt dessen einen Instagram-Feed ausspielen möchtest, der sich ohne manuelles Zutun automatisch aktualisiert, dann solltest du dir einen Social-Media-Aggregator wie Flockler ansehen. Mit Flockler kannst du Instagram-Content sammeln und vorgefertigte Layouts präsentieren. Darüber hinaus kannst du deinen Instagram-Feed um Content anderer Social-Media-Quellen anreichern und so mit Bildern und Videos von Instagram kombinieren.

Aber hier konzentrieren wir uns nun erst einmal auf Instagram und darauf, wie Marken Instagram auf Webseiten nutzen.

Instagram-Feed, der auf der Webseite der Accor Hotels eingebunden ist
Die Accor Hotels binden Instagram-Feeds auf ihren Webseiten ein.

Hier findest du eine Anleitung, wie du in sechs Schritten einen Instagram-Feed in eine Webseite einbindest:

  1. Kostenlosen Flockler-Account erstellen
  2. Flockler mit Instagram-Account verbinden
  3. Beliebigen Instagram-Business-Account oder Hashtag-Feed auswählen
  4. Instagram-Feed gestalten
  5. Instagram-Feed moderieren
  6. Instagram-Feed auf Webseite einbinden

1. Kostenlosen Flockler-Account erstellen

Erstelle zunächst einen kostenlosen Flockler-Account für deinen Instagram-Feed. Dafür bietet dir Flockler eine 14-tägige Testversion. Damit kannst du unser Produkt kostenlos, ohne Werbung oder sichtbares Flockler-Branding in vollem Umfang ausprobieren. Schau dir hier die Liste der Funktionen an, die Flockler in der kostenlosen Testversion bietet.

2. Flockler mit Instagram-Account verbinden

Sobald du dich angemeldet hast, begrüßt dich der Flockler-Bot. Zuallererst bittet er dich, einen Content-Kanal zu wählen. Hier entscheidest du dich für Instagram und verbindest Flockler mit deinem persönlichen Facebook-Konto.

Facebook-Konto mit Flockler verbinden
Du kannst jedes Facebook-Konto verbinden, das Zugang zu einem Instagram-Business-Account hat. Anschließend kannst auswählen, ob du Bilder und Videos deines Unternehmens, eines anderen Unternehmens oder eines Hashtags präsentieren möchtest.

Warum muss man sich mit seinem persönlichen Facebook-Konto verbinden? Dies ist aufgrund einer Entscheidung von Facebook und Instagram notwendig: Nur wer sich mit einem persönlichen Facebook-Konto anmeldet, ist autorisiert, auf den Instagram-Feed eines Unternehmens zuzugreifen sowie Hashtag-Feeds zu erstellen, die Posts beliebiger Instagram-Accounts sammeln. Hinzu kommt, dass dieses Konto Administrator mindestens einer Facebook-Seite oder eines Instagram-Business-Accounts sein muss.

Wichtig zu wissen: Flockler speichert oder zeigt keine persönlichen Daten von Facebook oder Instagram. Sobald du dich mit deinem Facebook-Konto eingeloggt hast, kannst du auswählen, welchen Content Flockler sammeln soll. Um weitere Details zu erfahren, schaue dir den nächsten Schritt an.

3. Beliebigen Instagram-Business-Account oder Hashtag-Feed auswählen

Vielleicht hast du in der Vergangenheit WordPress-Plug-ins wie Smash Balloon genutzt, um einen Instagram-Feed auf der Webseite zu zeigen. Dabei hast du bestimmt festgestellt, dass du ausschließlich den Instagram-Feed des Unternehmens einbinden konntest, dessen Account du verwaltest. Wenn nur ausgewählte Teammitglieder Zugang zum Social-Media-Account des Unternehmens haben, dein Unternehmen mehrere Insta-Accounts hat (zum Beispiel verschiedene Länder) oder du für eine Agentur arbeitest, die die Marke lediglich bei der Einrichtung unterstützt, kann das sehr lästig sein.

Anders ist es mit Flockler: Mit Flockler kannst du einen Business-Account verbinden und dann Posts jedes anderen Business-Accounts ausspielen!

Solange du Zugang zu mindestens einem Instagram-Business-Account hast, kannst du einen Instagram-Feed erstellen, der Beiträge jedes anderen Unternehmens präsentiert. Darüber hinaus kannst du deinem Instagram-Feed auch mehrere Unternehmen hinzufügen und ihre Posts gebündelt an einem Ort ausspielen.

Auswahl von Content-Quelle und Content-Art für den Instagram-Feed in der Flockler-App
Sobald du deinen Account angebunden hast, wählst du aus, ob du einen Instagram-Feed eines beliebigen Unternehmens, einen Hashtag-Feed oder @-Mentions deines Unternehmens sammeln möchtest.

Für das Video unten habe ich mich mit meinem persönlichen Facebook-Konto angemeldet und Instagram-Posts der Europäischen Zentralbank gesammelt. Klar, bin ich kein Admin ihres Kontos. Doch sobald ich mein Facebook-Konto verbinde (ich bin Administrator von Flockler), kann ich einen beliebigen Instagram-Business-Account für die Präsentation auswählen. Dabei habe ich keinen Ärger mit Passwörtern oder Admin-Rechten.

Doch es geht um mehr als nur um Insta-Feeds. Mit Flockler kannst du folgenden Content sammeln und digital einbinden:

Mit den Aggregationstools von Flockler kannst du Social-Media-Content mehrerer Accounts sammeln und deinen Instagram-Feed mit einem Hashtag-Feed kombinieren. Im Folgenden erkläre ich dir, wie du die Social-Media-Feeds in deine Webseite einbindest.

4. Instagram-Feed gestalten

Vielleicht hast du schon einmal einen Instagram-Feed mit Tools wie Taggbox erstellt. Nur um wenig später festzustellen, dass die Zahl der Instagram-Widgets, die du im Rahmen deines Abos erstellen kannst, begrenzt ist. Das kann sehr frustrierend sein. Insbesondere wenn du mehrere Webseiten, Seiten-Layouts und verschiedene digitale Dienste betreust, in die du den Instagram-Feed perfekt einpassen möchtest.

Bei Flockler ist die Anzahl der Widgets, die deinen Instagram-Feed ausspielen, unbegrenzt!

Du kannst so viele Social Walls, Raster-Layouts, Karussells und Slideshows erstellen, wie du möchtest. Und du kannst sogar das Look & Feel für jede Seite anpassen, falls du möchtest. So kommt dein Social-Media-Feed immer perfekt zur Geltung.

Auswahl des Instagram-Feed-Layouts in der Flockler-App
Wähle das Layout für deinen Instagram-Feed aus. Dabei kannst du so viele Layouts erstellen, wie du möchtest. Zudem kannst du das Design für jede Seite modifizieren.

Sobald du dein bevorzugtes Layout ausgewählt hast, kannst du das Design deines Instagram-Feeds in den Einstellungen des jeweiligen Einbettungscodes modifizieren. Zum Beispiel kannst du die Anzahl der angezeigten Beiträge ändern, Elemente ausblenden, das Farbschema anpassen und vieles mehr. Wenn du das Look & Feel noch weiter anpassen möchtest, dann hilft dir das Support-Team von Flockler gerne weiter. Diesen Service bieten wir kostenlos an.

Eingebetteter Instagram-Feed auf einer Webseite von France.fr
France.fr hat einen farbenfrohen Instagram-Feed in seine Website eingebettet.

Einer der verborgenen Schätze des Social-Media-Aggregators von Flockler ist, dass du deinen Instagram-Feed über Tags filtern kannst: Sobald du den Content von einem oder mehreren Accounts gesammelt hast, kannst du die Inhalte auf Grundlage eines im Post erwähnten Hashtags filtern. Dadurch kannst du beispielsweise nur Instagram-Beiträge ausspielen, die mit einem bestimmten Produkt oder einer Dienstleistung deines Unternehmens getaggt sind. Oder du führst eine Event- oder Hashtag-Kampagne durch, bei der eine bestimmte Landing Page einen individuellen Instagram-Feed erhält.

Du kannst deinen Instagram-Feed so oft einbinden, wie du möchtest. Ohne dass du dich hinsichtlich der Zahl der Seitenaufrufe, Domains und Dienste einschränken musst. Hier erfährst du mehr über das Taggen und Filtern von Social-Media-Feeds.

5. Instagram-Feed moderieren

Ein simples Instagram-Widget reicht aus, wenn du deinen Feed wede moderieren noch mehrere Instagram-Accounts und Hashtag-Feeds kombiniert miteinander präsentieren möchtest. Die meisten Marken benötigen jedoch fortschrittliche Tools, um unerwünschte Posts auszublenden. Zudem möchten sie ihre Feeds für verschiedene Kampagnen, Standorte und situations- oder anwendungsbezogen kategorisieren.

Mit Flockler kannst du Instagram-Feeds in Abschnitte kategorisieren, sogenannte Sections. Sections sind quasi wie Ordner, in denen du einen oder mehrere Feeds verschiedener Instagram-Accounts sowie Posts mit ausgewählten Hashtags speichern kannst. Jede Section kannst du separat ausspielen. Alternativ kannst du mehrere Sections in einem Layout kombinieren.

In diesem Video zeige ich dir, wie du deinen Instagram-Feed kategorisierst:

Typische Flockler-Kunden nutzen eine Section für einen Feed auf der Hompage. Diesen kategorisieren sie oft für verschiedene Sprachen sowie Geschäftsbereiche. Darüber hinaus organisieren viele Kunden Hashtag-Kampagnen auf Instagram oder führen über das Jahr hinweg Veranstaltungen durch. Dabei nutzen sie für jede dieser Marketingmaßnahmen eine eigene Section in Flockler und gestalten die Layouts beliebig. Denn mit Flockler kannst du so viele Layouts aufsetzen, wie du möchtest, um deine Feeds in all deinen digitalen Kanäle auszuspielen.

Je nach Section hast du gegebenenfalls auch unterschiedliche Präferenzen für die Moderation: Beispielsweise ist bei deinem eigenen Instagram-Feed nicht allzu viel Moderation nötig. Da möchtest du gegebenenfalls mal Bilder und Videos ausblenden, die Reihenfolge der präsentierten Beiträge ädernden oder relevante Posts so anheften, dass sie ganz oben erscheinen.

Ausblenden eines Social-Media-Posts mit der Flockler-App

Wenn du für deinen Instagram-Feed Posts mit einem bestimmten Hashtag sammelst, dann möchtest du vielleicht die Inhalte prüfen, bevor du sie auf deiner Webseite veröffentlichst. In diesem Fall ist die „Inbox“-Funktion von Flockler sehr nützlich. Denn du kannst den Instagram-Feed so einstellen, dass Beiträge mit einem bestimmten Hashtag in der „Inbox“ gespeichert werden. Der Instagram-Feed aktualisiert sich automatisch und spült dir dann alle Posts mit dem ausgewählten Hashtag in die „Inbox“. Hier klickst du dann einfach auf „Publish“ („Veröffentlichen“) oder ziehst das Bild bzw. Video per Drag & Drop nach rechts, um den Content zu bestätigen. Alles, was du nach rechts schiebst, erscheint sofort in deinem Instagram-Feed auf deiner Webseite. Andersherum kannst du das „Hide“-Symbol („Ausblenden“) anklicken, um alles zu entfernen, was du versehentlich hinzugefügt hast.

Veröffentlichen eines Instagram-Bildes mit der Flockler-App

Eine hybride Moderationsstrategie besteht darin, alle Inhalte automatisch auszuspielen, dabei aber das Blacklisting-Tools von Flockler zu nutzen. Damit kannst du bestimmte User-Namen und Keywords blockieren. Mit dem Blacklisting kannst du du Bots und andere User, die deinen Hashtag in unpassender Weise verwenden, automatisch entfernen.

Du hast also die volle Kontrolle über die Inhalte des Instagram-Feeds für deiner Webseite.

6. Instagram-Feed auf Webseite einbinden

Ein in eine Webseite eingebetteter Instagram-Feed
GoPro hat einen Instagram-Feed für den Hashtag #GoProAwards auf der Webseite eingebunden.

Der letzte Schritt besteht darin, den Einbettungscode für den Instagram-Feed aus dem Flockler-Tab „Display“ („Anzeige“) zu kopieren und ihn anschließend auf der Webseite einzubinden. Die beliebtesten Website-Builder und E-Commerce-Softwares verfügen in der Regel über Tools, um Content zu bearbeiten. Das heißt, darüber kannst du den Einbettungscode ohne die Hilfe eines Entwicklers selbst platzieren.

Wenn du bereits welche erstellt hast, findest du deine Einbettungscode immer wieder hier im Tab „Display“. Oder du generierst weitere. Wenn du dir unsicher bist, wie du den Instagram-Feed auf einer Webseite einbindest, dann zögere nicht, das Flockler-Team per Live-Chat zu kontaktieren. Wir helfen dir gerne weiter!

Für einige der beliebtesten Website-Builder, Content-Management-Systeme und Online-Shop-Software haben wir detaillierte Anleitungen erstellt:

So bindest du einen Instagram-Feeds in Shopify ein

Einen Instagram-Feed in Shopify einzubinden, ist ganz einfach. Es erfordert keine besonderen technischen Kenntnisse. Mit Flockler kannst du deinen Instagram-Feed auf jeder Shopify-Seite ausspielen. Zum Beispiel:

  1. auf der Startseite,
  2. innerhalb der Kategorien (auch Kollektionen genannt),
  3. auf Produktseiten und
  4. auf ausgewählten Shopify-Seiten

Im Folgenden nehmen wir diese Optionen genauer unter die Lupe.

Einen Instagram-Feed auf der Shopify-Startseite integrieren

Um deinen Flockler-Feed auf der Shopify-Homepage zu platzieren, musst du das Layout des Themes bearbeiten. Dafür navigierst du dich zu Themes und klickst auf „Actions“. Anschließend wählst du „Edit code“, um den Code zu bearbeiten.

Shopify-Theme bearbeiten

Navigiere dich nun zu „Sections“ und klicke auf „Add a new Section“. Auf diese Weise fügst du einen neuen Abschnitt hinzu.

Einen neuen Abschnitts zu Shopify hinzufügen

Gib dem neuen Abschnitt einen Namen (beispielsweise flockler). Anschließend öffnet sich ein Editor zur weiteren Bearbeitung.

Einen Abschnitts in Shopify benennen
Einen Shopify-Abschnitt bearbeiten

Im Editor ersetzt du den Namen der Section durch den Namen, den du im Schritt zuvor für den Abschnitt definiert hast. In unserem Beispiel haben wir „flockler“ gewählt. Darüber hinaus ersetzt du alles nach „endschema“ durch den Einbettungscode von Flockler, den du in Flockler über den Tab „Display“ („Anzeige“) findest.

Einfügen von Flockler zu einer Shopify-Section

Anschließend speicherst du deine Änderungen.

Scrolle nun in der Liste nach oben zu „Templates“ und klickst auf „index.json“.

Bearbeiten der Shopify-Startseite

Dadurch öffnet sich ein Editor. In diesen fügst du folgenden Code an den Anfang ein:

"flockler": {
"type": "flockler"
},
Hinzufügen von Flockler zur Shopify-Startseite

Wenn du nun im Code-Editor nach unten scrollst, dann siehst du die Reihenfolge der einzelnen Homepage-Elemente. Wähle hier den richtigen Platz für Flockler und füge ihn der Liste hinzu. Die Position deines Instagram-Feeds kannst du selbstverständlich auch im Nachgang jederzeit ganz einfach ändern.

Reihenfolge der Elemente auf Shopify bestimmen

Zum Schluss speicherst du die Änderungen: Flockler präsentiert dir in einer Vorschau, wie dein Template auf der Shopify-Homepage aussehen wird.

Flockler, integriert in Shopify

Einen Instagram-Feeds in alle Shopify-Kategorien und Produktseiten einbinden

Dein Instagram-Feed soll in allen Kategorien (auch Kollektionen genannt) sowie auf allen Produktseiten erscheinen? Dann folge den Schritten, wie oben beschrieben. Nur dass du jetzt „product.json“ bearbeitest, um die Layouts deiner Shopify-Produktseiten zu definieren. Oder alternativ „collection.json“, wenn du das Layout deiner Kategorien anpassen möchtest.

Instagram-Feeds in ausgewählten Shopify-Seite einbinden

Wenn du deinen Instagram-Feed lediglich in einzelne Shopify-Seiten integrieren möchtest, dann musst du dafür im Texteditor auf den „HTML“-Button klicken.

Instagram-Feeds in Shopify einbinden: Text bearbeiten

Im Editor kopierst du den Flockler-Einbettungscode für deinen Instagram-Feed irgendwo hinein.

Instagram-Feeds in Shopify integrieren: Einbettungscode in den Texteditor einfügen

So bindest du einen Instagram-Feed in WordPress ein

Du möchtest einen Instagram-Feed in WordPress einbinden? Dann hast du zwei Optionen: Zum einen kannst du den Standard-Einbettungscode von Flockler nutzen, der sich für jede HTML-Seite eignet. Zum anderen kannst du unser WordPress-Plug-in nutzen. Um deinen Social-Media-Feed in WordPress zu integrieren, empfehlen wir dir die zweite Option, da sie deine Arbeit noch schneller und einfacher macht.

WordPress lässt sich in vielerlei Hinsicht modifizieren. Dabei stehen Content-Managern mehrere Content-Editoren zur Verfügung. Im Folgenden gehen wir ein auf:

  1. den WordPress Block Editor,
  2. den Classic Editor
  3. sowie Elementor für WordPress

Wenn du einen anderen Content-Editor verwendest und Hilfe bei der Einbindung eines Instagram-Feeds in WordPress benötigst, dann kontaktiere sehr gerne unser Support-Team per Live-Chat.

Mit dem Block Editor einen Instagram-Feed in WordPress einbinden

  1. Logge dich als WordPress-Admin in deine WordPress-Instanz ein und öffne den Blogpost oder die Seite, in die du den Instagram-Feed einbinden möchtest.
  2. Wähle „(+) Add Block“ in der linken oberen Ecke der WordPress-Tools, um einen neuen Block hinzuzufügen.
  3. Suche nach „Custom HTML“, um ein benutzerdefiniertes HTML-Element hinzuzufügen
    Instagram-Feeds in WordPress einbinden: Hinzufügen von Custom HTML
  4. Beim Einbettungscode von Flockler handelt es sich um einen eindeutigen, einen „unique“ Shortcode. Kopieren den Shortcode aus Flockler und füge ihn in WordPress füge ihn in das „Custom HTML“-Element ein, das du in Schritt 3 hinzugefügt hast.
    Instagram-Feeds in WordPress einbinden: Hinzufügen des Shortcodes
  5. Aktualisiere/veröffentliche deine Änderungen am WordPress-Beitrag/an der WordPress-Seite.

Das war's schon. Der Instagram-Feed ist nun in deine WordPress-Seite eingebunden und spielt Instagram-Content aus.

Mit dem Classic Editor einen Instagram-Feed in WordPress einbinden

  1. Logge dich als WordPress-Admin in deine WordPress-Instanz ein. Öffne nun den Blogpost oder die Seite, in die du deinen Instagram-Feed integrieren möchtest.
  2. Der WordPress-Content-Editor zeigt dir zwei Optionen an: den visuellen Modus oder den Textmodus. Wähle hier den Textmodus aus.
  3. Wechsle zu Flockler und navigiere dich in den „Display“-Tab. Klicke für das Feed-Layout, das du nutzen möchtest, auf den Button „Add to WordPress“. Kopiere den Shortcode aus Flockler und füge ihn in WordPress an der Stelle ein, an der du den Instagram-Feed platzieren möchtest.
  4. Aktualisiere/veröffentliche die WordPress-Seite, um deine Änderungen zu speichern.

Erledigt! Sobald du die Seite aktualisierst, siehst du den eingebetteten Instagram-Feed online und in Echtzeit.

Mit Elementor einen Instagram-Feed in WordPress einbinden

  1. Logge dich als WordPress-Admin in deine WordPress-Instanz ein. Füge eine neue Seite hinzu oder bearbeite eine bestehende, in die du deinen Instagram-Feed einbetten möchtest.
  2. Klicke in Elementor auf „Edit“ („Bearbeiten“)
    Instagram-Feeds in WordPress einbinden: Hinzufügen eines HTML-Elements mit Elementor
  3. Suche auf der linken Seite das HTML-Widget.
  4. Ziehe das Widget im Elementor-Editor mittels Drag & Drop auf deine Seite.
  5. Dadurch öffnet sich automatisch ein neuer Satz an Bearbeitungswerkzeugen.
  6. Wechsle nach Flockler und navigiere dich zum Tab „Display“ („Anzeige“). Klicke hier auf den Button „Add to WordPress“ für das Feed-Layout, das du auf deiner WordPress-Seite nutzen möchtest. Anschließend kopierst du den Flockler-Shortcode und fügst ihn in das HTML-Code-Feld in WordPress ein, das du in Schritt 3 generiert hast.
    Instagram-Feeds in WordPress einbinden: Hinzufügen des Flockler-Shortcodes mit Elementor
  7. Aktualisiere/veröffentliche oder veröffentlichen die Seite.

Fertig! Dein Instagram-Feed ist nun auf deiner WordPress-Seite für alle sichtbar.

So bindest du einen Instagram-Feed in Squarespace ein

Squarespace hat sich in den vergangenen Jahren zu einem beliebten Tool entwickelt, um Webseiten zu erstellen. Dank der einfach zu bedienenden und intuitiven Bearbeitungswerkzeuge ist das Einbinden eines Instagram-Feeds in Squarespace ein Kinderspiel.

Wenn du Einbettungscodes oder Widgets eines Drittanbieters wie Flockler nutzen möchtest, benötigst du mindestens ein Business-Abo für Squarespace. Ist das gegeben, kann es losgehen.

Hier ist deine Schritt-für-Schritt-Anleitung, wie du einen Instagram-Feed in Squarespace einbindest:

  1. Logge dich in Squarespace ein und klicke auf der Seite, auf der du den Instagram-Feed ausspielen möchtest, au „edit“ („bearbeiten“)
  2. Füge dann ein neues Element hinzu.
    Instagram-Feeds in Squarespace einbinden: ein Element hinzufügen
  3. Klicke auf das „+“-Icon: Es öffnen sich eine Reihe von Optionen. Hier suchst und wählst du den Block „Code“ aus.
    Instagram-Feeds in Squarespace einbinden: einen Code-Block hinzufügen
  4. Im „Code“-Block musst du sicherstellen, dass du im Dropdown „HTML“, NICHT „Display source“ („Quelle anzeigen“) ausgewählt hast.
  5. Wechsle kurz zum „Display“-Tab in Flockler: Kopiere hier den Einbettungscode für deinen Instagram-Feed und füge ihn in das Eingabefeld in Squarespace ein. Übernimm deine Eingabe, indem du mit „Apply“ bestätigst.
    Instagram-Feeds in Squarespace einbinden: Flocklers Einbettungscode hinzufügen
  6. Nun solltest du die Information „Script Disabled“ sehen. Keine Sorge, das ist das erwartete Standardverhalten von Squarespace.
    Instagram-Feeds in Squarespace einbinden: Script Disabled
  7. Speichere schließlich deine Änderungen und veröffentliche den Instagram-Feed auf deiner Squarespace-Seite.
    Instagram-Feeds in Squarespace einbinden: Beispiel-Feed auf der Seite

So bindest du einen Instagram-Feed in Webflow ein

Webflow ist ein weiterer aufstrebender Stern am Website-Builder-Himmel. Mit Webflow erfordert das Einbetten eines Instagram-Feeds nur wenige Klicks. Bevor du startest, beachte bitte, dass du eine kostenpflichtige Version von Webflow benötigst, um den Code von Drittanbietern einbinden zu können.

Hier liefern wir dir eine Schritt-für Schritt-Anleitung, wie du deinen Instagram-Feed in Webflow einbindest:

  1. Logge dich bei Webflow ein und wähle den Bereich aus, in dem du den Social-Media-Feed auf deiner Webflow-Seite ausspielen möchtest.
  2. Klicke auf das „+“-Icon, scrolle nach unten zum Komponenten-Abschnitt („Components“) und wähle „Embed“ („Einbetten“) aus.
    Instagram-Feeds in Webflow einbinden: eine Komponente hinzufügen
  3. Nun sollte sich automatisch ein Editor öffnen. Wechsle kurz zu Flocklers „Display“-Tab, um den Einbettungscode für deinen Instagram-Feed zu kopieren. Gehe dann zurück zu Webflow und füge den Code in den Webflow-Editor ein.
    Instagram-Feeds in Webflow einbinden: Einbettungscode von Flockler hinzufügen
  4. Zum Schluss musst du nur noch dein Update speichern. Und schon hast du einen Instagram-Feed auf deiner Webflow-Seite integriert, der sich in Echtzeit automatisiert aktualisiert.

So bindest du einen Instagram-Feed in Wix ein

Wix hat sich zu einem beliebten Do-it-yourself-Website-Builder entpuppt. Nicht zuletzt aufgrund seiner benutzerfreundlichen Bearbeitungstools und seiner vielen Add-ons und Plug-ins, die die User Experience bereichern.

Ein in Wix eingebundener Instagram-Feed erhöht die Verweildauer und fördert die Conversion. Mit Flockler dauert die Installation nur wenige Minuten. Dabei bietet dir Wix zwei Benutzeroberflächen an: den klassischen Wix-Editor sowie Wix ADI. Hier findest du Anleitungen für beide Versionen.

Mit dem klassischen Editor einen Instagram-Feeds in Wix integrieren

  1. Wenn du den klassischen Wix-Editor verwendest, klicke auf den „+“-Button links, wähle „Embed“ („Einbetten“) und dann „Embed a Widget“ („Widget einbetten“) aus den angezeigten Optionen.
    Instagram-Feeds in Wix einbinden: Auswahl des einzubindenden Elements
  2. Du kannst du die Größe des Elements je nach Seitenlayout anpassen. Anschließend klickst du auf den Button „Enter Code“, um den Einbettungscode von Flockler zu hinterlegen.
    Instagram-Feeds in Wix einbinden: Einbettungscode von Flockler hinterlegen
  3. Um den Einbettungscode zu bekommen, navigierst du dich in Flockler zum „Display“-Tab. Kopiere den Code für deinen Instagram-Feed und füge ihn dann im Wix-Editor ein.
    Instagram-Feeds in Wix einbinden: hinzugefügter Einbettungscode von Flockler
  4. Klicke nun auf den „Update“-Button, um deine Wix-Seite zu aktualisieren. Der Instagram-Feed erscheint im Editor.
    Instagram-Feeds in Wix einbinden: Seite aktualisieren
  5. Zu guter Letzt musst du deine Änderungen nur noch veröffentlichen. Dafür klickst du auf „Publish“. Fertig! Der Instagram-Feed ist in deine Wix-Seite eingebunden.

Mit dem ADI-Editor einen Instagram-Feeds in Wix integrieren

  1. Wenn du den ADI-Editor von Wix nutzt verwendest, klicke auf das „+“-Icon auf der Seite und wähle die Position aus, an der du den Instagram-Feed integrieren möchtest.
    Instagram-Feeds in Wix einbinden: Position auswählen
  2. Auf der linken Seite findest du die Section „HTML embed“. Klicke darauf und wähle eine der vorgefertigten Vorlagen aus.
    Instagram-Feeds in Wix einbinden: Auswahl von „HTML embed“
  3. Bearbeite den Standardtext und klicke auf „Settings“ („Einstellungen“) neben HMTL.
    Instagram-Feeds in Wix einbinden: HTML bearbeiten
  4. Nun musst du „Website“ auswählen und anstelle des Instagram-Einbettungscodes die „Preview URL“ („Vorschau-URL“) von Flockler über den Editor hinzufügst. Die Vorschau-URL findest du im „Display“-Tab in Flockler. Im Wix-Editor kannst du übrigens auch die verfügbare Breite und Höhe für das Flockler-Layout ändern.
    Instagram-Feeds in Wix einbinden: Website auswählen
  5. Zum Schluss klickst du auf „Publish“, um deine Änderungen zu veröffentlichen. Et voilà: Dein Instagram-Feed ist in Wix eingebunden.

So bindest du einen Instagram-Feed in Drupal ein

Drupal ist ein Content-Management-System, dem bekannte Marken wie Tesla, Pfizer und NBC vertrauen. Da Drupal eine Open-Source-Publishing-Plattform mit umfangreichen Anpassungsmöglichkeiten ist, gibt es viele Optionen, wie du einen Instagram-Feed in Drupal integrieren kannst.

In diesem Blogpost gehe ich auf zwei typische Anwendungsfälle ein:

Wenn du dir unsicher bist, welche Einbindungsart die beste für deinen Instagram-Feed ist, kontaktiere das Support-Team von Flockler über den Live-Chat.

Instagram-Feed in einen beliebigen Artikel oder eine Seite in Drupal einbinden

Du kannst deinen Instagram-Feed in den Content-Bereich jedes beliebigen Artikels oder jeder beliebigen Seite einfügen.

  1. Wähle im Content-Editor einer bestehenden oder neuen Seite zunächst die Option „Full HTML“ aus dem Dropdown. Klicke anschließend in der Symbolleiste auf „Source“ („Quelle“). Navigiere dich in Flockler zum „Display“-Tab und kopiere den Einbettungscode für deinen Instagram-Feed. Wechsle zurück zu Drupal und füge den Einbettungscode in das Body-Eingabefeld ein.
    Instagram-Feeds in Drupal einbinden: Flocklers Einbettungscode in den Seiteneditor einfügen
  2. Zu guter Letzt: Klicke auf den „Save“-Button, um deine Änderungen zu speichern. Und schon ist dein Instagram-Feed in Drupal eingebunden und aktualisiert sich automatisch.
    Instagram-Feeds in Drupal einbinden: Beispiel-Feed auf einer Webseite

Instagram-Feeds in eine Drupal-Homepage einbinden

Mit dem Block-Element von Drupal lassen sich Einbettungscodes ganz einfach hinzufügen und zum Beispiel auf der Startseite präsentieren.

  1. Logge dich in Drupal ein. Navigiere im Drupal Site Management zu „Structure“ > „Block layouts“ und klicke auf den Reiter „Custom block library“ („Benutzerdefinierte Block-Bibliothek“). Hier klickst du auf den Button „+ Add custom block“, um einen individualisierten Blogk hinzuzufügen.
    Instagram-Feeds in Drupal einbinden: Hinzufügen eines Custom Blocks
  2. Nun fordert dich Drupal auf, dem Block einen Namen zu geben. Beispielsweise „Instagram-Feed“. Wichtig: Ändere das Textformat auf „Full HTML“ und klicke dann in der Werkzeugleiste auf „Source“ („Quelle“). Anschließend fügst du den Einbettungscode für deinen Instagram-Feed in das Feld ein. Diesen findest du im „Display“-Tab in Flockler. Klicke den „Save“-Button, um die Änderungen zu speichern.
    Instagram-Feeds in Drupal einbinden: „Full HTML“ auswählen
  3. Als Nächstes navigierst du dich zur Ansicht „Blocklayout“ und wählst aus, wo du deinen Instagram-Feed positionieren möchtest. Du kannst ihn beispielsweis im Content-Bereich platzieren. Klicke dafür auf „Place block“.
    Instagram-Feeds in Drupal einbinden: Block platzieren
  4. Wähle nun den Block (zum Beispiel „Instagram-Feed“) aus, den du zuvor erstellt hast.
    Instagram-Feeds in Drupal einbinden: Block auswählen
  5. Der Editor bietet dir eine Reihe an Anpassungsmöglichkeiten: Du kannst zum Beispiel entscheiden, ob der Titel des Blocks auf deiner Seite sichtbar sein soll und ob es irgendwelche Einschränkungen gibt. Zudem könntest du festlegen, dass dieses Element lediglich auf einer bestimmten Seite ausgespielt werden soll.
    Instagram-Feeds in Drupal einbinden: Block konfigurieren
  6. Schließlich scrollst du auf der Seite nach unten und klickst auf „Save blocks“, um deine Anpassungen zu speichern.
    Instagram-Feeds in Drupal einbinden: Blöcke speichern

Gut gemacht! Dein Instagram-Feed ist jetzt in deine Drupal-Homepage eingebunden!

So bindest du einen Instagram-Feed in TYPO3 ein

TYPO3 gehört zu den führenden Content-Management-Systemen Mitteleuropas. Zu den Nutzern zählen Unternehmen wie Phillips, Lufthansa und Villeroy & Boch.

Das Einbinden eines Instagram-Feeds in TYPO3 ist mit wenigen Klicks erledigt. TYPO3 ist vollständig anpassbar, so dass es eigentlich keine Probleme geben sollte.

  1. Logge dich in TYPO3 ein und öffne den Editor einer Seite (beispielsweise der Karriereseite) oder eines Blogposts und klicke auf den „+ Content“-Button, um ein neues Content-Element hinzuzufügen.
    Instagram-Feed in TYPO3 einbinden: Content-Element hinzufügen
  2. Wähle dann den Tab „Special elements“ und das „Plain HTML“-Element aus.
    Instagram-Feeds in TYPO3 einbinden: Plain HTML auswählen
  3. Kopiere den Einbettungscode für deinen Instagram-Feed aus dem „Display“-Tab in Flockler und füge ihn in im TYPO3-Editor ein. Anschließend speicherst du deine Änderungen über „Save“.
    Instagram-Feeds in TYPO3 einbinden: Flockler dem Content-Editor hinzufügen

Hurra! In wenigen Minuten hast du einen inspirierenden Instagram-Feed in TYPO3 eingebunden!

Diese Vorteile bringt das Einbinden eines Instagram-Feeds in Webseiten mit sich

Warum betten Marken und Organisationen Instagram-Feeds in ihre Webseiten ein? In der Regel wirkt sich ein eingebundener Instagram-Feed positiv auf die Social-Media-Statistik sowie die Website-Nutzung aus: Beide Fronten verzeichnen Wachstum. Das führt zu höheren Conversions.

Drei wichtige Benefits möchte ich dir an die Hand geben, die du erreichen kannst, wenn du einen Instagram-Feed in deine Webseite integrierst:

  1. Mehr Instagram-Follower und höheres Engagement
  2. Höhere Verweildauer auf der Webseite
  3. Steigerung der Conversion Rate durch User-Generated Content (UGC) und Social Proof

1. Mehr Instagram-Follower und höheres Engagement

Wenn du einen Instagram-Feed auf deiner Webseite präsentierst, dann führt dieser immer zu mehr Traffic auf dein Instagram-Profil.

Manche Kunden äußern in unserem Live-Chat gegenüber dem Flockler-Support, dass sie nicht möchten, dass ihre Webseitenbesucher die Seite verlassen und sie sie an die Social-Media-Plattformen verlieren. Andere Kunden hingegen freuen sich über mehr Besuche auf ihrem Instagram-Profil. Denn mehr Besucher bedeutet in der Regel auch mehr Follower.

Welche Kunden haben recht?

Beide.

Manchmal bieten Webseiten einen sehr geradlinigen Weg zur Conversion. Dann möchtest du vielleicht vermeiden, dass deine potenziellen Kunden die Webseite schnell wieder verlassen. In diesem Fall ist die Popup-Funktion von Flockler nützlich: Wenn Besucher auf eines der Instagram-Bilder auf der Webseite klicken, öffnet sich ein Layer mit dem Bild. Die Besucher können durch den Content swipen, ohne dabei die Webseite verlassen zu müssen. Kunden nutzen die Popup-Funktion, um Instagram-Feeds in Webseiten einzubinden und damit Vertrauen zu schaffen sowie frischen Content zu bieten.

Instagram-Slider in einem Online-Shop
Mit Flockler kannst du wählen, ob du die Bilder und Videos deines Instagram-Feeds in einer Popup-Ansicht anbieten möchtest.

Auf der anderen Seite haben manche Produkte und Dienstleistungen einen langen Vertriebszyklus. Und wenn man Besucher auf das Instagram-Profil führt, erhält man weitere Datenpunkte für Social Ads und Re-Marketing. Wenn ein User das Instagram-Profil einer Marke besucht (und eingeloggt ist), dann stehen dir die Daten für das Re-Marketing über die Instagram- und Facebook-Werbetools zur Verfügung. Natürlich erhält die Marke nicht die genauen Nutzerdaten. Aber sie kann künftige Ads auf User ausrichten, die das Instagram-Profil besucht haben, und – was noch wichtiger ist – auf ähnliche Zielgruppen, sogenannte Lookalikes.

Nimmt der Traffic auf deinen Instagram-Profil zu, wächst auch die Anzahl deiner Follower sowie das Engagement mit einzelnen Posts.

Je mehr Follower und Engagement, desto mehr Menschen werden in Zukunft die Instagram-Feeds der Marke sehen. So funktioniert der Instagram-Algorithmus. Das ist also der positive Kreislauf, den du dir für deine Marke auf Instagram wünschst.

2. Höhere Verweildauer auf der Webseite

Ein auf einer Produktseite eingebundener Instagram-Feed
Wenn du deine Produkte in Aktion zeigst und frische Instagram-Feeds in deine Webseite einbindest, erhöht sich auch die Verweildauer: Webseitenbesucher verbringen mehr Zeit auf deiner Webseite und beschäftigen sich länger mit deinen Inhalten.

Es geht nicht nur darum, positive Ergebnisse für dein Instagram-Profil zu erzielen, auch dein Website-Admin wird sich über die Ergebnisse freuen.

Ein in eine Website eingebundener Instagram-Feed erhöht die Verweildauer auf der Website.

Erstens sind Webseitenbesucher von Natur aus an visuellen Inhalten interessiert. Denn diese vermitteln Informationen intuitiver als Text oder Ton.

Zweitens besteht ein großer Teil des Social-Media-Contents aus Videos. Und Untersuchungen zufolge sind Videos die effizienteste und ansprechendste Art der Informationsbeschaffung. Die Algorithmen von Instagram bevorzugen Videos, weil sie die Aufmerksamkeit der Besucher länger binden.

Schließlich veröffentlichen Marken häufig täglich oder zumindest mehrmals pro Woche neue Inhalte auf ihren Instagram-Profilen, die oft sehr aktuell und saisonal sind. Instagram und andere Social-Media-Kanäle ermöglichen es Marken, schnell auf unerwartete Ereignisse und aktuelle Themen wie #blacklivesmatter zu reagieren. Der Rest der Webseite (ganz zu schweigen von Printmaterialien) hat selten eine ähnliche Flexibilität. Dadurch können Instagram-Feeds auf deiner Webseite die Sichtweise deiner Marke auf ein aktuelles Thema in Echtzeit darstellen.

3. Steigerung der Conversion Rate durch User-Generated Content (UGC) und Social Proof

Instagram-Feed auf der Webseite von Vivadogs
Vivadogs bindet einen Instagram-Feeds in seine Webseite ein und liefert damit Social Proof.

Der wohl interessanteste Vorteil eines auf der Webseite integrierten Instagram-Feeds ist die zusätzliche Glaubwürdigkeit und der Social Proof, den du von Kunden sammelst und anderen Kunden präsentierst.

Viele Webseiten und Plattformen sammeln schon länger Reviews und Rezensionen im Textformat. Mit Hashtags versehene Instagram-Bewertungen mit Bildern und Videos sind jedoch weitaus aussagekräftiger als Texte auf der Website. Sie erhalten Likes und Kommentare von Bekannten deiner Kunden. Etwas, das für eine Textbewertung auf einer Webseite in dem Ausmaß nicht realistisch wäre. Social Reviews erhöht effizient die Reichweite und Größe deines Publikums.

Ich habe mit vor Kurzem einen Schreibtisch für mein Zuhause gekauft. Und obwohl mir Bilder und Design auf der Webseite des Anbieters gefielen, konnte ich mir nicht vorstellen, dass der Schreibtisch in meine relativ kleine Wohnung passen würde. Nachdem ich jedoch die von Usern generierten Rezensionen auf der Website gesehen hatte, in denen andere Kunden den Schreibtisch in der Ecke ihres Wohnzimmers platziert hatten, wusste ich, dass ich das Richtige gefunden hatte. Im Nachhinein fiel mir die Entscheidung leicht. Doch ohne den authentischen Instagram-Feed auf der Produktseite hätte ich mich vielleicht auf die Suche nach Alternativen gemacht.

Social Proof und ein auf einer Website eingebundener Instagram-Feed erhöhen die Conversion Rate und den Umsatz. Die Menschen vertrauen in die Erfahrungen anderer Kunden mehr als Marketingmaterial, das mit Photoshop bearbeitet wurde.

Flockler hilft Marketern wie dir, Social Media Feeds zu generieren und spielt User-Generated Content auf jedem digitalen Service aus. So erhöhst du die Verweildauer und beschleunigst Conversions.

Demo anfordern Starte deine 14-Tage-Testversion
Starte deine 14-Tage Testversion