• Blog
  • Tutorials
  • Instagram-Feed auf jeder Website einbinden, ganz ohne Programmierung!

Instagram-Feed auf jeder Website einbinden, ganz ohne Programmierung!

Share
Lernen Sie, wie Sie einen Instagram-Feed mithilfe eines Elfsight-Widgets auf Ihrer Website hinzufügen können. Es ist kostenlos und erfordert keine Programmierkenntnisse.

1. Konfigurieren Sie das Instagram Feed Widget

Sie können Instagram Feed ohne Programmierung und in kürzester Zeit mit Hilfe eines Instagram Feed Widget Generators einbinden. Dieser ermöglicht es Ihnen, eine IG-Galerie in einem visuellen Editor zu erstellen, indem Sie vorgefertigte Elemente kombinieren.

Probieren Sie es selbst aus! Wählen Sie eine Vorlage, geben Sie eine Quelle ein und… Ihr Widget ist fertig!

2. Holen Sie sich den Instagram Feed Einbettungscode

Nachdem Sie das Widget erstellt und die Änderungen gespeichert haben, erhalten Sie einen zweizeiligen Installationscode. Dieser ist notwendig, um den IG Widget Code auf der benötigten Seite oder Website-Vorlage einzubetten, um den Instagram Feed dort anzuzeigen.

So sieht der Code des Widgets aus:

Elfsight Instagram Feed kostenlos einbinden ohne Programmierung

Kopieren Sie den Code, den Sie nach Erstellung eines Widgets erhalten haben, und speichern Sie ihn. Sie werden den Code während der Installation benötigen. Nun gehen wir zum nächsten Schritt über.

3. Binden Sie den Instagram Feed Code auf Ihren Website-Seiten ein

Jetzt fehlt nur noch eine Minute! Jetzt sollten Sie den Installationscode auf die benötigte Seite oder in eine Website-Vorlage (Seitenleiste, Footer, usw.) einfügen.

  1. Melden Sie sich im Admin-Panel der Website an;
  2. Öffnen Sie die benötigte Seite oder Vorlage;
  3. Fügen Sie einen Instagram Feed Widget Installationscode hinzu;
  4. Speichern Sie die Änderungen und überprüfen Sie Ihre Website!

Fertig! Jetzt können Sie alle Widget-Einstellungen ändern: Layout, Größe, Farbe, etc. direkt in Elfsight Apps ohne den Code bearbeiten zu müssen. Wenn Sie Schwierigkeiten bei der Einbettung haben, sehen Sie sich unsere detaillierten Anleitungen für jedes CMS an, oder wenden Sie sich an den Support, der Ihnen gerne weiterhilft.

Neben dem einfachen Einbettungsprozess würden wir die Verwendung eines Widgets aufgrund der folgenden enthaltenen Funktionen empfehlen:

  • Fertige Vorlagen. Verschiedene vorgefertigte Layouts und Beiträge sehen äußerst professionell aus.
  • Filtern aller IG-Beiträge. Nach Hashtag, Quelle und Anzahl der Beiträge.
  • Anpassung. Sie haben die vollständige Freiheit, jedes Detail in einem visuellen Editor zu personalisieren.
  • Null Programmierung. Sie können das IG Widget selbst wie ein Profi gestalten, ohne Webdesign-Kenntnisse.
  • Kostenlose Version ohne Einschränkungen in den Funktionen. Die tolle Nachricht ist, dass Sie nicht bezahlen müssen, um alle Funktionen und den Einbettungsprozess zu testen.
  • Einbetten dauert Sekunden. Fügen Sie den IG Feed hinzu, indem Sie zwei Zeilen des Installationscodes an den benötigten Ort im Backend der Website einfügen.
Elfsight Instagram Feed kostenlos einbinden ohne Programmierung

Sind Sie eine Agentur oder ein Freelancer, der mit Kunden arbeitet?

Sie können Mitglied unseres Affiliate-Programms werden, wenn Sie mehrere Unternehmen dabei unterstützen, ihre Websites zu verbessern. Binden Sie den Elfsight Instagram Feed auf den Websites Ihrer Kunden ein. In diesem Zustand profitieren alle, auch Sie, so dass es sich um eine wirklich Win-Win-Situation handelt.

Fügen Sie Instagram Feeds zu den Websites Ihrer Kunden hinzu und profitieren Sie mit dem Elfsight Partner Programm!

Elfsight Instagram Feed für Freelancer und Agenturen

Merkmale des Elfsight Instagram Feed Widgets

Der Prozess der Einbettung von Instagram Feed in HTML mittels des Elfsight IG Widgets ist einfach, schnell und erfordert keine Programmierkenntnisse. Darüber hinaus haben Sie die volle Kontrolle über das Aussehen und das Gefühl des Feed-Bereichs, so dass Ihre IG-Galerie auf einer Website perfekt aussieht.

Quellen
  • Fügen Sie den Namen eines öffentlichen Accounts oder Hashtags ein
  • Zeigen Sie Ihren Feed von einem Geschäftsaccount an
  • Fügen Sie den Feed von Ihrem persönlichen Profil ein
Filter
  • Beiträge nach Hashtags ausschließen
  • Beiträge von bestimmten Autoren verbergen
  • Beiträge von spezifischen URLs nicht anzeigen
  • Anzeige einer bestimmten Anzahl von Beiträgen
