Instagram Feed in WordPress einbinden und anzeigen lassen
Nicht jeder Influencer teilt sein Leben ausschließlich auf der Platform Instagram. Oft haben Influencer oder Instagram-Nutzer auch eigene Webpräsenzen um Inhalte mit ihren Abonnenten zu teilen. Was liegt da näher als eine Verknüpfung zwischen Instagram und deiner Webseite herzustellen?
Abgesehen davon ist die Einbindung deines Instagram Feeds auch nützlich dafür, Besucher deiner WordPress Webseite auf deinen Instagram-Account aufmerksam zu machen und so die Reichweite zu steigern. Zusätzlich haben auch alle Nicht-Instagram-Nutzer Einsicht auf deine kreativen Fotobeiträge und können regelmäßig sehen, was du unter deinem Instagram-Account postest.
Wie kann ich meine Instagram Bilder ohne Plugin auf meiner WordPress Webseite einbinden?
Mittlerweile gibt es eine ganze Menge an verschiedensten Instagram-Plugins für WordPress. Einige davon sind kostenfrei, andere nicht. Aber warum solltest du wegen jeder Erweiterung immer gleich ein Plugin installieren? Das ist eigentlich nicht nötig, insofern du über Kenntnisse in PHP, HTML und CSS verfügst. Denn ein Instagram Feed lässt sich auch einfach ohne Plugin auf deine WordPress Webseite einfügen.
Die Instagram-API macht es möglich!
Alles was du für eine Verbindung zur Instagram-API benötigst, ist dein Accountname und dein Instagram-Token. Interessant dabei ist zunächst, woher du so einen Token bekommst? Das ist ganz einfach. Logge dich vorher auf der Webseite (https://www.instagram.com/) von Instagram ein und besuche anschließend https://instagram.pixelunion.net/. Dort erhältst du schnell und einfach deinen persönlichen Token, den du für die Einbettung deines Instagram Feeds benötigen wirst.
Den Instagram-Feed von der API abrufen und zwischenspeichern
Unter Verwendung deines Instagram Nutzernamens sowie des Tokens wird eine Verbindung zur Instagram-API aufgebaut. Dazu verwenden wir die offizielle Instagram API-URL für die Anzeige der neusten Feed-Beiträge. Das sieht in der Regel wie folgt aus:
Der folgende Code-Schnipsel ist so aufgebaut, dass zunächst eine Verbindung zur Instagram-API aufgebaut und das Resultat in einem WordPress Transienten zwischengespeichert wird.
Warum zwischenspeichern? In der Regel ist die Menge von Anfragen an eine API begrenzt. Das bedeutet, wenn bei jedem Aufruf deiner Webseite der Instagram-Feed angezeigt wird, ist dass jeweils auch eine Anfrage an die API. Wenn das Anfrage-Limit z.B. bei 10 Anfragen pro Stunde liegt, würde der elfte Aufruf nur eine Fehlermeldung angezeigt bekommen und nicht den Instagram-Feed. Das wird so gehandhabt um die Ressourcen des Servers zu schonen, welcher die Feed-Daten bereitstellt.
Unter Verwendung eines WordPress Transienten, können wir die Daten, welche wir von der API erhalten, cachen (zwischenspeichern) und z.B. eine Lebensdauer von 12 Stunden definieren. Das bedeutet, dass alle 12 Stunden dein Instagram-Feed aktualisiert wird. Somit wird der Fall nie eintreten, dass du dein Anfrage-Limit an die API erreichst.
Die Funktion zum Abrufen der API-Daten von Instagram
Wie zuvor erklärt, übernimmt die folgende PHP-Funktion alle diese Aufgaben für dich und bietet die Grundlage dafür den Instagram-Feed auf deiner WordPress Webseite einzubinden:
Die Instagram-Bilder auf der Webseite ausgeben lassen
Der erste Teil beschreibt wie wir die Bilder bzw. Daten eines Instagram-Feeds erhalten und zwischenspeichern. Nun müssen wir diese Daten noch im Frontend verfügbar machen. Dazu baust du am besten eine Template-Datei und bindest sie an der entsprechenden Stelle ein, wo dein Feed letztendlich zu sehen sein soll.
Das folgende Beispiel zeigt, wie wir nun die Daten in einem WordPress-Template für die Anzeige des Instagram-Feeds im Frontend anzeigen lassen können. Hierbei handelt es sich nur um ein Beispiel. Die Art und Weise, wie die Ausgabe dargestellt werden soll, hängt von deinen Anforderungen ab. Das Ganze muss natürlich noch mit CSS formiert werden, damit die Ausgabe der Instagram-Bilder korrekt dargestellt wird:
Das reine Abrufen der Feed-Daten, ohne HTML-Markup, würde dann z.B. so aussehen:
