So binden Sie einen Instagram-Feed in Ihre Website ein (Schritt-für-Schritt-Anleitung)

Wenn Ihre Website noch genauso aussieht wie vor drei Monaten, fällt das den Besuchern auf. Und eine der schnellsten Möglichkeiten, das zu beheben, ohne eine einzige Zeile Code zu ändern, ist, Ihre Instagram-Inhalte direkt auf Ihre Website einzubinden.

Ein eingebetteter Instagram-Feed erfüllt zwei Zwecke gleichzeitig: Er sorgt dafür, dass Ihre Homepage oder Landingpages aktuell wirken, und bietet Besuchern Social Proof, den sie sehen und durchscrollen können, anstatt nur darüber zu lesen. Der Haken dabei: Instagram macht es einem nicht gerade leicht. Hier erfahren Sie, was wirklich funktioniert und wie Sie es richtig einrichten.

Schnelle Antwort:

Um einen Instagram-Feed in Ihre Website einzubetten, können Sie entweder den Einbettungscode jedes Beitrags kopieren und auf Ihrer Website einfügen oder Ihr Instagram-Konto mit einem Social-Media-Aggregator wie Instagram verbinden. TagembedWählen Sie anschließend aus, ob Beiträge anhand von Benutzername, Hashtag oder Erwähnung abgerufen werden sollen, passen Sie das Widget-Layout an und kopieren Sie den generierten Einbettungscode in Ihr CMS (WordPress, Shopify, Squarespace, Webflow, Wix oder einfaches HTML). Es ist keine Entwicklerkonfiguration oder API-Einrichtung erforderlich.

Welche Vorteile bietet die Einbettung eines Instagram-Feeds auf Ihrer Website?

Bevor wir uns mit dem Wie befassen, ist es wichtig, sich über das Warum im Klaren zu sein, denn davon hängt ab, welche Methode man wählen sollte.

Ein Live-Instagram-Feed auf Ihrer Website:

• Seiten werden automatisch aktualisiert. Poste auf Instagram, und deine Website wird automatisch aktualisiert, ohne dass jemand das CMS bedienen muss.
• Schafft schneller Vertrauen als Stockfotos. Echte Beiträge, echte Kunden, echte Momente.
• Gibt Besuchern einen Grund, länger zu verweilen, insbesondere auf Produktseiten, Landingpages und Homepages.
• Verwandle deine Instagram-Follower in Website-Traffic und umgekehrt, da die meisten Social-Media-Feed-Widgets Verlinke zurück zum Originalbeitrag oder zu deinem Profil.

Nichts davon passiert, wenn man jede Woche manuell Screenshots von Beiträgen anfertigt. Genau da fangen die meisten Leute an, bevor sie merken, dass das nicht skalierbar ist.

Drei Möglichkeiten, Instagram in eine Website einzubetten:

Es gibt hier eigentlich nur drei Lösungswege, und jeder löst ein anderes Problem.

1. Instagram-eigene Einbettungsfunktion (nur für einzelne Beiträge)

Instagram ermöglicht es dir, jeweils einen Beitrag oder ein Reel einzubetten. Öffne den Beitrag auf deinem Desktop, klicke auf das Dreipunkt-Menü, wähle „Einbetten“ und kopiere den angezeigten Code. Füge diesen Code anschließend in einen HTML-Block auf deiner Website ein.

Das funktioniert gut, wenn man einen einzelnen Beitrag in einen Blogartikel einbinden möchte. Sobald man aber einen richtigen Feed anzeigen will, stößt man an seine Grenzen, da es keine Möglichkeit gibt, mehrere Beiträge anzuzeigen, nach Hashtags zu filtern oder den Feed automatisch aktualisieren zu lassen. Man müsste also jede Woche die Einbettungscodes manuell austauschen. Außerdem ist zu beachten, dass native Einbettungen die Tracking-Skripte von Instagram auf der eigenen Seite laden, was je nach Zielgruppe die Einhaltung der DSGVO erschweren kann.

2. Instagram Graph API (Selbst erstellen)