Layout
  • Gitter und Slider – die intuitivsten und vertrautesten Layouts
  • Kachel- und Klassiktypen von Post-Layouts
  • Alle Layouts können vollständig angepasst werden
  • Es ist möglich, die Anzahl der Spalten und Reihen zu ändern, die Abstände zwischen den Beiträgen und ihre Breite anzupassen
  • Option zum Hinzufügen oder Löschen eines Follow-Buttons
  • Umschaltbare Post-Elemente: Likes Count, Comments Count, Text, Date, Location, etc.
  • Sie können die Slider-Steuerungen personalisieren
Farben
  • 12 vordefinierte Farbschemata
  • Anpassbare Postfarben: Overlay-Hintergrund und Text
  • Personalisierbare Farben der Schieberelemente: Pfeile und Hintergrund der Pfeile
  • Option zur Anpassung der Farben aller Popup-Elemente: Overlay, Hintergrund, Text, Links, Follow und CTA-Buttons
Andere Einstellungen
  • Tonnen von verschiedenen Sprachen, damit Ihr Feed nativer aussieht
  • Personalisierbarer und umschaltbarer Widget-Titel
  • Feld für ein individuelles CSS, um das reibungsloseste Widget für eine Website zu erstellen


Elfsight Instagram Feed CTA

Lassen Sie sich von echten Anwendungsfällen inspirieren

Erhalten Sie Referenzen von unseren fantastischen Kunden. Erforschen Sie diese Anwendungsfälle und lassen Sie sich von Musik-, Bildungs- und Beauty-Websites inspirieren. Entnehmen Sie Ideen und erstellen Sie Ihre eigene Galerie, um die Benutzerbindung zu erhöhen, Social Proof zu schaffen, das Aussehen und das Gefühl Ihrer Website zu verbessern und vor allem Ihre Geschäftsziele zu erreichen. Los geht’s!

Karussellvorlage von Vivienne Sabo

Vivienne Sabo bevorzugt die Verwendung einer Karussellvorlage, die ihnen hilft, Fotos ohne zusätzliche Details zu arrangieren. Die Beiträge sind in einer Reihe angeordnet und die Fotos können gescrollt werden. Ein Beitrag in einem Pop-up hat alle Elemente wie in der App, aber Sie können sie jederzeit ein- oder ausschalten.

Vivienne Sabo Elfsight Instagram Feed

Collage-Vorlage von The Bacon Brothers

The Bacon Brothers organisieren Fotos und Videos genau mit einer Collage-Vorlage. Jetzt sehen die Beiträge so aus, wie sie in der App aussehen. Sie ziehen die Aufmerksamkeit mit dieser Wandvorlage auf sich und bleiben außergewöhnlich. Minimalistisch und ansprechend hilft das Instagram Feed Widget ihnen, den Inhalt der Website zu verschönern.

The Bacon Brothers Elfsight Instagram Feed

IG-Galerie der Abu Dhabi Universität

Wir freuen uns, Bildungs-, Universitäts- und Schulwebseiten unter unseren Kunden begrüßen zu dürfen. Instagram-Galerien, die auf solchen Seiten hinzugefügt wurden, können Neulingen helfen, sich mit der Bildungseinrichtung vertraut zu machen und mehr über Perspektiven dort zu erfahren. Die Abu Dhabi Universität hat ihre eigenen Rastereinstellungen festgelegt, den Abstand zwischen den Beiträgen angepasst – und die Rastervorlage sieht jetzt umwerfend aus! Dies ist eine großartige Möglichkeit, neue Follower für Ihr Profil zu gewinnen und Ihrer Website ein auffälliges Detail hinzuzufügen.

Abu Dhabi Universität Elfsight Instagram Feed

Instagram Fotos von Fatburger

Saftige, köstliche Burger sehen noch attraktiver aus, wenn sie in Instagram Feed Fotos auftauchen. Verweigern Sie sich nicht das Vergnügen, in nur wenigen Sekunden ansprechende Fotos Ihres Essens auf der Website hinzuzufügen!

Fatburger Elfsight Instagram Feed

Der detaillierteste Leitfaden zur Anpassung und Einbettung des Instagram Feeds

Schritt 1. Erstellen Sie das Instagram Feed Widget

Einer der wichtigsten Vorteile des Elfsight IG Widgets ist die Anzahl der professionellen, sofort einsatzbereiten Vorlagen. Sie können das Instagram Feed auf einer Seite in Form eines Sliders, eines Rasters und eines platzsparenden kleinen Widgets hinzufügen. Darüber hinaus können Sie ein fertiges dunkles Thema für das Widget wählen und damit arbeiten.

Fügen Sie dem Widget Quellen hinzu

