Tutorial: Instagram-Feeds in WordPress einbinden

Instagram-Feed, der mit dem Social-Media-Aggregator-Tool Flockler erstellt wurde

Instagram hat sich rasant entwickelt: von einer einfachen Social-Media-Plattform hin zu einem der wichtigsten Marketingkanäle für Konsumgüter-Marken. Tourismus, Gastronomie, Musik, Sport, Bildung – Millionen Unternehmen nutzen Instagram heute für ihr Marketing.

Auf der anderen Seite hat sich WordPress zum beliebtesten Content-Management-System (CMS) für Webseiten weltweit gemausert: Im Februar 2021 lag der Marktanteil von WordPress bei 64,4 Prozent. Zum Vergleich: Shopify rangierte mit 5,3 Prozent auf Rang zwei. WordPress, dessen Mission es ursprünglich war, Bloggern eine Plattform zu bieten, dient heute als CMS-Grundlage für Marken wie Playstation, CNN und die Rolling Stones.

Und so wundert es nicht, dass eine der häufigsten Support-Fragen in unserem Live-Chat lautet: „Wie kann ich einen Instagram-Feed in WordPress einbinden?“

Nutzt du Instagrams Einbettungsmöglichkeit oEmbed, kannst du jedes beliebige Instagram-Bild und jedes beliebige Instagram-Video auf deiner WordPress-Seite einbinden. Doch es ist recht aufwendig, jedes einzelne Bild oder Video auf diese Weise auszuspielen. Marketer und Webseiten-Administratoren suchen daher gerne nach einer automatisierten Lösung, die alle aktuellen Beiträge des unternehmenseigenen Instagram-Accounts in Echtzeit präsentiert. Ganz ohne manuelles Zutun.

Mit Flockler können Marketer Instagram-Bilder und -Videos, die ihr Unternehmen auf der Social-Media-Plattform veröffentlicht, sammeln und über ein Instagram-Widget auf ihrer Webseite oder digitalen Services anzeigen. Das bietet dir die Möglichkeit, einen Instagram-Feed zu generieren und auf jeder gewünschten WordPress einzubetten – also wo du möchtest und so oft du möchtest. Dabei kannst du wählen, ob du deinen Webseiten-Besuchern den Instagram-Feed als Social Wall, im Raster-Layout oder als Karussell präsentieren möchtest. Ganz gleich für welches Format du dich entscheidest: In jedem Fall hast du einen sich ständig aktualisierenden Live-Feed mit den neuesten Instagram-Bildern und frischesten Instagram-Videos parat.

Hier erfährst du, wie du in wenigen Minuten einen Instagram-Feed erstellst und in deine WordPress-Seite einbettest:

  1. Sammle Bilder und Videos von jedem beliebigen Instagram-Business-Account

  2. Social Wall, Raster oder Karussell – entscheide dich für ein Layout für deinen Instagram-Feed

  3. Integriere deinen Instagram-Feed in WordPress

1. Sammle Bilder und Videos von jedem beliebigen Instagram-Business-Account

Im ersten Schritt legst du fest, welche Inhalte du von Instagram beziehen und später präsentieren möchtest. Mit Flockler kannst du Instagram-Content von jedem Business-Account sammeln und auf deiner WordPress-Seite zeigen. Dafür musst du kein Admin dieses Instagram-Business-Accounts sein.

Wenn du noch keinen Flockler-Account für dein Unternehmen hast, starte mit unserer kostenlosen Testversion. Mit dieser kannst du ohne jede Verpflichtung alle Funktionalitäten von Flockler 14 Tage lang kennenlernen und ausprobieren. Und: Unser Support-Team steht dir bei allen Fragen zur Seite.

Sobald du deinen Account erstellt hast, leiten wir dich an, Instagram-Feed aufzusetzen, der sich automatisch in Echtzeit aktualisiert. Dafür musst du dich mit deinem persönlichen Facebook-Account anmelden. Keine Sorge: Flockler speichert keinerlei Daten von deinem persönlichen Facebook-Profils und zieht sich auch keine Inhalte von deinem Facebook-Account. Die Anmeldung dient ausschließlich der Verifizierung: Wir erhalten dadurch einen Schlüssel von Facebook, der es dir ermöglicht, auf Instagram-Inhalte zuzugreifen. Sobald wir diesen Schlüssel bekommen haben, kannst du einen Instagram-Feed von jedem beliebigen Unternehmen erstellen.