Für Entwickler, Instagrams Graph-API Damit können Sie Feed-Daten direkt abrufen und eine vollständig individuelle Darstellung erstellen. Sie haben die volle Kontrolle über das Layout, übernehmen aber auch die Wartungsarbeiten: Token-Aktualisierungen, Ratenbegrenzungen, API-Versionsänderungen und die eigentliche Frontend-Entwicklung zum Rendern der Inhalte. Dieser Ansatz ist sinnvoll, wenn Sie über ausreichend Entwicklungsressourcen verfügen und sehr spezifische Designanforderungen haben. Für die meisten Marketingteams ist er jedoch übertrieben.

3. Ein Social-Media-Aggregator (Der praktische Mittelweg)

Hier landen die meisten Websites, und das aus gutem Grund. Ein Tool wie Tagembed Verbindet sich mit Instagram, ruft Beiträge automatisch nach Profil, Hashtag oder Erwähnung ab und bietet ein fertiges Widget, das Sie individuell gestalten und mit nur einer Zeile Einbettungscode in jede beliebige Website einfügen können. Keine API-Tokens, keine Entwicklerkenntnisse erforderlich – der Feed aktualisiert sich automatisch im Hintergrund.

Hier ist der Vergleich der drei Methoden:

Methodik	Am besten geeignet für	Technischer Aufwand	Automation
Native Instagram-Einbettung	Ein einzelner Beitrag innerhalb eines Blogs oder einer Seite	Niedrig (kopieren und einfügen)	Keine, manuell aktualisiert
Instagram Graph API	Unternehmenswebsites, die ein vollständig individuelles Layout benötigen	Hohe Anforderungen, erfordert einen Entwickler	Vollautomatische
Social-Media-Aggregator (Tagembed)	Marketingteams, kleine Unternehmen und die meisten Websites	Niedrig, kein Code erforderlich	Vollautomatische

Schritt für Schritt: Wie bette ich einen Instagram-Feed ein? Tagembed?

Hier ist der tatsächliche Ablauf von Anfang bis Ende.

Schritt 1: Erstellen Sie eine Tagembed Konto

Registrieren Sie sich für ein kostenloses Konto. Sie müssen während des gesamten Prozesses keinen Code eingeben.

Schritt 2: Instagram als Quelle hinzufügen

Klicken Sie hier, um ein neues Widget zu erstellen, und wählen Sie Instagram als Quelle aus. Sie haben drei Möglichkeiten, Inhalte abzurufen:

• Nach Handle – zeigt Beiträge eines bestimmten Instagram-Profils an.
• Nach Hashtag – ruft Beiträge ab, die mit einem bestimmten Hashtag versehen sind; nützlich für Kampagnen oder nutzergenerierte Inhalte.
• Durch Erwähnung – zeigt Beiträge an, in denen Ihr Konto markiert wurde, was sich gut eignet, um Kundeninhalte zu präsentieren.

Eine Sache sollte man gleich zu Beginn erwähnen: Öffentliche Profile funktionieren ohne zusätzliche Einrichtung, aber wenn das Konto, von dem Sie Daten abrufen, privat ist, muss es in ein Creator- oder Creator-Profil umgewandelt werden. Geschäftskonto Die Verbindung muss korrekt hergestellt sein, bevor Ihre Beiträge angezeigt werden. Von allen Einrichtungsproblemen, auf die Nutzer stoßen, ist dies das häufigste und selten ein Fehler. Wenn Ihr Feed direkt nach der Verbindung leer ist, überprüfen Sie als Erstes Ihren Kontotyp.

Schritt 3: Feed-Layout anpassen

Sobald Ihre Quelle verbunden ist, erhalten Sie eine Live-Vorschau, die Sie anpassen können. Wählen Sie zwischen Raster, Karussell, Schieberegler, Mauerwerk oder einem soziale Wand Das Layout hängt vom Aufstellungsort ab. Sie können außerdem Folgendes steuern:

• Anzahl der angezeigten Beiträge
• Spalten- und Zeilenanzahl
• Farben, Schriftarten und Abstände passend zu Ihrer Marke
• Ob Bildunterschriften, Likes oder Benutzernamen sichtbar sind
• Moderationseinstellungen, mit denen Sie bestimmte Beiträge vor der Veröffentlichung genehmigen oder ausblenden können.

Schritt 4: Einbettungscode abrufen

Sobald das Widget korrekt angezeigt wird, klicken Sie auf „Veröffentlichen“. Wählen Sie die gewünschte Galerie und anschließend das gewünschte Layout aus den angezeigten Optionen. Klicken Sie auf „Code generieren“.