Das Elfsight IG Feed Widget ermöglicht es Ihnen, verschiedene Arten von Instagram-Quellen zur Website hinzuzufügen: Handles und Hashtags. Außerdem können Sie zwei verschiedene Quellen zum Instagram Feed Widget hinzufügen. Das bedeutet, Sie können Beiträge von Ihrem Markenprofil anzeigen, sowie Beiträge, in denen Ihre Kunden das Unternehmen taggen.

  • Binden Sie das Instagram-Profil ein

    Um Beiträge von Ihrem Profil hinzuzufügen, müssen Sie einfach Ihr Handle in das Quellenfeld einfügen. Sie müssen sich nicht einmal in Ihrem Konto anmelden. Das ist großartig für diejenigen, die öffentliche Inhalte aus der App auf ihrer Website anzeigen möchten, ohne Zugang zum Konto zu haben.

  • Fügen Sie einen Instagram Hashtag hinzu

    Haben Sie eine Instagram-Kampagne, die Sie mit der Welt teilen möchten? Oder möchten Sie stolz positive Testimonials von Ihren dankbaren Kunden präsentieren? Zusätzlich zu Ihrem eigenen Profil können Sie Fotos und Videos nach Hashtag hinzufügen, und das wird Ihnen sicherlich helfen, das Vertrauen in Ihre Marke zu steigern.

Filtern Sie Instagram-Posts

Es gibt mehrere Möglichkeiten, Posts in Ihrem Widget zu filtern. Zum Beispiel, wenn Sie Inhalte nach Hashtag hinzufügen, können Sie Beiträge von bestimmten Autoren anzeigen, Beiträge nach bestimmtem Hashtag einbeziehen, oder Sie können einfach eine URL der benötigten Publikation hinzufügen. Darüber hinaus können Sie Beiträge von bestimmten Autoren, Hashtags und URLs ausschließen. Schließlich gibt es die Möglichkeit, eine bestimmte Anzahl von Beiträgen anzuzeigen.

Schritt 2. Generieren Sie den Code zum Einbetten

Nachdem Sie Ihren perfekten einzigartigen Instagram Feed erstellt haben, werden Sie bestrebt sein, ihn auf einer Website einzubetten. Es wird genauso einfach sein, wie einen Feed in einem visuellen Editor zu erstellen. In diesem Stadium müssen Sie Ihren persönlichen Installationscode in einem Elfsight Code Generator abrufen, und hier ist, wie Sie es machen werden:

  1. Klicken Sie auf den Button ‘Zur Website hinzufügen’, Sie gelangen zum Elfsight Admin-Panel.
  2. Registrieren Sie sich dort oder melden Sie sich an. Dort sehen Sie den Feed, den Sie gerade erstellt haben.
  3. Wählen Sie Ihren Plan aus. Die gute Nachricht ist, dass es eine kostenlose Version gibt, die nicht in Funktionen eingeschränkt ist!
  4. Kopieren Sie den Einbettungscode für den Instagram Feed aus dem Code-Generator.
Erzeugen Sie den Installationscode von Elfsight Instagram Feed

Das war’s! Und die Installation wird noch einfacher sein. Lassen Sie uns zum letzten Schritt der Einbettung von Instagram-Posts auf einer Website übergehen.

Schritt 3. Binden Sie den Instagram Feed in den Code der Plattform-Website ein

Normalerweise müssen Sie, um ein Instagram Feed Widget auf einer Website einzubetten, Ihren IG Widget Installationscode in das HTML-Feld einfügen. Gehen Sie zum Admin-Panel Ihrer Website und suchen Sie eine Möglichkeit, den HTML-Code der benötigten Seite zu bearbeiten.

In verschiedenen Website-Buildern können Sie dies auf unterschiedliche Weise tun. In einigen Fällen müssen Sie dies in einer Website-Vorlage tun, in anderen müssen Sie ein HTML-Feld in Ihrem visuellen Editor erstellen. Manchmal gibt es die Möglichkeit, den HTML-Code der gesamten Webseite mit Hilfe einer entsprechenden Funktion zu sehen.

Elfsight Instagram Feed

Unten finden Sie Anleitungen zum Einbetten des Installationscodes von Instagram Feed in HTML der beliebtesten Plattformen. Wählen Sie Ihre aus und starten Sie sofort den Einbettungsprozess! Wir empfehlen Ihnen dringend, mit einem Leitfaden für HTML zu beginnen, da er im Grunde beschreibt, was Sie auf jeder anderen Plattform tun müssen.

Wie man Instagram Feed in den HTML-Code einer Website einbetten kann

In allen Fällen müssen Sie die beiden Zeilen des Installationscodes zu Ihrem Website-HTML hinzufügen. Im Allgemeinen wird der Einbettungsprozess nur drei Aktionen erfordern:

  1. Öffnen Sie die HTML-Datei der benötigten Seite in Ihrem Editor.
  2. Fügen Sie den Einbettungscode Ihres Instagram Feeds in den Bereich der Seite ein, in dem er erscheinen soll.
  3. Speichern Sie die Änderungen.

Sie müssen lediglich entscheiden, in welchem Abschnitt Sie das Widget anzeigen möchten. Sie können es als Fotogalerie auf der Startseite hinzufügen oder einen einzelnen Beitrag in die Seitenleiste einfügen. Es gibt viele andere Varianten, setzen Sie sich keine Grenzen!

Nachdem Sie den Installations-HTML-Code dort eingefügt haben, wird der gesamte Instagram-Feed, den Sie im Elfsight-Editor erstellt haben, auf Ihrer Website erscheinen. Darüber hinaus werden Instagram-Beiträge im Widget automatisch aktualisiert, Sie müssen nicht das Elfsight-Admin-Panel besuchen und sie manuell aktualisieren.

