Suchen Sie nach Möglichkeiten, Instagram-Einbettungen auf Ihrer Website hinzuzufügen?
Für viele von Ihnen, die Websites für Ihr Unternehmen, Ihren Blog oder Ihr Online-Geschäft betreiben, ist es von höchster Priorität, Ihre Inhalte frisch und ansprechend zu halten. Aus meiner Erfahrung im digitalen Marketing weiß ich, dass die Verknüpfung Ihrer Website mit den sozialen Medien ein kluger Schachzug ist.
Responsive Instagram-Feeds passen sich automatisch an verschiedene Bildschirmgrößen an, damit jeder Ihre Inhalte perfekt sieht.
Da so viele Menschen mit ihren Handys im Internet surfen, kann das Zeigen von reaktionsschnellen Instagram-Posts eine gute Möglichkeit sein, sie bei der Stange zu halten.
Aber wenn Sie es gewohnt sind, mit Code umzugehen, dann kann die Anzeige von Instagram-Posts auf Ihrer Website schwierig sein. Außerdem müssen Sie darauf achten, dass die Einbettungen mobilfreundlich sind.
Wenn Sie Ihrer WordPress-Website ganz einfach responsive Instagram-Feeds hinzufügen möchten, habe ich etwas für Sie!
In diesem Leitfaden zeige ich Ihnen, wie Sie Instagram-Feeds in WordPress einbetten und sie responsiv machen können, ohne dass Sie technische Probleme haben.
Ich zeige Ihnen die einfachen Methoden, die ich verwendet habe, um responsive Instagram-Feeds zu erstellen, damit Sie Ihre Website mühelos verbessern können und sie auf jedem Gerät gut aussieht.
In diesem Artikel
Warum sollten Sie Ihrer Website responsive Instagram-Embeds hinzufügen?
Mit über 2 Milliarden aktiven Nutzern ist Instagram eine der größten Social-Media-Plattformen und ein fantastischer Ort, um visuelle Inhalte wie Fotos und Videos zu sehen.
Und wenn Sie Ihre Besucher auf einfache Weise einbinden möchten, können Sie die Inhalte von Instagram auf Ihrer Website einbetten.
Über 58,99 % der Internetnutzer surfen heutzutage auf ihren Mobiltelefonen, und wenn die Instagram-Einbettungen nicht responsive sind, können die meisten Ihrer Besucher die Beiträge nicht richtig sehen.
Wenn Sie Ihre Instagram-Einbettungen jedoch mobilfreundlich gestalten, können Sie relevante Fotos und Videos zeigen, um das Interesse der Website-Besucher zu wecken und sie in Ihre Instagram-Follower zu verwandeln.
Außerdem können Sie auch Ihre eigenen Instagram-Inhalte posten, wenn Sie Ihre Fangemeinde in den sozialen Medien schnell vergrößern möchten.
Sie wollen mehr Umsatz für Ihr Unternehmen? Sie können positive Bewertungen und Zeugnisse von Instagram einbetten und Besucher in Kunden umwandeln.
Nutzergenerierte Inhalte (UGC) wie Instagram-Bewertungen können als sozialer Beweis dienen und mehr Besucher in Kunden verwandeln.
Noch besser: Sie können sogar einen responsiven Shoppable Instagram-Feed erstellen, damit Ihre Kunden Ihre Produkte direkt kaufen können - unabhängig davon, welches Gerät sie zum Besuch Ihrer Website verwenden.
Jetzt wissen Sie, wie das Einbetten von responsiven Instagram-Beiträgen Ihrem Unternehmen helfen kann.
Schauen wir uns also an, wie man am einfachsten mobilfreundliche Instagram-Inhalte einbetten kann.
Der einfachste Weg zum Einbetten responsiver Instagram-Posts
Wenn es um die Anzeige von Instagram-Inhalten auf Ihrer Website geht, haben Sie 2 Möglichkeiten:
- Manueller Weg: Generieren Sie HTML-Einbettungscodes für jeden Instagram-Post und fügen Sie sie zu Ihrer WordPress-Seite hinzu.
- Automatischer Weg (Einfacher Weg): Holen Sie sich ein Instagram-Plugin, das Feeds von responsiven Fotos und Videos für Sie einbetten kann.
Bei der ersten Methode kann das Hinzufügen von Instagram-Posts zu Ihrer Website zeitaufwändig sein, vor allem, wenn Sie viele Inhalte zeigen möchten.
Schließlich müssen Sie zwischen den beiden Websites hin- und herwechseln, um die HTML-Codes abzurufen und sie dann in Ihre Website einzufügen. Wenn Sie es nicht gewohnt sind, mit einer Menge Code umzugehen, kann dieser Schritt verwirrend sein.
Außerdem müssen Sie jedes Mal manuell überprüfen, ob Ihre Instagram-Posts auf dem Handy richtig angezeigt werden.
Außerdem fügen Sie auf diese Weise iFrames zum Einbetten von Instagram zu Ihrer Website hinzu. Das bedeutet, dass Suchmaschinen wie Google die Social-Media-Inhalte auf Ihrer Website nicht sehen können.
Die gute Nachricht?
Sie können all diese Probleme umgehen, indem Sie das beste Instagram-Feed-Plugin verwenden, das es gibt: Instagram Feed Pro.
Mit dem Instagram Feed Pro-Plugin können Sie responsive Feeds erstellen, um Instagram-Fotos, -Videos, -Reels und mehr anzuzeigen.
Sie können einfach einer dreistufigen Anleitung folgen, und das Plugin führt Sie durch den gesamten Prozess des Erstellens, Anpassens und Einbettens von Instagram-Feeds.
Wenn Sie diese Anleitung befolgen, können Sie Ihre Instagram-Beiträge, Erwähnungen und Hashtags auf Ihrer WordPress-Website anzeigen.
Und alle Inhalte, die Sie einbetten, werden automatisch an die Bildschirmgröße Ihrer Besucher angepasst. Sie können sogar in der Vorschau sehen, wie Instagram-Posts auf verschiedenen Geräten aussehen werden.
Darüber hinaus haben Sie mit Instagram Feed Pro die Kontrolle darüber, wie Instagram-Posts auf Ihrer Website erscheinen.
Sie können aus einer Sammlung vorgefertigter Vorlagen wählen und dann den Live-Feed-Anpassungstool verwenden, um Ihren Feed mit ein paar einfachen Klicks anzupassen - ohne JavaScript, HTML, CSS oder irgendeine Art von Code zu benötigen.
Mit all diesen erstaunlichen Funktionen ist Instagram Feed Pro mit über 1 Million aktiven Nutzern die Nummer 1 unter den Instagram-Feed-Plugins geworden.
Wenn Sie Ihrer Website responsive Instagram-Feeds hinzufügen möchten, sollten Sie sich Instagram Feed Pro sofort zulegen.
Schauen wir uns an, wie Sie dieses Plugin verwenden können, um responsive Instagram-Posts hinzuzufügen.
Wie man responsive Instagram-Embeds zu WordPress hinzufügt
Um responsive Feeds von Instagram-Beiträgen anzuzeigen, müssen Sie nur die folgenden Schritte ausführen.
Schauen wir uns das mal an!
Schritt 1: Installieren Sie das Instagram Feed Pro Plugin
Besorgen Sie sich zunächst eine Kopie von Instagram Feed Pro und installieren Sie das Plugin auf Ihrer Website.
Wenn Sie mehr erfahren möchten, sehen Sie sich diese Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins an.
Schritt 2: Erstellen eines neuen Instagram-Feeds
Wenn Sie der 3-Schritte-Anleitung folgen, können Sie mit wenigen Klicks einen neuen Instagram-Feed erstellen und online stellen.
Um loszulegen, öffnen Sie das Menü Instagram Feed " Alle Feeds in Ihrem WordPress-Dashboard-Bereich. Auf der neuen Seite klicken Sie oben auf die Schaltfläche Neu hinzufügen .
Sie können dann die Art der Instagram-Inhalte auswählen, die Sie auf Ihrer Website anzeigen möchten:
- Benutzer-Zeitleiste: Beiträge aus Ihrem Instagram-Profil anzeigen
- Öffentlicher Hashtag: Wählen Sie Hashtags aus und zeigen Sie dann die Beiträge mit diesem Hashtag an.
- Getaggte Beiträge: Betten Sie die Beiträge ein, die Ihr Instagram-Konto erwähnen.
Wenn Sie verschiedene Feed-Typen in einem einzigen Feed kombinieren möchten, wählen Sie hier einfach mehrere Optionen aus.
Nachdem Sie einen bestimmten Futtermitteltyp ausgewählt haben, klicken Sie auf die Schaltfläche Weiter .
Schritt 3: Verbinden Sie den Feed mit Ihrem Instagram
Sobald Sie einen Feed-Typ ausgewählt haben, können Sie damit beginnen, Ihr Instagram-Konto für Unternehmen oder Urheber mit diesem Feed zu verbinden.
Klicken Sie auf die Schaltfläche Quelle hinzufügen , um zu beginnen.
In dem Popup können Sie zwischen 2 Arten von Instagram-Verbindungen wählen:
- Basic: Zeigen Sie die Fotos, Reels und Collab-Posts von Ihrem Instagram-Profil an.
- Erweitert: Zusätzlich zu den Grundfunktionen können Sie Hashtag-Feeds, getaggte Feeds, Stories und mehr anzeigen.
Nachdem Sie Ihre Verbindungsart ausgewählt haben, klicken Sie auf die Schaltfläche Verbinden .
Danach können Sie Instagram oder Facebook öffnen, um die Verbindung Ihres Kontos abzuschließen. Die gute Nachricht ist, dass der Vorgang für jede Plattform gleich ist.
Für den Moment klicke ich auf die Schaltfläche Mit Instagram verbinden.
Als Nächstes bittet Instagram Feed Pro um schreibgeschützten Zugriff auf Ihr Konto. Das Plugin kann auch Informationen auf Instagram anzeigen, kann aber keine Änderungen vornehmen.
Daher ist die Verwendung von Smash Balloon-Plugins wie Instagram Feed Pro absolut sicher.
Um fortzufahren, klicken Sie im Popup-Fenster auf die Schaltfläche Zulassen .
Sie können nun dieses Instagram-Konto als Quelle für Ihre zukünftigen Feeds verwenden, ohne Ihre Website zu verlassen.
Um die Verbindung Ihres Kontos abzuschließen, klicken Sie auf die Schaltfläche Weiter.
Einfach so kann Ihr Instagram-Feed responsive Fotos und Videos auf Ihrer Website anzeigen. Da das Plugin automatisch das Design Ihrer Website kopiert, werden Ihre Beiträge perfekt an Ihre Marke angepasst.
Schritt 4: Passen Sie Ihren responsiven Instagram-Feed an
Wenn Sie schnell ein schönes Design für Ihren Instagram-Feed importieren möchten, müssen Sie nur aus einer Sammlung von vorgefertigten Vorlagen wählen.
Sobald Sie eine Feed-Vorlage ausgewählt haben, klicken Sie auf die Schaltfläche Weiter.
Daraufhin öffnet das Plugin den Live-Feed-Editor, damit Sie das Design Ihres Instagram-Feeds fertigstellen können.
Auf der linken Seite finden Sie das Anpassungsfeld des Editors. Hier können Sie das Layout Ihres Feeds, das Design der Kopfzeile, das Farbschema, das Design der Schaltflächen, die Anzahl der Beiträge und vieles mehr einstellen.
Wann immer Sie Änderungen vornehmen, zeigt die Live-Vorschau auf der rechten Seite, wie Ihr responsiver Instagram-Feed aussieht.
Für den Anfang können Sie das Layout der Instagram-Posts auf Ihrer Website festlegen. Jede dieser Layout-Optionen ist perfekt responsive, sodass Sie sich entspannt zurücklehnen können.
Klicken Sie einfach auf die Option Feed-Layout , um fortzufahren.
Jetzt können Sie aus 4 verschiedenen Layout-Optionen für Ihren Instagram-Feed wählen: Raster, Karussell, Masonry und Highlights.
Im Folgenden werden wir uns jedes dieser Layouts ansehen.
Wenn Sie sich für die Option Raster entscheiden, können Sie alle Ihre Instagram-Posts in übersichtlichen Zeilen und Spalten anzeigen.
Auf diese Weise können Sie Ihre Besucher mit einer Vielzahl von Fotos und Videos ansprechen.
Als Nächstes haben Sie das Karussell-Layout, das Beiträge in einem Diashow-Karussell anzeigen kann.
Dadurch wird Ihre Website für Ihre Besucher noch interessanter.
Möchten Sie die ursprünglichen Proportionen Ihrer Instagram-Fotos und -Videos beibehalten?
In diesem Fall können Sie hier das Layout Mauerwerk auswählen.
Wenn Sie sich für das Highlight-Layout entscheiden, werden in Ihrem responsiven Instagram-Feed bestimmte Beiträge hervorgehoben.
Außerdem liegt der Fokus ganz auf Ihren Fotos und Videos, da dieses Layout die Bildunterschriften und andere Informationen ausblendet.
Sobald Sie Ihr Feed-Layout ausgewählt haben, klicken Sie auf die Schaltfläche Speichern .
Um mit der Gestaltung Ihres neuen Feeds fortzufahren, klicken Sie auf die Schaltfläche Anpassen am oberen Rand.
Sie können auch die Farben Ihres Instagram-Feeds mit dem Live-Feed-Editor auswählen.
Klicken Sie dazu auf die Option Farbschema auf der linken Seite.
Damit Sie Ihre Farben leicht ändern können, stehen Ihnen 4 Farbschemata zur Verfügung:
- Vom Theme erben: Kopieren Sie die Farben Ihres WordPress-Themes
- Hell: Anzeige einer hellen Hintergrundfarbe mit einer dunklen Schrift
- Dunkel: Zeigt einen dunklen Hintergrund mit einer hellen Schriftfarbe
- Benutzerdefiniert: Wählen Sie manuell alle Farben selbst aus
Nachdem Sie Ihr Farbschema ausgewählt haben, speichern Sie Ihre Änderungen, indem Sie auf Speichern klicken.
Mit den übrigen Anpassungsoptionen können Sie die Vorlage Ihres Feeds, das Design der Kopfzeile, den Stil der Schaltflächen, die Anzahl der Beiträge und vieles mehr ändern.
Vergessen Sie nicht, auf " Speichern" zu klicken, wenn Sie mit dem Aussehen Ihres responsiven Instagram-Feeds zufrieden sind.
Schritt 5: Einbetten Ihres responsiven Instagram-Feeds
Mit dem Instagram Feed Pro Plugin erhalten Sie 2 verschiedene Möglichkeiten, Instagram-Feeds auf Ihrer WordPress-Seite einzubetten:
- Responsive Instagram-Feed in WordPress-Seite einbetten
- Responsive Instagram-Feed in WordPress-Seitenleiste oder Fußzeile einbetten
Im Folgenden werden wir beide Optionen besprechen.
Responsive Instagram-Feed in WordPress-Seite einbetten
Da Instagram Feed Pro benutzerfreundlich gestaltet wurde, können Sie Ihren Feed direkt vom Live-Editor aus einbetten.
Klicken Sie zunächst auf die Schaltfläche Einbetten in der oberen rechten Ecke.
Sie können nun alle Möglichkeiten sehen, wie Sie diesen Instagram-Feed einbetten können.
Klicken Sie unter allen Optionen auf die Schaltfläche Zu einer Seite hinzufügen , um fortzufahren.
Wählen Sie in dem Popup die WordPress-Seite aus, auf der Sie den responsiven Instagram-Feed anzeigen möchten.
Klicken Sie anschließend auf Hinzufügen , um fortzufahren.
Um Ihnen beim Einbetten Ihres neuen Instagram-Feeds zu helfen, öffnet das Plugin diese Webseite im WordPress-Editor.
Fügen Sie von hier aus einen neuen Inhaltsblock hinzu, indem Sie auf das Pluszeichen (+) klicken.
Geben Sie oben in der Suchleiste "Instagram" ein, um nach dem Instagram-Feed-Block zu suchen.
Klicken Sie dann in den Suchergebnissen unten auf Instagram Feed.
Klicken Sie abschließend auf die Schaltfläche Aktualisieren , und Ihr responsiver Instagram-Feed wird für Ihre Besucher live geschaltet.
Jetzt können Ihre Website-Besucher Fotos und Videos von Instagram auf Ihrer Website sehen, so wie in diesem Screenshot:
Wie Sie sehen, ist es mit Instagram Feed Pro ganz einfach, ansprechende Instagram-Einbettungen auf Ihrer WordPress-Website anzuzeigen.
Mit nur wenigen Klicks können Ihre Website-Besucher Ihren Instagram-Feed sehen, der auf jeder Bildschirmgröße und jedem Gerät einwandfrei funktioniert!
Als Nächstes sehen wir uns an, wie Sie Instagram-Feeds am einfachsten in Ihrer Seitenleiste oder Fußzeile anzeigen können.
Responsive Instagram-Feed in WordPress-Seitenleiste oder Fußzeile einbetten
Wie bei der vorherigen Methode können Sie den Live-Feed-Editor verwenden, um Ihren Instagram-Feed in die Seitenleiste oder Fußzeile einzubetten.
Wenn Ihr Live-Feed-Editor noch nicht geöffnet ist, gehen Sie in Ihrem WordPress-Dashboard auf das Menü Instagram-Feed " Alle Feeds .
Klicken Sie dort auf den Instagram-Feed, den Sie einbetten möchten.
Sie können den Instagram-Feed nun wieder im Live-Feed-Editor öffnen.
Um Ihren Feed einzubetten, klicken Sie oben auf die Schaltfläche Einbetten .
In dem Popup können Sie auswählen, wo Sie Ihren Instagram-Feed einbetten möchten - genau wie zuvor.
Klicken Sie dieses Mal auf die Schaltfläche Zu einem Widget hinzufügen .
Sie können nun die Seite Widgets auf Ihrer Website aufrufen. Von hier aus können Sie Ihren neuen Feed als Instagram-Widget einbetten.
Wenn Sie Ihren Feed in die Seitenleiste der Website einbetten möchten, klicken Sie auf das Feld Seitenleiste .
In unserem Tutorial werden wir die responsiven Instagram-Einbettungen in der Seitenleiste zeigen.
Möchten Sie Instagram-Medien in der Fußzeile Ihrer Website anzeigen? Dann klicken Sie stattdessen auf das Fußzeilen-Panel .
Um ein neues Widget hinzuzufügen, klicken Sie auf das Plus-Symbol (+) am unteren Rand.
Wählen Sie schließlich das Instagram-Feed-Widget aus den Optionen aus und klicken Sie dann auf Aktualisieren.
Sie haben jetzt responsive Instagram-Feeds in der Seitenleiste oder in der Fußzeile Ihrer Website.
Um zu sehen, wie es für Ihre Website-Besucher aussehen wird, öffnen Sie einfach Ihre Website und sehen Sie selbst.
Schauen wir uns das mal an!
Und da haben Sie es!
Jetzt wissen Sie, wie Sie auf einfache Weise responsive Instagram-Einbettungen in WordPress hinzufügen können. So können Sie mobilfreundliche Instagram-Feeds anzeigen und Besucher bei der Stange halten.
Mit Hilfe von Instagram Feed Pro ist es einfacher als je zuvor, schöne Feeds von Instagram-Fotos und -Videos auf Ihrer Website einzubetten - ganz ohne Programmierkenntnisse.
Sind Sie bereit, responsive Instagram-Feeds einzubetten? Holen Sie sich Instagram Feed Pro noch heute!
Wenn Sie Videoinhalte erstellen, kann der nächste Beitrag darüber, wie Sie Instagram-Reels auf Ihrer Website einbetten, ebenfalls hilfreich sein.
Fanden Sie dies hilfreich? Sie können uns auf Facebook und Twitter folgen, um weitere hilfreiche Tipps und Tricks zum Social Media Marketing zu erhalten.
