Suchen Sie nach einer einfachen Möglichkeit, einen Instagram-Feed zu Ihrer WordPress-Website hinzuzufügen?
Ein Instagram-Feed hilft Ihnen, Ihre Social-Media-Inhalte direkt auf Ihrer WordPress-Website zu präsentieren. Besucher können Ihre Instagram-Inhalte ansehen und damit interagieren, ohne Ihre Website verlassen zu müssen.
In diesem Schritt-für-Schritt-Tutorial zeigen wir Ihnen, wie Sie Ihre Website mit Instagram verbinden, um Ihre Inhalte anzuzeigen. Dies ist ein automatisierter Prozess und erfordert keine Programmierkenntnisse. Fangen wir an.
Was Sie benötigen, um einen Instagram-Feed in WordPress zu erstellen
Sie können manuell mit Code einen Instagram-Feed zu Ihrer Website hinzufügen, diese Methode ist jedoch langwierig und kompliziert.
Eine bessere Lösung ist die Verwendung eines WordPress-Plugins, mit dem Sie Ihre Website mit Instagram verbinden können. Das beste Plugin dafür ist Smash Balloon.
Smash Balloon ist ein leistungsstarkes Social-Feeds-Plugin und verfügt über ein Plugin, das speziell für Instagram entwickelt wurde. Es sind keine Programmierkenntnisse erforderlich, was die Verwendung erleichtert.
Mit Smash Balloon können Sie Ihre Website mit wenigen Klicks mit Instagram verbinden. Anschließend können Sie Ihren Feed so personalisieren, dass er Ihre Zielgruppe gezielt anspricht. Sehen wir uns an, wie:
- Mehrere Feeds: Fügen Sie verschiedene Instagram-Feeds auf derselben oder auf verschiedenen Seiten Ihrer Website hinzu.
- Verwendung von Hashtags: Verbinden Sie Ihren Feed mit Hashtags auf Instagram, sodass Ihr Feed automatisch aktualisiert wird, wenn jemand mit diesen Hashtags postet.
- Tags: Richten Sie Ihren Feed so ein, dass er immer dann zu Ihrem Feed hinzugefügt wird, wenn Sie jemand auf Instagram markiert.
- Gesamter Feed: Fügen Sie einfach Ihre gesamte Instagram-Timeline zu Ihrem Website-Feed hinzu.
Neben diesen leistungsstarken anpassbaren Instagram-Feed-Optionen bietet Smash Balloon viele weitere Funktionen, um das Erlebnis Ihrer Zielgruppe zu verbessern.
- Intelligenter Daten-Cache: Stellt sicher, dass Bilder nicht direkt von Instagram geladen werden, sondern ein Cache-System verwendet wird. Das bedeutet, dass die Mediendateien schneller geladen werden und ein besseres Erlebnis bieten.
- Feed-Backup: Selbst wenn Instagram ausfällt oder Probleme hat, stellt das von Smash Balloon angebotene intelligente Daten-Cache-System sicher, dass Ihr Feed weiterhin angezeigt wird.
- Bildoptimierung: Alle Bilder werden in einer idealen Dateigröße für die Bildschirmgröße geladen. Dadurch werden weniger Ressourcen verschwendet und der Benutzer erhält das beste Erlebnis.
- SEO-Fokus: Die Feed-Beschriftungen sind für Suchmaschinen crawlbar, was bedeutet, dass Ihr Feed rankbar ist und somit ein großartiges SEO-Tool darstellt. Da Ihre Website zudem ständig mit neuen Inhalten aktualisiert wird, profitiert Ihr SEO zusätzlich.
Für dieses Tutorial verwenden wir das Instagram Feed-Plugin von Smash Balloon.
Das gesagt, Smash Balloon ist wirklich leistungsstark und unterstützt andere Social-Media-Plattformen, darunter YouTube, Twitter und Facebook.
Nachdem Sie nun wissen, welches Social-Media-Feeds-Plugin Sie verwenden möchten, kommen wir direkt zum Tutorial.
So erstellen Sie einen Instagram-Feed für Ihre WordPress-Website
Schritt 1: Smash Balloon installieren und aktivieren
Smash Balloon’s Instagram Feed gibt es in einer kostenlosen und einer Premium-Version. Die kostenlose Version ist für sich genommen bereits ein leistungsstarkes Plugin. Sie können es verwenden, bis Sie sich entscheiden, ein Upgrade durchzuführen.
Um auf die kostenlose Version zuzugreifen, gehen Sie zu Ihrem WordPress Plugin Repository, um es herunterzuladen und zu installieren. Richten Sie es wie jedes andere Plugin ein. Wenn Sie dabei Hilfe benötigen, folgen Sie unserer Anleitung So installieren Sie ein WordPress-Plugin – 4 Methoden (Schritt für Schritt).
Für dieses Tutorial verwenden wir die Pro-Version, damit wir Ihnen zeigen können, wie leistungsfähig dieses Plugin ist.
Melden Sie sich auf der Instagram Feed-Website für ein Konto an und fahren Sie dann zu „Mein Konto“.
Laden Sie hier die Plugin-Datei „Instagram Feed Pro“ herunter und kopieren Sie den Lizenzschlüssel.
Gehen Sie zu Ihrem WordPress-Dashboard und dann zur Seite Plugins » Neues Plugin hinzufügen. Hier können Sie die Plugin-Datei hochladen.
Sobald Instagram Feed Pro einsatzbereit ist, erscheint im linken Menü Ihres WordPress-Dashboards ein neuer Punkt namens Instagram Feed.
Gehen Sie zu Instagram Feed » Einstellungen und geben Sie den zuvor kopierten Lizenzschlüssel ein.
Aktivieren Sie die Lizenz und damit sind Sie bereit, Instagram Feed Pro zu verwenden.
Schritt 2: Verbinden Sie Ihr Instagram-Konto
Nachdem das Plugin installiert und aktiviert wurde, besteht der nächste Schritt darin, Ihr Instagram-Konto zu verbinden. Gehen Sie dazu zu Instagram Feed » Alle Feeds. Klicken Sie hier auf die Schaltfläche Neuen Feed hinzufügen .
Wählen Sie als Nächstes Feed-Typ auswählen. Sie sehen die folgenden Optionen:
- Beiträge von Ihrem Instagram-Profil abrufen
- Beiträge von einem öffentlichen Instagram-Hashtag abrufen
- Beiträge anzeigen, in denen Ihr Instagram-Konto markiert wurde
Interessanterweise beschränkt Smash Balloon Sie nicht auf die Auswahl eines Instagram-Feed-Typs; Sie können alle gleichzeitig auswählen. Für dieses Tutorial wählen wir jedoch „Beiträge von Ihrem Instagram-Profil abrufen“.
Auf der nächsten Seite müssen Sie eine Feed-Quelle hinzufügen. Dies ist im Grunde die Quelle, aus der Ihr Feed die Inhalte abruft.
Nach der Seite Quelle hinzufügen können Sie entweder ein persönliches Konto oder ein Geschäftskonto verbinden. Wir wählen für dieses Tutorial das Geschäftsprofil, das mehr Funktionen bietet.
Ein weiteres Fenster wird angezeigt und fragt Sie, ob Sie Smash Balloon bereits zuvor mit Facebook verbunden haben. Wenn Sie dieses Feed-Plugin zum ersten Mal verwenden, sollten Sie „Nein“ wählen.
Als Nächstes werden Sie aufgefordert, sich über Ihre Facebook-Seite zu verbinden. Da Meta Facebook und Instagram besitzt, ist die Verbindung über Facebook der beste Weg, um Smash Balloon Zugriff zu gewähren.
Als Nächstes erscheint ein Popup-Fenster, in dem Sie aufgefordert werden, mit dem angemeldeten Facebook-Profil fortzufahren. Stellen Sie sicher, dass Sie sich mit dem Konto anmelden, das mit den richtigen Instagram- und Facebook-Seiten verknüpft ist, die Sie verwenden möchten.
Ein weiteres Popup-Fenster wird als Nächstes angezeigt. Diesmal müssen Sie die Instagram-Seiten auswählen, die Sie mit Smash Balloon verbinden möchten. Aktivieren Sie das Kontrollkästchen neben dem Profil (den Profilen), das Sie verwenden möchten.
Verbinden Sie im nächsten Popup die Facebook-Seite, die mit dem Instagram-Profil verknüpft ist, indem Sie das Kontrollkästchen daneben aktivieren.
Erteilen Sie im nächsten Fenster Smash Balloon die erforderlichen Berechtigungen. Das Unternehmen wird Ihre Informationen nicht an Dritte weitergeben. Die Gewährung des Datenzugriffs durch das Plugin stellt sicher, dass Ihr Feed alles anzeigt, was er anzeigen soll, ohne Probleme.
Um die Verbindung abzuschließen, vergewissern Sie sich, dass die Domain, die Sie mit Smash Balloon verbinden möchten, Ihnen gehört. Dies dient nur zur Bestätigung, dass Sie Smash Balloon den Zugriff gewähren.
Schließlich wird als Nächstes ein Popup-Fenster mit einer Liste der Instagram-Profile angezeigt, die Sie mit Smash Balloon verbunden haben. Aktivieren Sie das Kontrollkästchen neben der Seite und fahren Sie fort, indem Sie die Schaltfläche Hinzufügen auswählen.
Und so einfach ist das: Sie haben Instagram Feed Pro von Smash Balloon vollständig mit Ihrer WordPress-Website verbunden.
Schritt 3: Erstellen Sie einen Instagram-Feed
Nachdem Smash Balloon verbunden ist, erstellen wir einen neuen Feed. Gehen Sie in Ihrem WordPress-Menü zu Instagram Feed » Alle Feeds. Wählen Sie die gerade hinzugefügte Quelle aus und fahren Sie mit der nächsten Seite fort.
Wählen Sie auf dieser Seite das Feed-Theme aus. Denken Sie daran, dass dies nur die Basis und ein Ausgangspunkt ist, auf dem Sie aufbauen können. Sie können das Theme später jederzeit ändern.
Wählen Sie unter den Feed-Themes eine der Optionen Standard, Modern, Social Wall, Outline oder Overlap aus. Um es einfach zu halten, wählen wir das Standard-Theme.
Nachdem Sie das Theme ausgewählt haben, wählen Sie als Nächstes die Vorlage aus, die Sie verwenden möchten. Sie haben viele Optionen zur Auswahl. Von Simple Grid, Simple Grid XL, Simple Row, Simple Carousel, Single Post und mehr.
Denken Sie daran, dass Sie mit Smash Balloon die Vorlage später auch ändern können, wenn Sie der Meinung sind, dass eine andere Option Ihren Besuchern eine bessere Erfahrung bietet.
Nachdem alle grundlegenden Konfigurationen vorgenommen wurden, werden Sie zum Live-Feed-Editor weitergeleitet, wo Sie den Feed anpassen können.
Schritt 4: Passen Sie Ihren Instagram-Feed an
Der Live-Feed-Editor bietet Anpassungs- und Einstellungsoptionen auf der linken Seite und einen Live-Vorschirm auf der rechten Seite. Wir konzentrieren uns in diesem Tutorial auf das Menü Anpassen. Wählen Sie es aus, und Sie sehen darunter eine Liste von Anpassungsoptionen.
Jedes Mal, wenn Sie auf ein Menü des Live-Feed-Editors klicken und den Anpassungsprozess abschließen, sehen Sie Anpassen mit einem kleinen Pfeil daneben. Wählen Sie es aus, um zum Menü Anpassen zurückzukehren.
Um den Live-Feed-Editor richtig zu nutzen, finden Sie die drei Symbole in der oberen rechten Ecke: Desktop, Tablet und Mobilgerät. Hier können Sie sehen, wie der Instagram-Feed für verschiedene Bildschirmgrößen angezeigt wird, damit Sie Ihren Besuchern die beste Erfahrung bieten können.
Denken Sie daran, dass wir das Theme und die Vorlage bereits in den vorherigen Schritten angepasst haben. Wie erwähnt, können Sie diese hier auch ändern, wenn Sie möchten.
Nachdem dies erledigt ist, beginnen wir mit der Anpassung des Feed-Layouts. Sie können zwischen Raster, Karussell, Kachel und Highlights wählen.
Scrollen Sie im Untermenü Feed-Layout nach unten, um die Feed-Höhe, den Abstand, die Anzahl der Beiträge auf verschiedenen Bildschirmgrößen und schließlich die Anzahl der Spalten für verschiedene Bildschirmgrößen anzupassen. Sobald Sie mit dem Layout zufrieden sind, gehen Sie zurück.
Als Nächstes passen wir das Farbschema an. Standardmäßig übernimmt Ihr Feed die Farben Ihres Themes. Sie können sich für einen hellen oder dunklen Modus entscheiden.
Wenn Sie das Farbschema weiter personalisieren möchten, wählen Sie Benutzerdefiniert und verwenden Sie die benutzerdefinierte Palette, um Ihre gewünschten Farben auszuwählen. Sie können die Farben des Hintergrunds, der Texte, der Links und der Schaltflächen ändern.
Gehen Sie zurück zum Hauptmenü, wenn Sie mit dem Farbschema zufrieden sind.
Nun bearbeiten wir die Abschnitte, beginnend mit dem Header. Aktivieren Sie zuerst den Header, wenn Sie ihn in Ihrem Feed anzeigen möchten.
Wählen Sie als Nächstes einen Header-Stil aus den angebotenen Optionen. Wählen Sie Standard, Boxed, Zentriert oder Text. Jeder Header-Stil kann leicht unterschiedlich bearbeitet werden, wenn Sie weiter unten im Header-Menü scrollen.
Sie können auch die „Header-Größe“ bearbeiten. Entscheiden Sie dann, ob Sie einen neuen Avatar hochladen möchten, der anstelle des Standard-Avatars von Ihrem Instagram-Konto angezeigt wird.
Wählen Sie als Nächstes eine Textfarbe und entscheiden Sie, ob Sie Ihren Benutzern anzeigen möchten, wie viele Instagram-Follower Sie haben.
Sie können dann eine Biografie wählen. Um Ihnen jedoch mehr Anpassungsfreiheit zu geben, bietet Smash Balloon die Möglichkeit, eine benutzerdefinierte Biografie zu schreiben.
Während Sie sich noch im Header-Menü befinden, entscheiden Sie, ob Sie den scrollbaren Bereich außerhalb des Feeds anzeigen möchten. Bestimmen Sie schließlich, ob Instagram-Stories im Feed enthalten sein sollen und wie lange sie angezeigt werden sollen, bevor zur nächsten Insta-Story gewechselt wird.
Das ist alles, Sie können zurück zum Hauptanpassungsmenü gehen. Als Nächstes können Sie zum Anpassen der Beiträge Folgendes ändern:
- Beitragsstil auf Standard oder Boxed
- Bild- und Videoauflösung
- Länge der Bildunterschrift, Textgröße und -farbe
- Größe und Farbe der „Gefällt mir“- und Kommentarübersicht
- Hover-Zustand, Text im Hintergrund und anzuzeigende Informationen
Sobald Sie fertig sind, gehen Sie zurück zum primären Anpassen-Menü.
Smash Balloon lässt Sie auch wählen, ob Sie die Schaltfläche Mehr laden anzeigen möchten. Sie muss nicht „Mehr laden“ heißen. Sie können sie in alles ändern, was Sie möchten.
Passen Sie dann die Farben des Hintergrunds, des Hover-Zustands und des Textes an. Sie können auch „Unendliches Scrollen“ aktivieren, damit Benutzer so viele Instagram-Beiträge in Ihrem Feed anzeigen können, wie sie möchten.
Müssen Sie die Schaltfläche „Folgen“ ändern? Es gibt eine Option, um zuerst den Text, den Hintergrund, den Hover-Zustand und die Textfarben anzupassen.
Aktivieren Sie schließlich Lightbox und „Kommentare“, damit Ihr Feed Kommentare von der Instagram-Seite anzeigen kann.
Und mit all diesen angepassten Optionen ist Ihr Feed vollständig personalisiert und kann zu Ihrer Website hinzugefügt werden.
Schritt 5: Zeigen Sie Ihren Instagram-Feed an
Smash Balloon ermöglicht es Ihnen, Ihren Feed auf verschiedene Arten anzuzeigen.
- Zu einer Seite hinzufügen
- Zu einem Widget hinzufügen
- Feed per Shortcode hinzufügen
Um den Feed zu einer Seite hinzuzufügen, klicken Sie in der oberen rechten Ecke Ihres Live-Feed-Editors auf die Schaltfläche Einbetten.
Im nächsten Popup-Fenster sehen Sie die Option, den Feed zu einer Seite hinzuzufügen.
Als Nächstes sehen Sie eine Liste aller Seiten auf Ihrer Website. Wählen Sie die Seite aus, zu der Sie den Feed hinzufügen möchten. Die Seite wird in einem neuen Tab geöffnet, damit Sie Ihren Feed hinzufügen können.
Alternativ können Sie den Feed jederzeit zu einer vorhandenen oder neuen Seite oder einem neuen Beitrag hinzufügen. Verwenden Sie im Block-Editor das Symbol Plus, um nach dem Block „Instagram-Feed“ zu suchen und ihn zu Ihrer Seite hinzuzufügen. Sie sehen eine Vorschau Ihres Feeds.
Aktualisieren Sie die Seite, und Ihr Feed sollte auch auf der Live-Seite erscheinen.
Als Nächstes fügen wir den Feed über ein Widget hinzu. Suchen Sie erneut die Schaltfläche Einbetten in der oberen rechten Ecke des Live-Feed-Editors und wählen Sie „Zu einem Widget hinzufügen“.
Nachdem Sie zur Widget-Seite weitergeleitet wurden, entscheiden Sie, ob Sie den Feed zum Footer oder zu anderen Arten von Widgets hinzufügen möchten.
Für dieses Tutorial möchten wir den Feed zum Footer hinzufügen. Wählen Sie das Footer-Widget aus, um es zu erweitern, damit Sie seine Eigenschaften sehen können.
Verwenden Sie als Nächstes das Symbol Plus und suchen Sie nach „Instagram-Feed“. Ziehen Sie den Instagram-Feed-Block per Drag & Drop an die Stelle im Footer, an der Sie den Feed anzeigen möchten. Klicken Sie auf Aktualisieren, um ihn zu Ihrer Live-Seite hinzuzufügen.
Schließlich fügen wir den Feed über einen Shortcode hinzu. Mit einem Shortcode können Sie den Feed auf JEDER Seite, jedem Beitrag oder an einem für Widgets geeigneten Ort hinzufügen.
Der Shortcode ist besonders nützlich, wenn Sie mehrere Feeds zur Auswahl haben oder viele Feeds zur selben Seite oder demselben Beitrag hinzufügen möchten.
Sie können den Shortcode des Feeds auf zwei Arten finden.
Gehen Sie zuerst zu Instagram-Feed » Alle Feeds. Sie sehen alle Ihre Feeds aufgelistet; kopieren Sie den Shortcode neben dem Namen des Feeds.
Die andere Methode, um den Shortcode zu erhalten, besteht darin, zu Instagram-Feed » Alle Feeds zu gehen und den Feed im Live-Feed-Editor zu öffnen.
Finden Sie in der oberen rechten Ecke die Schaltfläche Einbetten. Im erscheinenden Popup sehen Sie den Shortcode oben im Fenster; kopieren Sie ihn.
Öffnen Sie nun mit Ihrem Shortcode eine beliebige Seite, einen Beitrag oder einen für Widgets geeigneten Ort. Für dieses Tutorial öffnen wir eine Seite.
Verwenden Sie das Symbol Plus, suchen Sie nach „Shortcodes“ und fügen Sie den Block zu Ihrer Seite hinzu.
Fügen Sie schließlich den Shortcode ein und aktualisieren Sie die Seite; die Live-Website sollte nun den Feed anzeigen.
Gut gemacht! Sie haben jetzt einen hochgradig angepassten und personalisierten Instagram-Feed zu Ihrer WordPress-Website hinzugefügt.
Jetzt, da Sie wissen, wie Sie Smash Balloon verwenden, um einen Instagram-Feed hinzuzufügen, hören Sie nicht auf. Mit diesem Plugin können Sie noch viel mehr tun!
Was kann Smash Balloon noch tun?
Wie Sie sehen können, ist das Hinzufügen eines Instagram-Feeds mit Smash Balloon nicht nur einfach, sondern auch unglaublich anpassbar und ohne jegliche Programmierkenntnisse. Smash Balloon hilft Ihnen, das volle Potenzial des Engagements und der nutzergenerierten Inhalte von Instagram zu nutzen.
Darüber hinaus können Sie mehrere Feeds auf derselben oder auf verschiedenen Seiten erstellen, sich mit bestimmten Hashtags verbinden, markierte Beiträge einschließen oder sogar nahtlos Ihre gesamte Instagram-Timeline auf Ihrer Website anzeigen.
Sie können auch Facebook-, YouTube- und Twitter-Feeds hinzufügen. Hier ist ein Einblick, wie die Anpassung eines YouTube-Feeds aussieht:
Smash Balloon verfügt auch über eine äußerst leistungsstarke Funktion namens Social Wall. Diese ermöglicht es Ihnen, Feeds von mehreren Plattformen an einem Ort zu kombinieren. Benutzer können mit Ihren Inhalten von YouTube, Twitter, Instagram und Facebook interagieren, sodass sie über alle Ihre Plattformen auf dem Laufenden bleiben.
Wir hoffen, dieses Tutorial war hilfreich für Sie. Möglicherweise möchten Sie auch erfahren, wie Sie WordPress-Beiträge automatisch auf Facebook und Twitter teilen können. Unser Ziel ist es, Sie zu befähigen und Ihnen zu helfen, Ihre Social-Media-Seiten wirklich mit Ihrer Website zu nutzen. Aus diesem Grund sollten Sie sich auch diese Artikel ansehen:
- So betten Sie einen YouTube-Feed in WordPress ein, um das Engagement zu steigern
- So zeigen Sie einen Facebook-Feed in WordPress an (5 einfache Schritte)
- So fügen Sie Social Proof Benachrichtigungen in WordPress hinzu
Die ersten beiden Artikel helfen Ihnen dabei, mit Smash Balloon YouTube- und Facebook-Feeds hinzuzufügen. Der letzte Artikel zeigt Ihnen, wie Sie potenziellen Kunden Social Proof anzeigen.
Kommentare Hinterlasse eine Antwort