Wie man Instagram Feed in WordPress einbetten kann

    Instagram zu einer WordPress-Website hinzuzufügen, ist einfach. Aber es gibt einige Benutzer, die Elementor dem Standard-WordPress-Editor vorziehen. Wir haben beide Varianten der Installation für Ihre Bequemlichkeit beschrieben.

    Variante 1. Mit WordPress-Editor

    Nachdem Sie Ihren Feed im Elfsight-Admin-Panel erstellt und angepasst haben, ist es an der Zeit, ihn zu Ihrer WordPress-Website hinzuzufügen. Und es gibt nichts Einfacheres als das! Normalerweise sollten Sie einen HTML-Code-Bereich erstellen und den Installationscode dort hinzufügen. So geht’s:

    1. Loggen Sie sich in WordPress ein.
    2. Gehen Sie zu ‘Seiten’ und wählen Sie die gewünschte Seite aus.
    3. Fügen Sie einen benutzerdefinierten HTML-Block zum benötigten Abschnitt der Seite hinzu.
    4. Fügen Sie den IG-Code, den Sie im Code-Generator erhalten haben, in diesen Block ein.
    5. Klicken Sie auf ‘Update’, um die Änderungen zu speichern.
    6. Überprüfen Sie den Instagram-Feed auf Ihrer WordPress-Website. Es ist das Widget, das Sie im Elfsight-Admin-Panel erstellt haben.

    Auf diese Weise können Sie erfolgreich einen IG-Feed auf einer Website einbetten. Sie können endlos Änderungen in Ihrem Elfsight-Panel vornehmen, und sie werden automatisch im veröffentlichten Widget angezeigt. Es besteht keine Notwendigkeit, es auf Ihrer WordPress-Site zu aktualisieren.

    Instagram Feed auf WordPress erstellen und einbetten →

    Variante 2. Mit Elementor

    Viele WordPress-Benutzer ziehen es vor, mit einem visuellen Editor zu arbeiten, statt mit dem Standard-Editor, da es nicht nötig ist, sich mit HTML zu beschäftigen. Elementor erweitert WordPress und erleichtert es Website-Besitzern, Anpassungen an ihrer Seite vorzunehmen.

  1. Wählen Sie die benötigte Seite im WordPress-Admin-Panel aus.
  2. Klicken Sie entweder über die Liste der Seiten oder im WordPress-Seiteneditor auf ‘Mit Elementor bearbeiten’.
  3. Ziehen Sie das ‘HTML’-Element in den benötigten Seitenbereich.
  4. Fügen Sie den Installationscode Ihrer IG-Galerie in das Feld ‘HTML-Code’ im linken Menü ein.
  5. Drücken Sie ‘Update’, um die Änderungen in Elementor und WordPress zu speichern.

Wenn Sie dieser Anleitung folgen, können Sie den HTML-Code von Instagram Feed auf allen WordPress-Seiten, die mit Elementor erstellt wurden, einbetten. Wiederholen Sie einfach den Vorgang für alle benötigten Seiten.

Instagram Feed auf Elementor erstellen und einbetten →

Wie man einen Instagram Feed in Wix erstellt

    In Wix sollten Sie einen Instagram-Feed über Ihr Admin-Panel zur Website hinzufügen. Dort müssen Sie eine Option finden, um benutzerdefinierten HTML-Code zu Wix hinzuzufügen. Machen Sie sich keine Sorgen, es ist einfach!

    1. Melden Sie sich zunächst bei Ihrem Wix Admin Panel an und wählen Sie eine Website für das Widget.
    2. Öffnen Sie den Abschnitt ‘Einstellungen’ im Dashboard-Menü.
    3. Wählen Sie die Option ‘Benutzerdefinierter Code’.
    4. Klicken Sie auf den Button ‘Benutzerdefinierten Code hinzufügen’ und fügen Sie Ihren Code in das HTML-Feld ein.
    5. Nachdem Sie den IG-Installationscode eingefügt haben, klicken Sie auf ‘Anwenden’, um die Änderungen in Wix zu speichern.

    Nachdem Sie den Code eines Instagram-Feeds auf einer Website eingebettet haben, müssen Sie dies nicht erneut tun, wenn Sie Änderungen vornehmen müssen. Gehen Sie einfach zum Elfsight-Dashboard, nehmen Sie Änderungen vor und sehen Sie sie sofort live auf einer Website.


    Instagram Feed auf Wix erstellen und einbetten →

Wie man Instagram Feed zu Weebly hinzufügt

    Weebly ist eine großartige Plattform für Geschäfts- und persönliche Landing Pages. Das Einbetten von Instagram Feed darauf ist eine großartige Möglichkeit, die Leistung der Website zu verbessern und ihr Aussehen aufzuwerten.

    1. Melden Sie sich bei Ihrem Weebly Admin Panel an und klicken Sie auf ‘Seite bearbeiten’.
    2. Ziehen Sie das Element ‘Einbettungscode’ in den benötigten Seitenbereich.
    3. Klicken Sie auf den Block auf der Weebly-Seite.
    4. Drücken Sie ‘Benutzerdefiniertes HTML bearbeiten’.
    5. Fügen Sie den Installationscode des IG-Widgets in diesen Weebly-Block ein.
    6. Veröffentlichen Sie die Änderungen.
    7. Überprüfen Sie Ihre Weebly-Site. Dort sehen Sie den Feed, den Sie auf Elfsight erstellt haben.

    Nach diesen wenigen Schritten wird Ihr Instagram Feed-Bereich auf einer Weebly-Site eingebettet sein. Sie können jederzeit zum Elfsight-Admin-Panel zurückkehren, alle gewünschten Änderungen vornehmen und sie gehen live, sobald Sie auf ‘Veröffentlichen’ klicken. Es besteht keine Notwendigkeit, zu Weebly zurückzukehren und manuell etwas im Instagram-Bereich zu tun.

    Instagram Feed auf Weebly erstellen und einbetten →