Hier ist ein Video, das zeigt, wie ich einen Instagram-Feed mit Instagram-Bildern von der Europäischen Zentralbank erzeuge:

Ist der automatisierte Instagram-Feed erstellt, klopft Flockler im Fünf- bis Zehn-Minuten-Takt bei Instagram an und schaut, ob es neuen Content gibt. Neue Instagram-Bilder und -Videos tauchen dann sofort und ohne manuelle Zutun auf deiner WordPress-Seite auf.

2. Social Wall, Raster oder Karussell – entscheide dich für ein Layout für deinen Instagram-Feed

Im zweiten Schritt entscheidest du dich für ein Layout: Wie möchtest du deinen Instagram-Feed auf deiner WordPress-Seite präsentieren? Du kannst zwischen drei Optionen wählen: Du kannst deinen Instagram-Feed als klassische Social Wall ausspielen, ein Raster-Layout nutzen sowie alle Instagram-Bilder und -Videos im Karussell präsentieren.

Besonders attraktiv für dich: Mit nur einer Flockler-Lizenz kannst deinen Instagram-Feed in mehreren Layout-Versionen präsentieren und auf einer beliebigen Anzahl an WordPress-Seiten ausspielen. So könntest du beispielsweise auf der Homepage deinen Instagram-Feed als Social Wall einbinden und auf einer Produktseite dafür das Karussell nutzen.

Social Wall

Die Social Wall ist das ideale Layout, wenn du Inhalte verschiedener Social-Media-Plattformen kombinieren oder wenn du neben Bild und Video auch die Instagram-Bildunterschriften anzeigen möchtest. Mit Hilfe des Bearbeitungstools von Flockler und unserem Support-Team kannst du darüber hinaus das Look & Feel deines Instagram-Feeds anpassen und mit deinem Branding abstimmen. Unser Support ist hierbei ein Service, den du kostenlos nutzen kannst.

Wie sieht die Social Wall aus? Hier ist ein Beispiel, wie Metallica die Social Wall auf ihrer Konzertseite verwendet:

Social Wall von Metallica, aufgesetzt mit Flockler

Grid- oder Raster-Layout

Das Raster-Layout rangiert auf der Beliebtheitsskala ganz oben, wenn Flockler-Nutzer einen Instagram-Feed auf ihrer WordPress-Seite einbinden möchten. Das liegt daran, dass das Look & Feel des Raster-Layouts an die Optik der Instagram-Profilseite erinnert. In den Einstellungen des Flockler-Embed-Codes kannst du übrigens auswählen, ob du Profilinformationen, Zeitstempel sowie die Anzahl an Likes und Kommentaren auf deiner WordPress-Seite anzeigen möchtest.

Wie nutzen andere das Raster-Layout? Hier ist ein Beispiel, wie Hapag-Lloyd Cruises seinen Social-Media-Feed auf der Homepage präsentiert:

Instagram-Feed von Hapag-Lloyd im Raster-Layout, umgesetzt mit Flockler

Karussell

Das Karussell ist die perfekte Wahl, wenn du vertikal nicht viel Platz hast. Mit dem Karussell-Layout können deine Webseiten-Besucher dann Bilder von rechts nach links oder von links nach rechts swipen. Viele Flockler-Kunden bevorzugen die Darstellung im Karussell in der mobilen Ansicht ihrer Webseite oder in mobilen Apps.

Wie sieht das beispielhaft aus? GoPro nutzt das Karussell für einen atemberaubenden Instagram-Feed auf seiner mobilen Version der GoPro-Award-Seite:

Instagram-Feed im Karussell-Layout von GoPro, umgesetzt mit Flockler

So kreierst du ein Layout in Flockler 

Logge dich in dein Flockler-Konto ein und navigiere dich zum Tab „Display“ („Anzeige“). Wähle nun aus den drei Optionen das Layout aus, für das du einen Einbettungscode generieren möchtest:

Flockler bietet 3 Layout-Optionen: die Social Wall, ein Raster-Design sowie ein Karussell

Hast du dein Layout angeklickt, gibt Flockler dir auf der nächsten Seite den Einbettungscode aus. Anstelle diesen zu kopieren, klickst du auf den Button darunter „Add to WordPress“. Durch den Klick auf diesen Button kopierst du den korrekten Shortcode. Hast du Flocklers WordPress-Plug-in installiert, kannst du diesen Shortcode auf deiner WordPress-Seite nutzen.