Schritt 5: Fügen Sie es in Ihre Website ein

Sobald Sie den Instagram-Einbettungscode generiert haben, müssen Sie ihn lediglich im Backend Ihrer Website einfügen. Die genauen weiteren Schritte hängen jedoch davon ab, wo Ihre Website gehostet wird. Dies wird im Folgenden erläutert.

So fügen Sie den Instagram-Feed-Einbettungscode auf verschiedenen Website-Plattformen hinzu:

Sobald Sie Ihren Einbettungscode generiert haben von TagembedSie können es in nahezu jeden Website-Baukasten oder jedes CMS einbinden. Der Vorgang ist im Wesentlichen überall gleich: Code kopieren, einen benutzerdefinierten HTML- oder Einbettungsblock auf Ihrer Plattform suchen, ihn einfügen und veröffentlichen.

1. Instagram-Feed in die HTML-Website integrieren

Hinzufügen eines Instagram-Feed auf eine HTML-Website Es ist unkompliziert und funktioniert auf nahezu jeder statischen Website. Befolgen Sie diese Schritte, um den Feed auf Ihrer Seite einzubinden.

• Klicken Sie auf „Veröffentlichen“, sobald Ihr Feed konfiguriert ist, und wählen Sie dann „HTML“ als Plattform aus.
• Klicken Sie auf die Schaltfläche „Code kopieren“, um den generierten Einbettungscode zu kopieren.
• Öffnen Sie die HTML-Datei Ihrer Website in einem Texteditor und navigieren Sie zu dem Abschnitt, in dem der Feed erscheinen soll.
• Fügen Sie den Code ein und speichern Sie die Datei.
• Laden Sie die Seite neu, um den Live-Feed zu sehen.

2. Instagram-Feed zur Shopify-Website hinzufügen

Shopify-Shops profitieren von Instagram-Feeds, insbesondere in den Produkt- und Startseitenbereichen, wo Social Proof in unmittelbarer Nähe zum Kaufbutton platziert ist. So betten Sie einen Instagram-Feed ein: Instagram-Feed auf Shopify Webseite.

• Klicken Sie auf „Veröffentlichen“ und wählen Sie Shopify als Ihr CMS aus. Kopieren Sie anschließend den Code.
• Melden Sie sich in Ihrem Shopify-Adminbereich an und gehen Sie zum Online-Shop.
• Wählen Sie „Designs“ und klicken Sie dann auf „Anpassen“.
• Wählen Sie im linken Bereich „Benutzerdefinierte Inhalte“ aus.
• Fügen Sie einen benutzerdefinierten Liquid-Block hinzu und fügen Sie den Einbettungscode darin ein.
• Klicken Sie auf Speichern.

3. Instagram-Feed auf der WordPress-Website anzeigen

WordPress ist die gängigste Plattform für diese Art von Einbettung, und Tagembed Slots lassen sich über den Standard-Blockeditor einfügen. Dies sind die Schritte zum Hinzufügen eines Instagram-Widget für eine WordPress-Website.

• Gehen Sie zu „Veröffentlichen“ und wählen Sie WordPress aus der Plattformliste aus. Kopieren Sie anschließend den Einbettungscode.
• Melden Sie sich bei Ihrem WordPress-Administrationsbereich an.
• Öffnen Sie die Seite, den Beitrag oder den Abschnitt, in dem der Feed angezeigt werden soll.
• Klicken Sie auf die Schaltfläche (+) "Block hinzufügen" und wählen Sie "Benutzerdefiniertes HTML".
• Fügen Sie den Code ein und klicken Sie auf Aktualisieren.

4. Instagram-Feed in die Elementor-Website einfügen

Wenn Sie Seiten mit Elementor erstellen, wird der Feed über das HTML-Widget und nicht über den Standard-WordPress-Editor eingebunden. Hier ist der Vorgang zum Einbetten eines Feeds. Instagram-Widget auf einer Elementor-Website.

• Klicken Sie auf „Veröffentlichen“ und wählen Sie „Andere“ als Plattform aus. Kopieren Sie anschließend den Code.
• Melden Sie sich bei Ihrer Elementor-Website an und öffnen Sie die Seite oder den Beitrag, den Sie bearbeiten möchten.
• Im Elementor-Editor finden Sie das HTML-Widget oder können ein neues per Drag & Drop auf die Seite ziehen.
• Fügen Sie den Einbettungscode in das HTML-Widget ein.
• Speichern Sie Ihre Änderungen.