Wie man das Instagram Feed-Widget auf Squarespace einbettet

    Das Einbetten von Instagram Feed auf Squarespace ist intuitiv und einfach. Es ist eine großartige Plattform, die es Ihnen ermöglicht, Websites ohne Programmierkenntnisse zu erstellen, indem Sie einfach Inhaltsblöcke darin platzieren. Alles, was Squarespace von Ihnen verlangt, ist, einen HTML-Code-Block in dem Seitenbereich zu erstellen, in dem Sie den Instagram Feed benötigen.

    1. Melden Sie sich im Squarespace-Admin-Panel an und wählen Sie eine Seite für das Widget.
    2. Klicken Sie neben dem Seitenbereich, in dem Sie das Widget anzeigen möchten, auf ‘Bearbeiten’.
    3. Fügen Sie einen ‘Codeblock’ hinzu, dadurch wird ein HTML-Feld auf einer Squarespace-Seite initiiert.
    4. Fügen Sie dort Ihren Instagram Feed-Einbettungscode ein.
    5. Speichern Sie die Änderungen.
    6. Überprüfen Sie Ihre Squarespace-Website. Sie sehen das Widget von Elfsight und es wird automatisch Inhalte abrufen. Es ist nicht mehr notwendig, zum Squarespace-Admin-Panel zurückzukehren.

    Das ist es! So können Sie den IG-Feed erfolgreich auf einer Website einbetten.

    Instagram Feed auf Squarespace erstellen und einbetten →

Wie man Instagram Feed auf Jimdo einbettet

    Wenn Sie Ihren Instagram-Code zu Jimdo hinzufügen, wie auf jeder anderen, müssen Sie Folgendes tun:

    1. Melden Sie sich beim Jimdo Admin Panel an.
    2. Beachten Sie, dass Sie HTML-Code zu jedem Textfeld hinzufügen können.
    3. Klicken Sie auf die Schaltfläche (HTML bearbeiten) im Textabschnitt, in dem Sie das Widget präsentieren möchten.
    4. Fügen Sie dort Ihren Installationscode ein.
    5. Speichern Sie die Änderungen!
    6. Überprüfen Sie die IG-Galerie auf einer Jimdo-Seite.

    Es wird Ihren Instagram Feed auf einer Website anzeigen. Jedes Mal, wenn Sie etwas in seinen Einstellungen oder Design ändern möchten, können Sie dies tun, und es ist nicht notwendig, IG-Posts erneut einzubetten.

    Instagram Feed auf Jimdo erstellen und einbetten →

Instagram Feed auf Shopify einbetten

    In den meisten Shopify-Vorlagen ist es möglich, benutzerdefinierten HTML-Code auf der Startseite zu platzieren. So können Sie das tun:

    1. Melden Sie sich im Shopify Admin Panel an.
    2. Gehen Sie zum Abschnitt ‘Online Store’.
    3. Drücken Sie ‘Anpassen’.
    4. Klicken Sie im linken Menü auf ‘Abschnitt hinzufügen’.
    5. Klicken Sie in ‘Benutzerdefinierter Inhalt’ auf ‘Hinzufügen’.
    6. Entfernen Sie die vorinstallierten Shopify-Abschnitte.
    7. Klicken Sie auf ‘Inhalt hinzufügen’ und wählen Sie ‘Benutzerdefiniertes HTML’.
    8. Fügen Sie den Installationscode der IG-Galerie in das Feld ‘HTML’ ein.
    9. Speichern Sie die Änderungen.

    Bingo! Wiederholen Sie den Vorgang für alle Shopify-Seiten, auf denen der Feed angezeigt werden soll, und Sie werden fertig sein.

    Sie können auch Instagram Feed zu allen Seiten über HTML des Shopify Website-Backends hinzufügen. Hier ist der einfachste Weg, dies zu erreichen. Haben Sie keine Angst, wenn Sie einige Stücke von HTML-Code sehen, Sie werden nichts kaputt machen. 🙂

    1. Gehen Sie zum Shopify Admin-Panel.
    2. Gehen Sie zum Abschnitt ‘Online Store’ und wählen Sie ‘Aktionen’.
    3. Wählen Sie ‘Code bearbeiten’ im Shopify-Dropdown-Menü.
    4. Gehen Sie zur Datei ‘theme.liquid’.
    5. Fügen Sie den Installationscode von Instagram Feed nach dem Shopify ‘Body’-Tag ein.
    6. Speichern Sie die Änderungen in einer HTML-Vorlage.

    Das war’s! Ihr Feed wird auf allen Shopify-Seiten nach diesen wenigen einfachen Schritten laufen und das Einbetten eines Instagram-Feeds auf einer Website sollte ein Kinderspiel sein. Es besteht keine Notwendigkeit, zum Shopify Admin Panel zurückzukehren. Alle Änderungen in Ihrem IG Feed können im Elfsight-Admin-Panel vorgenommen werden.

    Instagram Feed auf Shopify erstellen und einbetten →

