Suchen Sie nach einer einfachen Möglichkeit, einen Instagram-Feed zu Ihrer WordPress-Seite 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 Seite verlassen zu müssen.
In diesem Schritt-für-Schritt-Tutorial zeigen wir Ihnen, wie Sie Ihre Seite mit Instagram verbinden, um Ihre Inhalte anzuzeigen. Dies ist ein automatisierter Prozess und erfordert keine Programmierkenntnisse. Fangen wir an.
Was Sie für einen Instagram-Feed benötigen in WordPress
Sie können einen Instagram-Feed manuell mit Code 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 wird mit einem Plugin geliefert, das speziell für Instagram entwickelt wurde. Es erfordert keine Programmierkenntnisse, was die Verwendung erleichtert.
Smash Balloon ermöglicht es Ihnen, Ihre Website mit wenigen Klicks mit Instagram zu 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 jedes Mal, wenn Sie jemand auf Instagram markiert, dieser Beitrag zu Ihrem Feed hinzugefügt wird.
- 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.
- Intelligentes Daten-Caching: Stellt sicher, dass Bilder nicht direkt von Instagram geladen werden, sondern ein Caching-System verwenden. 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-Caching-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 sehr leistungsfähig und unterstützt auch 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 hat eine kostenlose und eine Premium-Version. Die kostenlose Version ist für sich genommen 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 Website von Instagram Feed für ein Konto an und gehen 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 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: Instagram-Konto verbinden
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. Gehen Sie hier zum Button Neu 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 (die) Sie verwenden möchten.
Im nächsten Popup verbinden Sie die Facebook-Seite, die mit dem Instagram-Profil verknüpft ist, indem Sie das Kontrollkästchen daneben aktivieren.
Im nächsten Fenster gewähren Sie Smash Balloon die erforderlichen Berechtigungen. Das Unternehmen wird Ihre Informationen nicht an Dritte weitergeben. Die Gewährung von Datenzugriff für das Plugin stellt sicher, dass Ihr Feed alles korrekt und ohne Probleme anzeigt.
Um die Verbindung abzuschließen, überprüfen Sie, ob die Domain, mit der Sie Smash Balloon verbinden möchten, Ihnen gehört. Dies dient nur zur Bestätigung, dass Sie Smash Balloon Zugriff gewähren.
Schlie s lich wird 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 mit der Auswahl der Schaltfl che Hinzuf fort.
Und schon ist Ihr Instagram Feed Pro von Smash Balloon vollst ndig mit Ihrer WordPress-Site 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 nen. Sie k nen das Theme sp ter jederzeit ndern.
W hlen Sie aus 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 auch sp ter jederzeit ndern k nen, wenn Sie der Meinung sind, dass eine andere Option Ihren Lesern ein besseres Erlebnis bietet.
Nachdem alle grundlegenden Konfigurationen vorgenommen wurden, werden Sie zum Live-Feed-Editor weitergeleitet, wo Sie den Feed anpassen k nen.
Schritt 4: Passen Sie Ihren Instagram-Feed an
Der Live-Feed-Editor bietet Anpassungs- und Einstellungsoptionen auf der linken Seite und einen Live-Vorschaufenster 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 Anpassungsvorgang abschlie sen, 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: einen Desktop, ein Tablet und ein Mobiltelefon. Hier k nen Sie sehen, wie der Instagram-Feed f r verschiedene Bildschirmgr sse angezeigt wird, damit Sie Ihren Lesern das beste Erlebnis bieten k nen.
Denken Sie daran, dass wir das Theme und die Vorlage bereits in den vorherigen Schritten angepasst haben. Wie erw hnt, k nen Sie diese hier auch ndern, wenn Sie m chten.
Damit ist das erledigt, beginnen wir mit der Anpassung des Feed-Layouts. Sie k nen zwischen Grid, Carousel, Masonry 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 ssen und schlie s lich die Anzahl der Spalten f r verschiedene Bildschirmgr sse anzupassen. Sobald Sie mit dem Layout zufrieden sind, gehen Sie zur ck.
Als N chstes passen wir die Farbschema an. Standardm sig erbt Ihr Feed die Farben Ihres Themes. Sie k nen sich f r einen hellen oder dunklen Modus entscheiden.
Wenn Sie das Farbschema weiter personalisieren m mchten, w hlen Sie Benutzerdefiniert und verwenden Sie die Benutzerdefinierte Palette, um Ihre Wunschfarben auszuw hlen. Sie k nen 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.
Bearbeiten wir nun 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, Centered oder Text. Jeder Header-Stil kann beim weiteren Scrollen im Header-Menü leicht unterschiedlich bearbeitet werden.
Sie können auch die „Header-Größe“ bearbeiten. Entscheiden Sie dann, ob Sie ein neues Avatar hochladen möchten, das anstelle des Standard-Avatars aus 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 wählen, ob Sie eine Biografie haben möchten. 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 übergegangen wird.
Das ist alles, Sie können zum Hauptanpassungsmenü zurückkehren. 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 von „Gefällt mir“- und Kommentar-Zusammenfassungen
- Hover-Zustand, Text im Hintergrund und anzuzeigende Informationen
Nach Abschluss gehen Sie zurück zum primären Anpassen-Menü.
Smash Balloon ermöglicht es Ihnen auch zu wählen, ob Sie die Schaltfläche Mehr laden anzeigen möchten. Sie muss nicht „Mehr laden“ lauten. Sie können sie in alles ändern, was Sie möchten.
Passen Sie dann Hintergrund-, Hover-Zustand- und Textfarben 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 den „Folgen“-Button ändern? Es gibt eine Option, zuerst den Text, den Hintergrund, den Hover-Zustand und die Textfarben anzupassen.
Aktivieren Sie schließlich Lichtbox 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 Beitrag hinzufügen. Verwenden Sie im Block-Editor das Plus-Symbol, 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 anzeigen 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 Ihrem Feed auf der 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 Widget-fähigen Speicherort 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.
Suchen 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 Widget-fähigen Speicherort. 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 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 verschiedenen Seiten erstellen, sich mit bestimmten Hashtags verbinden, markierte Beiträge einbeziehen oder sogar Ihre gesamte Instagram-Timeline nahtlos 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 bietet auch eine extrem leistungsstarke Funktion namens Social Wall. Diese ermöglicht es Ihnen, Feeds von mehreren Plattformen an einem Ort zu kombinieren. Nutzer 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 lernen, 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 binden 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, Smash Balloon zum Hinzufügen von YouTube- und Facebook-Feeds zu verwenden. Der letzte Artikel zeigt Ihnen, wie Sie potenziellen Kunden Social Proof anzeigen.
Kommentare Antworten