5. Instagram-Feed in die Squarespace-Website einbetten

Squarespace verlangt, dass der Code in einen separaten Codeblock und nicht in einen allgemeinen Textbereich eingefügt wird. Befolgen Sie diese Schritte. Füge den Instagram-Feed auf der Squarespace-Website hinzu korrekt.

• Klicken Sie auf Veröffentlichen, wählen Sie Squarespace aus und klicken Sie auf „Code abrufen“, um den Einbettungscode zu generieren.
• Kopieren Sie den Code in Ihre Zwischenablage.
• Melden Sie sich in Ihrem Squarespace-Konto an und navigieren Sie zur Zielseite.
• Bearbeiten Sie die Seite und fügen Sie einen neuen Inhaltsblock hinzu.
• Wählen Sie in den Blockoptionen „Code“ aus und fügen Sie den Einbettungscode ein.
• Speichern Sie Ihre Änderungen.

6. Instagram-Feed in die Webflow-Website einbinden

Webflow rendert Einbettungen live im Designer, sodass Sie die Platzierung vor der Veröffentlichung in der Vorschau ansehen können. So richten Sie ein Instagram-Widget auf der Webflow-Website.

• Klicken Sie auf Veröffentlichen und wählen Sie „Andere“ als CMS-Plattform aus.
• Legen Sie die Breite und Höhe des Widgets fest und klicken Sie dann auf „Code kopieren“.
• Melden Sie sich in Ihrem Webflow-Adminbereich an und gehen Sie zu der Seite, die Sie bearbeiten möchten.
• Klicken Sie auf „Element hinzufügen“, scrollen Sie zu „Einbetten“ und ziehen Sie es auf die Seite.
• Fügen Sie den Code ein und speichern Sie Ihre Änderungen.

7. Instagram-Feed in die Wix-Website einfügen

Wix verarbeitet Einbettungen über das iFrame-Element anstatt über einen einfachen Codeblock, was beim ersten Mal zu Verwirrung führen kann. Hier sind die Schritte, die Sie befolgen müssen, um die Einbettung vorzunehmen. Instagram-Feed auf Wix.

• Klicken Sie auf Veröffentlichen, wählen Sie Wix als Plattform aus, passen Sie Breite und Höhe an und kopieren Sie den Code.
• Loggen Sie sich bei Wix ein und öffnen Sie die Seite, auf der der Feed erscheinen soll.
• Klicken Sie auf die Schaltfläche „+Hinzufügen“, dann auf „Mehr“ und wählen Sie unter den Einbettungsoptionen „HTML iFrame“ aus.
• Fügen Sie den generierten Code in das Codefeld ein.
• Klicken Sie auf „Anwenden“, um zu speichern.

8. Instagram-Feed in die Weebly-Website integrieren

Der Weebly-Editor verwendet ein eigenes Einbettungsfeld, das von den Standardinhaltselementen getrennt ist. So fügen Sie ein Instagram-Widget für die Weebly-Website.

• Klicken Sie auf Veröffentlichen, wählen Sie „Andere“ als Ihr CMS, passen Sie gegebenenfalls Breite und Höhe an und kopieren Sie den Code.
• Navigieren Sie auf die Seite Ihrer Weebly-Website, auf der der Feed erscheinen soll.
• Öffnen Sie die Option „Code einbetten“ im Editor.
• Wählen Sie das Element „HTML-Box“ aus und klicken Sie auf „Benutzerdefiniertes HTML bearbeiten“.
• Füge den Code ein und speichere.

9. Instagram-Feed auf der BigCommerce-Website einbinden

BigCommerce ist eine gängige Wahl für Online-Shops, und der Feed kann entweder auf einer separaten Seite oder direkt in eine Theme-Vorlage eingebunden werden. Befolgen Sie diese Schritte, um einen Feed hinzuzufügen. Instagram-Widget für die BigCommerce-App:

• Klicken Sie auf Veröffentlichen, wählen Sie „Andere“ als Plattform aus und kopieren Sie den Code.
• Melden Sie sich in Ihrem BigCommerce-Konto an.
• Gehen Sie zu Shop > Webseiten für eine bestimmte Seite oder zu Shop > Design für eine Produktseite oder die Startseite.
• Klicken Sie auf der Seite auf „Bearbeiten“ und wechseln Sie dann zum HTML-Editor (suchen Sie nach der Schaltfläche „<>“ oder „Quelltext“).
• Fügen Sie den Code ein, sehen Sie sich eine Vorschau an und veröffentlichen Sie die Seite.

10. Instagram-Feed in Google Sites einbinden

Google Sites verfügt über eine eigene Einbettungsfunktion im Seiteneditor und gehört damit zu den benutzerfreundlicheren Plattformen. Folgen Sie diesen Schritten: Instagram-Feed zu Google-Websites hinzufügen.

• Klicken Sie auf „Veröffentlichen“ und wählen Sie „Andere“ als Plattform aus. Passen Sie Breite und Höhe an und kopieren Sie anschließend den Code.
• Melden Sie sich bei Google Sites an und öffnen Sie die Seite, die Sie bearbeiten möchten.
• Klicken Sie im Seiteneditor auf „Einbetten“.
• Wählen Sie „Einbettungscode“ und fügen Sie den Code ein.
• Speichern Sie Ihre Änderungen.

11. Instagram-Feed auf der HubSpot-Website einbinden

Der Landingpage-Editor von HubSpot fügt den Einbettungscode in die HTML-Einstellungen der Fußzeile ein, anstatt ihn in einem sichtbaren Inhaltsblock zu platzieren. So funktioniert es.

• Klicken Sie auf Veröffentlichen, wählen Sie „Andere“ als Plattform aus und kopieren Sie den Code.
• Melden Sie sich bei HubSpot an, gehen Sie zum Bereich Marketing und öffnen Sie Landingpages.
• Wählen Sie die Seite aus und klicken Sie auf Bearbeiten.
• Gehen Sie zu Datei > Seiteneinstellungen > Erweitert.
• Fügen Sie den Code in das Feld „Footer HTML“ ein und speichern und veröffentlichen Sie anschließend.

12. Instagram Reel auf Discord einbetten

Discord unterstützt keine echte Einbettung wie Webseiten, daher werden Beiträge als geteilte Links und nicht als Live-Feed angezeigt. Hier ist die Lösung.

• Gehe zu Instagram, suche den Beitrag, klicke auf die drei Punkte und wähle „Link kopieren“.
• Öffne Discord und gehe zu dem Server oder Kanal, auf dem du Inhalte teilen möchtest.
• Fügen Sie den Link in das Chatfenster ein.
• Drücken Sie „Enter“, um den Beitrag zu teilen.

13. Instagram-Feed in OpenCart einfügen

OpenCart verarbeitet Einbettungen über das Erweiterungspanel anstatt über einen Seiteneditor, da die meisten Seiten generiert werden von VorlagenDies sind die Schritte.

• Melden Sie sich in Ihrem OpenCart-Adminbereich an.
• Gehen Sie zu Erweiterungen > Erweiterungen > Inhalt > HTML-Inhalt.
• Klicken Sie auf „Neu hinzufügen“ und fügen Sie den Einbettungscode ein.
• Speichern Sie es und weisen Sie es einem Layout zu, z. B. der Startseite, der Produktseite oder der Kategorieseite.
• Aktualisieren Sie Ihren Shop, um zu bestätigen, dass der Feed live ist.

14. Instagram-Feed auf der React-Website einbetten

Bei einer React-Website wird der Feed als gerenderte Komponente und nicht als statischer Code eingefügt, da React standardmäßig kein reines HTML zulässt. So fügen Sie ihn hinzu.

• Kopieren Sie den React/JavaScript-Einbettungscode von der Tagembed Instrumententafel.
• Öffne dein React-Projekt und füge den Code in eine Komponente ein, die dangerouslySetInnerHTML verwendet.
• Fügen Sie die Komponente auf der Seite hinzu, auf der der Feed erscheinen soll.
• Speichern Sie die App und führen Sie sie aus, um die Darstellung des Feeds zu bestätigen.

Unabhängig von der verwendeten Plattform ist der zugrunde liegende Prozess derselbe: Code generieren, einen benutzerdefinierten HTML-, Code- oder Einbettungsblock suchen, ihn einfügen und veröffentlichen.