Welche alternativen Möglichkeiten gibt es, den Instagram Feed auf einer Website zu nutzen und einzubetten?

    Es gibt verschiedene Möglichkeiten, Instagram-Inhalte auf einer Website hinzuzufügen: über die offizielle Instagram API und mit Hilfe eines Widgets. Unten sind die Hauptvorteile beider Methoden aufgeführt.

    Elfsight Instagram Feed Widget

    Elfsight bietet Ihnen die Möglichkeit, Instagram-Posts mit Hilfe des Instagram Feed Widgets hinzuzufügen. Es ist kostenlos, erfordert keine Programmierung und verlangsamt Ihre Website nicht. Sie fügen einfach alle Inhalte von einem IG-Profil innerhalb von Sekunden mit nur ein paar Klicks hinzu.

    Verwenden der offiziellen IG API für benutzerdefinierte Skripte

    Es gibt auch die Möglichkeit, Instagram-Posts mit Hilfe der Instagram API zum HTML-Code einer Website hinzuzufügen. Dafür benötigen Sie umfangreiche Programmierkenntnisse. Außerdem erlaubt es Ihnen nicht, den Feed so zu gestalten, wie Sie möchten. Sie laden einfach Fotos und Videos von einem Profil oder einem Hashtag auf die Seite hoch, so wie sie sind, und haben keine Möglichkeit, sie in irgendeiner Weise zu moderieren.

    Holen Sie das Maximum aus Ihrem Instagram Feed: Fügen Sie ihn zu E-Mails, Facebook-Seite, usw. hinzu.

    Sie werden bald in der Lage sein, den Instagram Feed nicht nur auf einer Website, sondern auch in Newslettern und auf Facebook-Seiten hinzuzufügen. Außerdem haben Sie die Möglichkeit, Menschen über einen Link zu einem IG Feed auf einer separaten Seite zu leiten. Es wird auch die Möglichkeit geben, IG-Posts in Notion einzubetten, da sie auch zur Erstellung von Webseiten verwendet werden können. Bleiben Sie dran, und Sie werden als Erster von der bevorstehenden Möglichkeit erfahren, einen plattformübergreifenden Instagram Feed für alle Ihre Bedürfnisse zu nutzen.

Erweiterte Anpassung des Widgets

Neben all den erstaunlichen Vorteilen, die oben beschrieben wurden, erhalten Sie durch die Verwendung des Elfsight Widgets viele fantastische Möglichkeiten. Benutzergenerierte Inhalte sehen professionell und ordentlich aus, da Sie den Feed nach Ihren Wünschen personalisieren können. Das Beste daran ist, dass Sie nichts über HTML- und CSS-Anpassungen wissen müssen – alles erfolgt in einem visuellen Editor. Hier sind die wichtigsten Einstellungen, die Sie nach Belieben ändern können.

Wählen Sie eine Vorlage

Es gibt eine große Anzahl von erstaunlichen, einsatzbereiten IG-Vorlagen, die in einer kostenlosen Demo verfügbar sind. Sie sehen ordentlich und professionell aus und werden eine großartige Ergänzung für die Website sein. Sie sind alle anpassbar und anpassungsfähig, und Sie können das Aussehen der Galerie völlig ändern, wenn Sie möchten.

Slider-Vorlage

Sie können Beiträge aus der App in mehreren scrollbaren Zeilen präsentieren. Es sieht ordentlich und klassisch aus und ergänzt das Gesamtdesign der Website. Es besteht die Möglichkeit, die Anzahl der Spalten anzupassen, so dass der Slider Ihren Absichten entspricht und IG-Beiträge in ihrer vollen Pracht zeigt.

Einbettung der Instagram Slider-Vorlage

Karussell-Vorlage

Präsentieren Sie Beiträge mit Hilfe eines Karussells. Dieses interaktive Element kann das Engagement auf Ihrer Seite erhöhen und die Verweildauer darauf verlängern. Die Benutzer werden die IG-Posts mit großem Interesse und Begeisterung durchsehen, dieses einfache Tool wird die Konversionen durch die bestmögliche Präsentation Ihrer Produkte und Dienstleistungen erhöhen.

Karussell-Vorlage des Instagram Feeds

Instagram Post-Widget

Sie können einen einzelnen Instagram-Post auf einer Website anzeigen, um ein Zitat oder einen Abschnitt eines Artikels zu illustrieren. Diese Vorlage könnte nützlich sein für diejenigen, die die Aufmerksamkeit der Website-Besucher auf den einzigen einzigartigen Post lenken möchten, der maximale Informationen zu einem bestimmten Thema liefert. Es kann besonders erstaunlich sein, wenn es nicht notwendig ist, alle Instagram-Posts von Ihrem Profil auf einer Website einzubetten.

Einbettung der Instagram Post-Vorlage

Instagram Sidebar-Vorlage

