Sie haben eine eigenständig codierte HTML-Website, ein aktives Instagram-Konto und eine Lücke dazwischen, die sich nicht so schwer schließen lässt. Die nativen Instagram-Einbettungen bieten nur begrenzte Anpassungsmöglichkeiten, während die Graph-API Tokenverwaltung, Ratenbegrenzungen und ein benutzerdefiniertes Frontend erfordert. Keines davon ist ideal, wenn Sie einfach einen sauberen, automatisch aktualisierenden Feed auf Ihrer Website wünschen.
Es gibt auch einen No-Code-Ansatz: Ein Widget-Tool wie der Instagram-Feed zieht Inhalte automatisch von Ihrem Konto und ermöglicht es Ihnen, Layouts und Stile im visuellen Editor zu konfigurieren. Keine API-Schlüssel, keine serverseitige Logik – nur ein zweizeiliger Snippet zum Kopieren und Einfügen. Unten finden Sie eine Schritt-für-Schritt-Anleitung für alle drei Methoden, damit Sie die beste Lösung für Ihre Einrichtung und Wartung wählen können.
- So erhalten Sie einen Live-Instagram-Feed, der sich automatisch aktualisiert, auf jeder HTML-Seite in weniger als 5 Minuten.
- Welches Feed-Layout passt am besten zu Ihrem Website-Typ (Portfolio, E-Commerce, Blog)
- Die wichtigsten Unterschiede zwischen Widget-, Native-Embed- und API-Ansätzen
- Praktische Tipps zur Feed-Performance, Filterung und mobiler Optimierung
Wenn Sie schon wissen, was Sie brauchen, und lediglich die Schritte benötigen, bringt Sie der unten stehende Schnellstart in weniger als 5 Minuten von null zur Veröffentlichung.
Schnellstart: Instagram in HTML einbetten
So geht’s am schnellsten — vier Schritte, keinerlei Programmierkenntnisse erforderlich.
- Instagram Feed editor and select a template.”>Öffnen Sie den Instagram-Feed-Editor und wählen Sie eine Vorlage aus.
- Geben Sie Ihren Benutzernamen ein und passen Sie den Feed an.
- Klicken Sie auf „Zur Website hinzufügen“, um Ihren Einbettungscode zu generieren.
- Fügen Sie es in den <body>-Bereich Ihrer HTML-Datei ein und veröffentlichen Sie die Änderungen.
Erstellen Sie Ihr Instagram-Feed-Widget im interaktiven Editor unten ↓
Drei Möglichkeiten, Instagram in eine HTML-Website einzubetten
Es gibt mehr als eine Möglichkeit, Instagram-Inhalte in eine HTML-Seite zu integrieren – Die richtige Wahl hängt davon ab, wie viel Kontrolle Sie benötigen und wie viele Beiträge Sie anzeigen möchten.
| Methode | Schwierigkeitsgrad | Anpassung | Automatische Updates | Am besten geeignet für | Kosten |
|---|---|---|---|---|---|
| Elfsight Instagram-Feed-Widget | Ohne Code | Hoch (Layout, Farben, Filter, Popup, CTA-Buttons) | Ja (alle 48 Stunden) | Vollständige Feed-Anzeige mit Designsteuerung | Kostenloser Plan / kostenpflichtige Tarife |
| Instagram Native-Einbettung (Einzelbeitrag) | Grundlegendes HTML | Kein (festes Instagram-Design) | Nein | Einbetten von 1–3 bestimmten Beiträgen | Kostenlos |
| Instagram oEmbed-API | Entwickler-Level | Vollständiges Frontend (Sie bauen das Frontend selbst) | Ja (du verwaltest die Aktualisierungslogik) | Maßgeschneiderte Feeds mit vollständiger Kontrolle | Kostenlos (erfordert Meta-Entwicklerkonto) |
Binden Sie die No-Code Distance Calculator-Vorlage in Ihre WordPress-Website ein und passen Sie die Funktionen so an, dass komplexe Berechnungen für Benutzer einfach werden!
Die passende Vorlage für deinen Instagram-Feed auswählen
Bevor Sie den Feed konfigurieren, legen Sie fest, welche Rolle er auf der Seite spielen soll. Ein Social-Proof-Feed auf der Produktseite benötigt eine andere Einrichtung als ein visuelles Portfolio- oder Hashtag-Feed.
| Vorlage | Was enthalten ist | Layout | Am besten geeignet für |
|---|---|---|---|
| Profil-Widget | Voller Profilkopf (Avatar, Name, Beiträge, Follower, Folgen-Button) + Beitrags-Gitter mit Slider-Navigation | Schieberegler | Brand-Seiten, „Über uns“-Bereiche, Influencer-Portfolios – überall dort, wo Sie eine vollständige Instagram-Identität schaffen möchten |
| Raster | „Folge uns auf Instagram“ – Überschrift, mehrzeiliges Raster mit Button „Mehr laden“, keine Profilstatistiken. | Raster | Eigene Instagram-Seiten, Social-Media-Bereiche im Footer, visuelle Portfolios — wenn der Inhalt wichtiger ist als das Konto |
| Kleines Widget | Zentrierte kompakte Kopfzeile (Avatar, Name, Statistiken, Folgen-Button) + 2×2-Raster mit Pfeilnavigation | Slider (kompakt) | Seitenleisten, enge Inhaltsspalten, kompakte Platzierungen – passen auch in enge Räume, ohne den Kontext der Seite zu verlieren. |
| Hashtag-Showcase | Hashtag-Titel als Überschrift + Slider-Layout, keine Profilinformationen | Schieberegler | Kampagnen-Seiten, UGC-Galerien, Event-Highlights – Beiträge nach Thema statt nach Konto anzeigen. |
| Beitrags-Slider | Profil-Header + einziger großer Beitrag mit Pfeilnavigation (nur ein Beitrag gleichzeitig sichtbar) | Slider (einzeln) | Hero-Sektionen, hervorgehobene Inhalte, Blog-Sidebars – starke Wirkung bei wenigen Beiträgen |
Template an den Typ Ihrer Website anpassen
E-Commerce- und Produktseiten
Wählen Sie Hashtag-Showcase oder Grid. Ein Hashtag-Feed nahe der Produktbeschreibung dient als visuelles Social Proof – echte Kunden verwenden das Produkt, nicht Studioaufnahmen. Laut Emplifis Q3-2025-Benchmarks führten Social-Posts mit nutzergenerierten Inhalten zu Konversionsraten, die 10× höher waren als Posts ohne UGC. Verwenden Sie die Tile-Post-Vorlage, um den Fokus auf Bilder zu legen, und richten Sie CTA-Buttons so ein, dass sie direkt zu den Produktseiten verlinken.
Portfolios und kreative Websites
Profil-Widget oder Raster. Das Profil-Widget fungiert auf deiner Seite als Mini-Instagram-Profil – inklusive vollständigem Header mit Follower-Anzahl und einer Follow-Schaltfläche, die Besucher zum Abonnieren motiviert. Grid ohne Kopfzeile eignet sich besser für dedizierte Galerie-Seiten. Stelle das Bildverhältnis auf 1:1 für ein klares Raster ein, oder Portrait für vertikal orientierte Inhalte wie Modefotografie.
Blogs und Content-Websites
Das Internet verbindet Milliarden von Menschen weltweit, und nicht alle sprechen Englisch. Indem Sie Inhalte in mehreren Sprachen anbieten, schaffen Sie Chancen, mit vielfältigen Zielgruppen in Kontakt zu treten und Ihre Reichweite am Markt zu erhöhen. Mehrsprachige Websites demonstrieren Inklusivität, helfen Ihrer Marke, bei Nutzern aus verschiedenen Kulturen und Hintergründen Anklang zu finden, was Vertrauen und Loyalität stärkt.
Veranstaltungs- und Kampagnenseiten
Hashtag-Showcase. Stellen Sie die Quelle auf Ihren Event-Hashtag ein, und der Feed wird zur Wand mit Inhalten der Teilnehmer, die alle 48 Stunden aktualisiert wird. Ideal für Konferenzen, Produktvorstellungen und Community-Initiativen — Besucher sehen echte Interaktion statt Marketing-Text.
Umfassender Integrationsleitfaden: Ihren Instagram-Feed auf einer HTML-Website einrichten
Jetzt, da Sie wissen, welches Layout zu Ihrer Seite passt, bauen wir das Widget jetzt. Der Editor führt Sie Schritt für Schritt durch jeden Tab – Quellen, Layout, Beitragsanzeige, Styling und Einstellungen.
Schritt 1: Wählen Sie eine Vorlage
Öffnen Sie den Instagram Feed-Editor, und Sie sehen einen Vorlagen-Auswahlbildschirm. Vorlagen dienen als Ausgangspunkte — sie konfigurieren Layout, Header-Stil und Beitragsanzeige-Einstellungen, damit Sie nicht von Grund auf neu beginnen müssen.
Wie oben erwähnt, gibt es fünf Hauptoptionen. Wählen Sie die Vorlage, die Ihrem Wunsch am nächsten kommt — danach können Sie jede Einstellung beliebig ändern.
Schritt 2: Ihre Instagram-Quelle hinzufügen
Nach dem Auswählen einer Vorlage gelangen Sie zur Registerkarte Quellen. Hier geben Sie dem Widget an, welche Instagram-Inhalte angezeigt werden sollen.
Sie haben zwei Quelltypen zur Auswahl:
- Konto — Geben Sie einen öffentlichen Instagram-Benutzernamen oder eine URL ein. Der Feed zeigt die Posts dieses Kontos. Das Profil muss öffentlich sein — private, altersbeschränkte oder länderspezifisch eingeschränkte Konten funktionieren nicht.
- Hashtag — gib ein Hashtag ein, um Beiträge mit diesem Tag anzuzeigen. Nützlich für gebrandete Kampagnen oder Sammlungen nutzergenerierter Inhalte.
Unter derselben Registerkarte können Sie Filter festlegen, um bestimmte Beiträge anzuzeigen, deren maximale Anzahl festlegen und sie nach Veröffentlichungsdatum oder Position in der Quellenliste sortieren.
Schritt 3: Wählen Sie Ihr Layout
Wechseln Sie zum Reiter Layout, um festzulegen, wie Beiträge auf der Seite angeordnet werden. Sie sehen zwei Layout-Optionen – Grid und Slider – sowie Einstellungen für Spalten, Zeilen, Kopfzeile und Feed-Titel.
Wenn Sie den Empfehlungen im Layout-Abschnitt oben gefolgt sind, setzen Sie diese hier in die Praxis um. Ein paar praktische Hinweise:
- Spalten und Zeilen lassen sich auf Auto (responsiv, passt sich an die Bildschirmgröße an) oder Manual (Sie legen exakte Werte fest) einstellen. Manual bietet mehr Präzision, aber Auto sorgt für mobile Anpassung ohne zusätzlichen Aufwand.
- Header steuert, ob Profilbild, Name, Bio, Follower-Anzahl und Follow-Button über dem Feed angezeigt werden. Aktivieren Sie es für eigenständige Instagram-Bereiche; deaktivieren Sie es, wenn der Feed in andere Inhalte eingebettet ist.
- Der Abschnitt Slider-Einstellungen (sichtbar, wenn der Slider ausgewählt ist) ermöglicht die Konfiguration von Navigationspfeilen, Paginierung und Autoplay-Geschwindigkeit.
Dieser Schritt dauert am längsten – probieren Sie eine Minute lang verschiedene Spaltenzahlen bei unterschiedlichen Breiten aus. Was bei 1200 px Breite gut aussieht, kann sich bei 768 px eng anfühlen, und der Auto-Modus überbrückt diese Lücke besser, als Sie erwarten würden.
Schritt 4: Beitragsanzeige konfigurieren
Der Post-Tab bestimmt, was Besucher bei jedem Beitrags-Thumbnail sehen und was passiert, wenn sie darauf klicken. Du hast zwei Darstellungsstile zur Auswahl: Classic (mit Datum, Bildunterschrift, Likes usw.) und Tile (Bildanzeige nur mit Hover-Overlay).
Unter Beitrags-Elementen, legen Sie fest, welche Details im Thumbnail-Overlay erscheinen:
- Likes-Zähler — zeigt Interaktionszahlen beim Überfahren mit der Maus
- Kommentare-Anzahl — gleiches Verhalten wie bei Kommentaren
- Text — zeigt die Beschriftungsvorschau im Miniaturbild
Das Gleiche lässt sich mit den Popup-Einstellungen erreichen, um einzelne Elemente (Benutzername, Folgen-Button, Gefällt mir-Anzahl, Kommentare und mehr) anzuzeigen oder auszublenden.
Post-Click-Aktion
Dieses Dropdown bestimmt, was passiert, wenn ein Besucher auf einen Beitrag klickt. „Im Popup öffnen“ ist der Standard – es wird ein Bild oder Video in Vollgröße mit Bildunterschrift, Gefällt mir, Datum und CTA-Schaltflächen angezeigt, ohne die Seite zu verlassen.
Handlungsaufruf
Der Bereich CTA-Schaltflächen ermöglicht es dir, benutzerdefinierte Schaltflächen hinzuzufügen, die zu Produktseiten, Terminbuchungsformularen oder jeder beliebigen URL verlinken — diese erscheinen im Popup neben dem Beitrag.
Schritt 5: Feed-Stil anpassen
Die Stil-Registerkarte ist der Ort, an dem Sie den Feed an die visuelle Identität Ihrer Website anpassen. Anstatt eines einheitlichen Farbschemas bietet das Widget eine Farbanpassung pro Element.
Beginnen Sie mit dem Farbschema-Dropdown — es wendet eine vordefinierte Palette auf Hover-Overlay, Pop-up und Navigations-Elemente an. Falls die Standard-Schemata nicht zu Ihrer Marke passen, erweitern Sie jeden Abschnitt, um Farben individuell festzulegen:
- Kopfzeile — Hintergrund, Text, Folge-Schaltfläche, Text der Folge-Schaltfläche
- Beitrag — Overlay-Hintergrund und Overlay-Textfarben
- Pfeile / Mehr laden — Navigationsschaltflächen und Textfarben
- Popup — mehrere individuell anpassbare Elemente
Alle Farbfelder unterstützen HEX-Eingaben, sodass Sie genaue Markenwerte einfügen können. Wenn Sie Styling benötigen, das über das hinausgeht, was die eingebauten Steuerelemente bieten — wie benutzerdefinierte Schriftgrößen, abgerundete Ecken bei Beitrags-Thumbnails oder Spaltenabstände — der Editor für benutzerdefiniertes CSS am unteren Rand dieses Tabs erledigt das.
Schritt 6: Einstellungen anpassen
Der Einstellungen-Tab umfasst zwei Bereiche: Sprache und benutzerdefiniertes JavaScript.
Stellen Sie die Sprache so ein, dass sie dem Publikum Ihrer Website entspricht — das Widget unterstützt 33+ Sprachen, und dies steuert den Text für UI-Elemente wie die Schaltfläche „Folgen“, die Schaltfläche „Mehr laden“ und Popup-Beschriftungen.
Das Custom JS-Feld dient fortgeschrittenen Integrationen — Ereignis-Tracking, bedingtes Verhalten oder das Verbinden des Feeds mit anderen Skripten auf Ihrer Seite. Für die meisten Setups müssen Sie das nicht anfassen.
Schritt 7: Fügen Sie das Widget zu Ihrer HTML-Website hinzu
Der einzige verbleibende Schritt besteht darin, das kopierte Snippet in Ihren Code-Editor einzufügen (VS Code, Sublime Text, Notepad++, oder Ihren Hosting-Dateimanager):
- Öffnen Sie die HTML-Datei der Seite, auf der der Feed erscheinen soll.
- Finde den Bereich innerhalb des <body>-Abschnitts, in dem der Feed gerendert werden soll.
- Fügen Sie hier den vollständigen Installationscode ein. Speichern Sie die Datei und laden Sie sie auf Ihren Server hoch.
Für statische Widgets (ein Raster oder Schieberegler, der in den Seiteninhalt eingebettet ist) fügen Sie den Code an der genauen Position ein, an der der Feed erscheinen soll.
Für schwebende Widgets, fügen Sie den Code direkt vor dem schließenden </body>-Tag ein – das Widget schwebt unabhängig von der Bildlaufposition.
Schneller Fehlerbehebungs-Check
- Feed wird nicht angezeigt: Vergewissern Sie sich, dass der Code innerhalb der <body>-Tags platziert ist, nicht innerhalb der <head>, <style> oder <script>-Tags.
- „Keine Beiträge gefunden“-Fehler: Das Instagram-Konto ist möglicherweise privat oder der Benutzername falsch geschrieben. Prüfen Sie die Quelle im Widget-Editor.
- Widget lädt lokal, aber nicht auf dem Live-Server: Einige Widgets benötigen eine aktive Internetverbindung. Tests über das Datei-Protokoll (file://) funktionieren möglicherweise nicht — laden Sie es auf Ihren Host hoch oder verwenden Sie einen lokalen Server.
- Neue Beiträge werden nicht angezeigt: Der Feed speichert Inhalte im Cache und aktualisiert sich automatisch alle 48 Stunden. Falls nach 48 Stunden noch keine Beiträge erscheinen, kontaktieren Sie den Elfsight-Support.
Weitere Möglichkeiten, Instagram-Inhalte in HTML einzubetten
Der Widget-Ansatz deckt den größten Bedarf ab, ist aber nicht die einzige Option. Hier sind zwei Alternativen, die je nach Ihren Anforderungen sinnvoll sind.
Option 1: Instagram-native Einbettung (einzelner Beitrag)
Die integrierte Einbettungsfunktion von Instagram ermöglicht es Ihnen, einen HTML-Schnipsel für jeden öffentlichen Beitrag oder Reel zu kopieren und direkt in Ihre Website einzufügen. Keine Drittanbieter-Tools, kein Konto nötig — nur drei Klicks bei Instagram und einfügen in Ihre HTML-Datei.
- Öffnen Sie Instagram in Ihrem Desktop-Browser und navigieren Sie zu dem öffentlichen Beitrag, den Sie einbetten möchten.
- Klicke auf die drei Punkte (⋯) oben rechts im Beitrag und wähle Einbetten.
- Im Pop-up klicken Sie auf Embed-Code kopieren.
- Öffnen Sie Ihre HTML-Datei und fügen Sie den Code dort ein, wo der Beitrag erscheinen soll, innerhalb des <body> Abschnitts.
- Speichern Sie die Datei und laden Sie sie auf Ihren Server hoch.
Option 2: Instagram oEmbed-API
Für Entwickler, die eine programmatische Steuerung benötigen, gibt der oEmbed-API-Endpunkt von Instagram das Embed-HTML für jede öffentliche Post-URL zurück. Sie senden eine GET-Anfrage mit der Post-URL und einem Zugriffstoken, und die API antwortet mit einem JSON-Objekt, das das einzubettende HTML in der html-Eigenschaft enthält.
- Richten Sie ein Meta-Entwicklerkonto ein und erstellen Sie eine Meta-App, um ein Zugriffstoken zu erhalten.
- Senden Sie eine GET-Anfrage an
https://graph.facebook.com/v19.0/instagram_oembed?url={POST_URL}&access_token={TOKEN} - Analysieren Sie die HTML-Eigenschaft aus der JSON-Antwort und fügen Sie sie in Ihre Seite ein.
- Antwort zwischenspeichern — Die API hat eine Ratenbegrenzung von 200 Aufrufen pro Stunde pro Benutzer, daher sollten Sie sie nicht bei jeder Seitenansicht aufrufen.
Dieser Ansatz macht Sinn, wenn Sie einen benutzerdefinierten Feed benötigen, der Inhalte dynamisch über mehrere Seiten hinweg zieht oder Instagram-Inhalte in eine bestehende Anwendung integriert. Wenn Sie diesen Weg erkunden, deckt unser Instagram Graph API developer guide die vollständige Einrichtung ab, einschließlich Token-Verwaltung und Ratenbegrenzungen.
Jenseits von Instagram-Inhalten schauen?
Social Feed widget pulls everything into one unified content hub — keeping your pages cleaner while showcasing cross-platform social proof in a single place.”>Wenn Ihre Marke auf mehreren sozialen Plattformen aktiv ist, kann ein Instagram-Feed allein schnell einschränkend wirken. Statt separate Instagram-, TikTok- und Facebook-Einbindungen zusammenzufügen, zieht ein Social-Feed-Widget alles in einen einheitlichen Content-Hub — Ihre Seiten bleiben übersichtlicher und zeigen plattformübergreifenden Social Proof an einem Ort.
Optimierungstipps für Ihr Instagram-Widget
Sie haben den Feed installiert — jetzt machen wir ihn leistungsfähiger. Diese Tipps gehen über die Grundlagen hinaus und zeigen, wie Sie mehr Wert aus dem Content ziehen, den Sie bereits auf Instagram erstellen.
- Bestimmen Sie, was Besucher sehen. Der Reiter Quellen enthält Anzeigen/Verbergen-Filter – Sie können den Feed auf Beiträge mit einem bestimmten Hashtag oder Keyword einschränken oder Beiträge ausschließen, die nicht zum Kontext der Seite passen。
- Richten Sie einen Call-to-Action ein. Jedes Popup-Fenster kann benutzerdefinierte Call-to-Action-Schaltflächen enthalten, die auf Produktseiten, Buchungsformulare oder Landing-Pages verlinken. So wird aus passivem Browsen eine aktive Navigation und ein direkter Weg zur Conversion.
- Angezeigte Beiträge begrenzen. Mehr ist nicht immer besser. Ein kompaktes Grid wirkt zielgerichteter als ein ausgedehntes Archiv – begrenzen Sie den Feed beispielsweise auf Ihre 6 oder 9 neuesten Beiträge.
- Testen Sie die mobile Ansicht. Wenn Sie manuelle Spalteneinstellungen verwenden, konfigurieren Sie den mobilen Wert separat — was auf dem Desktop als 4 Spalten funktioniert, muss auf Mobilgeräten oft auf 2 reduziert werden.
- Behalte dein Instagram-Profil öffentlich und verifiziert. Das Widget kann nur Inhalte von öffentlichen Profilen abrufen. Wenn dein Konto auf privat gestellt ist, erscheinen neue Beiträge nicht im Feed, bis es wieder öffentlich ist und der Cache aktualisiert wird.
Häufig gestellte Fragen
Wie binde ich einen Instagram-Feed in eine benutzerdefinierte HTML-Website ein?
<body>-Abschnitt deiner HTML-Datei ein, an der Stelle, an der der Feed erscheinen soll. Speichere die Datei und lade sie auf deinen Server hoch. Das Widget wird automatisch von Elfsight’s Plattform geladen und zeigt deine Instagram-Beiträge, Fotos und Reels im von dir konfigurierten Layout an. Keine serverseitige Codierung oder API-Schlüssel erforderlich.Kann ich meinen Instagram-Feed kostenlos in HTML einbetten?
Aktualisiert sich der eingebettete Instagram-Feed automatisch auf meiner HTML-Seite?
Funktioniert eine Instagram-HTML-Einbettung auf Mobilgeräten?
Kann ich Instagram Reels und Videos in einer HTML-Einbettung anzeigen?
Fazit
Sie haben jetzt einen funktionsfähigen Instagram-Feed auf Ihrer HTML-Website – passend zu Ihrem Layout konfiguriert, im Markenstil gestaltet und so eingestellt, dass er sich alle 48 Stunden automatisch aktualisiert, ganz ohne manuelles Eingreifen. Ob Sie den No-Code-Widget-Ansatz gewählt haben oder eine Alternative nutzen, der Feed ergänzt visuelle Inhalte und Social Proof, den statische Bilder einfach nicht erreichen können.
Wenn Sie noch nicht begonnen haben, gehen Sie zum Elfsight Instagram-Feed-Widget, wählen Sie eine Vorlage, verbinden Sie Ihr Konto und fügen Sie den Code in Ihre HTML-Datei ein. Der kostenlose Plan liefert Ihnen in wenigen Minuten einen funktionsfähigen Feed — passen Sie von dort aus Layout, Farben und Filter an, damit er zu Ihnen passt.