Instagram-Feed einbetten: Echte Erfolgsgeschichten

Hier sind einige Beispiele aus der Praxis von Websites und Marken, die … verwenden. Tagembed Instagram-Feeds einbetten. 

1. ORT Universität von Uruguay

Das ORT Universität von Uruguay Die Universität integrierte eine Live-Instagram-Wall auf ihrer Website, um Campusleben, studentische Erfolge und Veranstaltungen in Echtzeit zu präsentieren. Anstatt auf statische Bilder zu setzen, zeigte die Universität aktuelle Social-Media-Inhalte, die die Website lebendiger und authentischer wirken ließen. Dies animierte Besucher dazu, länger auf der Website zu verweilen und bot Studieninteressierten einen authentischen Einblick in die Campus-Kultur.

„Durch die Einbindung eines Live-Instagram-Feeds wirkt unsere Website viel lebendiger. Studieninteressierte können nun das Campusleben, Veranstaltungen und Erfolge live miterleben, was das Nutzererlebnis deutlich ansprechender macht.“

2. Funne

Mit einem auf der Website eingebetteten Live-Instagram-Feed. Funne Wir stellten sicher, dass jeder neue Instagram-Post die Webpräsenz automatisch aktualisierte. Das Ergebnis war eine Website, die stets aktiv wirkte, aktuelle visuelle Inhalte lieferte und das Kundenvertrauen durch kontinuierliche soziale Beweise stärkte.

„Anstatt die Bilder alle paar Wochen manuell zu aktualisieren, aktualisiert sich unsere Website jetzt automatisch mit neuen Instagram-Inhalten. So bleibt die Seite mühelos aktuell und modern.“

Häufige Fehler, die Menschen machen:

Ein paar Dinge, die immer wieder Probleme verursachen und die es wert sind, überprüft zu werden, bevor man annimmt, dass etwas kaputt ist:

• Ich versuche, ein privates Profil einzubetten, ohne in den Business-/Creator-Modus zu wechseln. Der Feed wird entweder leer angezeigt oder es wird ein Fehler ausgegeben.
• Die Seite wird mit zu vielen Beiträgen gleichzeitig überladen. verlangsamt die Ladezeit und beeinträchtigt das mobile Nutzererlebnis.
• Moderation überspringeninsbesondere bei Hashtag- oder Erwähnungsfeeds, wo man keine Kontrolle darüber hat, was getaggt wird.
• Testet nicht auf Mobilgeräten. Ein Feed, der auf Desktop-Computern gut aussieht, kann auf kleineren Bildschirmen das Layout ruinieren, wenn das Widget nicht responsiv ist.
• Vergessen, die Auswirkungen der DSGVO zu prüfen Wenn Sie eine native Einbettung verwenden und Besucher in der EU haben, werden die Tracking-Cookies von Instagram mitgeladen.

Wichtige Erkenntnisse

Das Einbetten eines einzelnen Instagram-Beitrags ist einfach und erfordert kein zusätzliches Tool. Einbetten Ein tatsächlicher, sich ständig aktualisierender Live-Feed ist eine andere Sache, und genau hier spielt ein guter Aggregator seine Stärken aus. Wer die volle Kontrolle behalten und Entwickler zur Verfügung hat, kann die Graph-API nutzen. Für alle anderen eignet sich ein Tool wie … Tagembed Erhalten Sie in wenigen Minuten einen vollständig individualisierten, sich selbst aktualisierenden Instagram-Feed auf Ihrer Website – ganz ohne den Wartungsaufwand, der mit dem Selberbauen verbunden ist.

Nächste Schritte, sobald Ihr Feed live ist:

• Überprüfen Sie Ihre Website-Geschwindigkeit mit Google PageSpeed ​​Insights, um sicherzustellen, dass das Widget asynchron geladen wird und den Hauptinhalt nicht verzögert.
• Testen Sie den Feed nicht nur auf Desktop-Computern, sondern auch auf Mobilgeräten, da Layoutprobleme dort meist zuerst auftreten.
• Legen Sie Moderationsregeln fest, wenn Sie Beiträge aus einem Hashtag- oder Erwähnungsfeed abrufen, damit keine themenfremden Beiträge durchrutschen.