Wenn Sie Instagram im Seitenmenü anzeigen müssen, können Sie das leicht tun. Fühlen Sie sich frei, das Widget überall dort zu platzieren, wo Sie es wünschen, nicht nur im Inhaltsbereich. Der Instagram Feed kann zu einem integralen Bestandteil eines schwebenden Menüs werden, wählen Sie einfach eine kleine und elegante Vorlage dafür aus.

Sidebar-Vorlage des Instagram-Widgets

Raster-Vorlage

Diese stilvolle quadratische Version der Präsentation für IG-Posts liegt direkt in Ihren Händen. Fotos und Videos nehmen einen begrenzten Platz ein, sehen ordentlich und fein aus. Ein auffälliger ‘Mehr laden’-Button kann die Leute dazu bringen, mehr Zeit auf einer Webseite mit dieser Vorlage zu verbringen. Alles, was Sie tun müssen, ist, frische Inhalte auf Instagram zu veröffentlichen, und sie werden automatisch in Form eines attraktiven Rasters auf Ihrer Website erscheinen.

Raster-Vorlage des Instagram Feeds

Instagram Profil-Vorlage

Diese Widget-Variante konzentriert sich hauptsächlich auf die Profilbeschreibung. Um die Einzigartigkeit Ihres Kontos hervorzuheben, können Sie solche Elemente wie das Profilbild, den Namen des Kontos, die Anzahl der Beiträge, die Anzahl der Follower und Folgt, und den ‘Folgen’-Button hinzufügen.

Einbettung der Instagram Profil-Vorlage auf der Website

Instagram Hashtag

Instagram Feed von Elfsight ermöglicht es jedem, Beiträge mit einem Hashtag von allen öffentlichen Konten der beliebten App hinzuzufügen. Sie können den Namen eines benötigten Hashtags einfügen und danach die Ergebnisse filtern, indem Sie Beiträge von unerwünschten Autoren verstecken, und Ihren erstaunlichen Hashtag-Feed genießen.

Hashtag-Vorlage des Instagram Feeds

Footer-Vorlage

Sie sind lediglich durch Ihre Vorstellungskraft eingeschränkt, wenn es um die Platzierung des Widgets geht. Wählen Sie einfach ein kleines und diskretes Design für Ihr zukünftiges IG-Meisterwerk und binden Sie den Installationscode in den Fußzeile Ihrer Website ein.

Footer-Vorlage des Instagram Feeds

Personalisieren Sie das Widget

Der Umgang mit dem IG-Widget erfordert keinerlei Webdesign- oder Programmierkenntnisse. Sie können einfach Beiträge in einem visuellen Editor personalisieren: Layout, CTA, Spalten und Reihen ändern. Sie haben die Möglichkeit, eine IG-Galerie zu erstellen, die perfekt zu Ihrem Website-Look passt.

  • Layout personalisieren

    Zunächst können Sie wählen, ob Sie Beiträge in einem Raster oder einem Slider präsentieren möchten. Außerdem können Sie die Beitragsvorlage ändern. Es besteht die Möglichkeit, eine klassische oder eine Kachelvorlage für die Veröffentlichungen zu wählen. Schließlich haben Sie die Chance, Spalten und Reihen, die Abstände zwischen ihnen, Beiträge und Popup-Elemente anzupassen. Sie können alle Teile eines gewöhnlichen Instagram-Beitrags ein- und ausschalten: Benutzername, Veröffentlichungsdatum, Anzahl der Likes und Kommentare, Teilen-Button und Text unter dem Beitrag.

  • Farben anpassen

    Sie können eine von mehr als 10 fertigen Farbschemata für Ihre Galerie auswählen. Das wird Ihnen helfen, wenn Sie sich nicht um die Auswahl von Farbkombinationen kümmern möchten. Sie können jedoch die Farben aller Elemente separat weiter anpassen.

    Zum Beispiel gibt es die Möglichkeit, Hintergrund-, Text- und Linkfarben sowohl in Beiträgen als auch in Popups zu personalisieren. Schließlich, um Ihren Feed zu einem integralen Teil Ihrer Website zu machen, können Sie den ‘Mehr laden’-Button anpassen. Und das alles ohne eine einzige Codezeile!

Warum Sie den Instagram Feed auf einer Website einbinden sollten