Code eines Instagram-Feeds für das Einbetten in einer WordPress-Seite, generiert mit Flockler

3. Integriere deinen Instagram-Feed in WordPress

Zu guter Letzt loggst du dich in dein WordPress ein und integrierst den Flockler-Einbettungscode, um den Instagram-Feed auf deiner Webseite zu präsentieren.

Das Hinzufügen des Flockler-Einbettungscodes in WordPress ist unkompliziert und du kannst Flockler auf jeder Seite und in jedes Element integrieren.

Hast du einen Business-Account auf WordPress.com, kannst du den Feed auf deiner WordPress-Seite einbetten, indem du das Flockler-WordPress-Plug-in installierst. Hast du eine selbst gehostete WordPress-Seite, kannst du für die Einbettung entweder das Flockler-Plug-in nutzen oder aber den Standard-Einbettungscode dafür verwenden.

Für dieses Tutorial gehe ich davon aus, dass du das Flockler-Plug-in heruntergeladen und installiert hast.

Abhängig von deiner WordPress-Version hast du den Classic- oder Block-Editor im Einsatz oder nutzt ein Plug-in wie Elementor, um deine Seiten zu verwalten. Daher gehe ich in diesem Tutorial auf alle drei Möglichkeiten ein.

Instagram-Feed über WordPress Block Editor hinzufügen

  1. Öffne den Blogpost oder die Seite, auf welcher du den Instagram-Feed integrieren 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 

  4. Füge den Shortcode in das Element ein, den du vorhin in Flockler aus dem „Display“-Tab kopiert hast.

  5. Aktualisiere bzw. veröffentliche die WordPress-Seite, indem du deine Änderungen wie gewohnt speicherst und auf „Update Changes“ klickst.

Das war’s schon. Das schöne Instagram-Embed-Widget taucht nun auf deiner WordPress-Seite auf und spielt die Instagram-Inhalte deines Feeds aus. Wenn du irgendwelche Probleme oder Fragen dazu hast, klicke bitte auf den Chat-Button auf unserer Webseite. Wir eilen dir zu Hilfe!

Instagram-Feed über WordPress Classic Editor hinzufügen

  1. Öffne den Blogpost oder die Seite, auf der du den automatisierten Instagram-Feed einbetten möchtest.

  2. Dein WordPress-Content-Editor bietet dir die Möglichkeit an, im visuellen Modus oder im Textmodus zu arbeiten. Wähle den Textmodus aus.

  3. Füge den Shortcode, den du vorhin in Flockler kopiert hast, an der Stelle ein, an der du den Instagram-Feed platzieren möchtest.

  4. Aktualisiere bzw. veröffentliche die WordPress-Seite, indem du deine Änderungen wie gewohnt speicherst und auf „Update Changes“ klickst.

Fertig! Wenn du nun die Seite besuchst, auf der du den Feed integriert hast, sollte sich hier frischer Social-Media-Content im Layout deiner Wahl auftauchen. Ist dies nicht der Fall und du stößt auf Probleme, klicke bitte auf den Chat-Button auf unserer Webseite. Wir helfen deinem Social-Media-Feed auf die Sprünge.

Instagram-Feed mit Elementor hinzufügen

  1. Erstelle eine neue WordPress-Seite oder navigiere dich zu einer bestehenden, um diese zu bearbeiten.

  2. Klicke in der Elementor-Schaltfläche auf „Bearbeiten“ („Edit“).

  3. Suche auf der linken Seite nach dem HTML-Widget.

  4. Ziehe das Widget per Drag & Drop auf deine Seite.

  5. Links öffnet sich ein neuer Satz an Bearbeitungswerkzeugen.

  6. Kopiere den Flockler-Shortcode (Tab „Display“ in Flockler) und füge ihn direkt in das HTML-Code-Feld ein. 

  7. Aktualisiere bzw. veröffentliche die Seite.

Geschafft! Du hast nun einen eleganten und dynamischen Instagram-Feed deiner WordPress-Seite hinzugefügt und dank Flockler gelangt so immer frischer Social-Media-Content auf deinen Online-Auftritt, sobald dein genutzter Instagram-Business-Account neue Bilder und Videos veröffentlicht.

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