Jeder kennt die Möglichkeit, einen Link zu einer Website in einer IG-Biografie zu platzieren. Aber warum sollte man Instagram-Beiträge auf einer Website hinzufügen? Diese beliebte App ist ein Ort zum Posten ansprechender Bilder und Videos. Zusätzlich dazu kann die Galerie eine großartige Möglichkeit sein, die Marketingergebnisse zu steigern. Hier sind die Hauptgründe, wie Sie dies tun können.

  • Obwohl Instagram die siebthäufigst besuchte Website der Welt ist, mit 2,9 Milliarden Gesamtbesuchen pro Monat, wie Hootsuite behauptet, ist das Publikum dort eher begrenzt. Indem Sie Ihr Konto auf einer Website platzieren, können Sie mit einem CTA neue Abonnenten und Leser dazu gewinnen.
  • Das Platzieren Ihres Feeds auf einer Website erhöht das Engagement, wie Business News Daily berichtet. Es veranlasst die Leute dazu, mehr Zeit auf der Website zu verbringen und auf Fotos aus ihrer Lieblings-App zu klicken.
  • Laut Forbes ist die beste Art, Websites und soziale Plattformen zu nutzen, sie zu vereinen und Websites als Dreh- und Angelpunkt des Online-Geschäfts und des Rufs zu nutzen. Dann sollten
    Unternehmen ihre Social-Media-Firmenseiten als Speichen nutzen und jede Plattform für ihre einzigartigen Vorteile und Zielgruppen ausnutzen.
    Um dieses Ziel zu erreichen, sollten Unternehmen Social-Media-Inhalte auf ihren Websites hinzufügen.
  • Mit dem Instagram Feed für eine Website können Sie die Größe der Beiträge in einem Raster, die Hintergrundfarbe, die Überschrift, den Stil beim Überfahren mit der Maus und die Schriftarten anpassen. Dadurch wird es das gesamte Website-Design ergänzen und Sie halten die Markenkonsistenz aufrecht.
  • Das Widget auf einer Website wird den sozialen Beweis verstärken und Kunden davon überzeugen, dass Sie ein vertrauenswürdiges Unternehmen sind. Gemäß einer BrightLocal-Studie lesen 91% der Menschen Kundenbewertungen, bevor sie eine Kaufentscheidung treffen. Sie sollten einfach Ihre besten Arbeiten und positive Testimonials auf Instagram zeigen und dann auf Ihrer Website veröffentlichen. Ein Bewertungs-Slider auf einer Website wird Ihnen helfen, die Strategie zur Verwaltung von Bewertungen zu verbessern.
  • Durch das Einbetten des Instagram-Feeds in den HTML-Code einer Website sparen Sie Zeit und Mühe bei der Erstellung neuer Inhalte. Besonders, wenn Sie UGC mit einem Hashtag abrufen. Beachten Sie die folgende Aussage von Salesforce:
    Kundenbindung ist der Schlüssel, um eine treue Anhängerschaft aufzubauen. Kaufen Ihre Kunden weiterhin alte Favoriten? Bleiben sie auf dem Laufenden über neue Veröffentlichungen? Das Anbieten von neuen Erfahrungen und hochpersonalisierten Inhalten hält die Beziehung frisch und interessant.
    Am Ende müssen Sie nichts tun, um den Inhalt im HTML einer Website zu aktualisieren – der Instagram-Feed erledigt das für Sie.
  • Es ist kostenlos! Sie können Ihren eigenen Instagram Feed erstellen und sofort damit beginnen, ihn zu nutzen. Es ist großartig, seine Leistung zu testen und zu sehen, wie er zu Ihrer Website passt, ohne dafür zu bezahlen.
  • Sie können eine Galerie mit dem Look and Feel Ihrer Website in einem visuellen Editor ohne jegliche Programmierung erstellen. Das bedeutet, Sie müssen die IG-API nicht studieren.

Wenn Sie den Instagram Feed auf einer Website einbetten, hilft Ihnen das, Vertrauen in Ihre E-Commerce-Marke aufzubauen und die Kaufentscheidungen der Kunden zu beeinflussen.

Brauchen Sie mehr Social Media? Feeds von TikTok, Twitter, Facebook und 10 weiteren

Mehr als 10 Quellen in einem Widget: TikTok, Twitter, Pinterest, Facebook, Vimeo und mehr! Kombinieren Sie sie, zeigen Sie sie einzeln an, erstellen Sie soziale Feeds für jede Website – dieses Elfsight-Widget gibt Ihnen die Möglichkeit, alles zu tun, was Sie möchten!

Sammeln Sie mehr Beiträge und verbessern Sie Ihr Geschäft mit dem Elfsight Social Feed-Widget.

Social Media Aggregator auf jeder Website einbetten CTA

Fassen wir zusammen!

Sie können den Instagram Feed auf viele verschiedene Arten einbetten. Der effizienteste und kostensparendste Weg ist jedoch, Beiträge mit Hilfe eines Widgets hinzuzufügen. Sie können die Leistung des Feeds kostenlos testen, ihn im Handumdrehen erstellen und die Anzahl der Abonnenten mühelos erhöhen.

Wenn Sie die Anleitung gelesen haben, aber noch Fragen haben, stehen Ihnen folgende Möglichkeiten zur Verfügung:

  • Support. Sie können sich jederzeit an unseren Support wenden oder Artikel im Helpcenter lesen, wenn Sie die Anleitung gelesen haben, aber noch Fragen haben.
  • Forum. Vernetzen Sie sich mit anderen Elfsight-Nutzern, äußern Sie Ihre Meinung und nehmen Sie am Leben der Community teil!
  • Instagram API von Facebook. Wenn Sie versuchen möchten, Ihr eigenes Widget zu erstellen, finden Sie dort die Dokumentation.
  • Instagram über ihre Plattform. Erfahren Sie, was Googles eigener Ratschlag zur Verwendung von nutzergenerierten Inhalten zur Erreichung von Geschäftszielen ist.

Wir laden Sie herzlich ein, unten Kommentare zu hinterlassen, wenn Ihnen der Beitrag gefallen hat oder Sie die gesuchten Informationen nicht finden konnten. Lassen Sie uns über alles sprechen, was Sie interessiert!