Instagram-Bilder mit IFTTT in den eigenen WordPress-Blog einbinden

Was ist IFTTT?

Instagram war für mich der Auslöser, mich mit der Plattform IFTTT zu beschäftigen. Ich wollte Instagram-Bilder auf meiner Facebook-Seite veröffentlichen und fand die eingebaute Share-Funktion der Instagram-App nicht mächtig genug. Auf der Suche nach einer besseren Lösung stieß ich mehrfach auf IFTTT.

IFTTT steht für "If this then that". Auf IFTTT kann man eigene Wenn-Dann-Regeln defineren, die sich auf duzende sogenannte Channels beziehen. Channels entsprechen all unseren geliebten Internetdiensten wie Facebook, Instagram, Evernote, LinkedIn, Flickr, WordPress bis hin zu Wetterdiensten und Heimautomatisierung. Diese Kanäle werden in den Regeln in Beziehung gesetzt, z.B.:

• Wenn ich ein neues Instagram-Bild erstelle, soll dieses im Album "Urlaub" auf meinem Facebook-Account erstellt werden
• Wenn eine neue eBay-Auktion bestimmten Suchkriterien entspricht, möchte ich eine SMS bekommen
• Wenn es morgen aller Voraussicht nach regnet, möchte ich benachrichtigt werden

Es gibt viele Möglichkeiten, die Kanäle zu kombinieren. Man kann ein Rezept selbst erstellen oder in den vielen öffentlichen Rezepten stöbern. Ein näherer Blick lohnt sich, IFTTT ist einfach ziemlich cool.

Instagram und WordPress

Nachdem ich Instagram lieb gewonnen hatte, wollte ich meine Bilder auch auf meinem Reiseblog einbinden. Mein Ziel war es, die Bilder in der Sidebar in Kachelform über ein Widget darzustellen.

Ich habe mir ein paar der zahlreichen Instagram-WordPress-Plugins angeschaut. Für einige Zeit hatte ich das Plugin simple-instagram im Einsatz. Mir fiel aber auf, dass die Bilder sehr langsam geladen werden. Das liegt daran, das die meisten Instagram-WordPress-Plugins die Originalbilder darstellen. Diese haben eine Größe von 640 x 640 px. Auf meinem Blog stelle ich diese aber in einer Größe von 81 x 81 px dar. Selbst mit einem Retina-Bildschirm ist die Originalgröße viel zu groß. Es werden also unnötig viele Daten zu Lasten des Besuchers der Seite geladen.

So entstand die Idee zu einem neuen Ansatz. Ich wollte mithilfe von IFTTT die Originalbilder in die Medienbibliothek meines Blogs importieren. WordPress hat eine eingebaute Bildkonvertierung und es werden Thumbnails von jedem Bild erstellt. Diese Thumbnails wollte ich statt der Originalbilder in der Sidebar darstellen.

IFTTT, Instagram und WordPress

IFTTT bietet Channels für Instagram und WordPress mit denen es möglich ist, jedes neue Instagram-Bild auf dem Blog zu posten. Das funktioniert aber nur so, dass für jedes Bild ein neuer Beitrag, quasi ein Foto-Post, erstellt wird. Das Bild ist zudem noch das Original-Bild. Mit den Standard-Mitteln lies sich mein Ziel nicht erreichen.

Trotzdem habe ich diesen Ansatz weiter verfolgt. Wenn man mithilfe von IFTTT Instagram und WordPress verbindet, bekommt WordPress alle Informationen zu dem Instagram-Bild (URLs, Beschreibung etc.). Ich wollte versuchen, diese Informationen abzugreifen, für einen eigenen Prozess zu verwenden und das Standardvorgehen (= Anlage eines neuen Blogartikels) unterbinden.

Herausgekommen sind dabei zwei WordPress-Plugins:

• ifttt-bridge
• ifttt-instagram-gallery

Warum zwei Plugins?

Der Gesamtprozess ist recht umfangreich. Grob skizziert sieht dieser folgendermaßen aus:

• IFTTT führt Rezept aus
• IFTTT sendet einen xmlrpc-Request an WordPress
• WordPress ruft Actions xmlrpc_call auf
• Meine eigene xmlrpc_call-Action wird ausgeführt
• Request wird untersucht und entschieden, ob dieser relevant ist, denn nicht jeder xmlrpc-Request stammt von IFTTT
• Instagram-Daten (URLs, Beschreibung) werden ausgelesen
• Instagram-Bild wird heruntergeladen
• Instagram-Bild wird in Medienbibliothek importiert
• Metadaten werden zu dem Bild angelegt (Beschreibung, URL der Instagram-Seite des Bildes)
• Antwort für IFTTT wird erstellt (XML-Antwort mit HTTP-Code 200)
• Prozess wird abgebrochen, damit WordPress keinen neuen Beitrag erzeugt

Dieser Prozess lässt sich in zwei Unterprozesse aufteilen, die den genannten Plugins entsprechen.

Das Plugin ifttt-bridge ist für die Entgegennahme und Aufbereitung des IFTTT-Requests zuständig und sorgt dafür, dass der Standard-Prozess nicht zur Ausführung kommt.

Das Plugin ifttt-instagram-gallery übernimmt den Instagram-Part, also das Herunterladen des Bildes, das Importieren in die Medienbibliothek und die Anlage der Metadaten.

Verbunden sind beide Plugins, dadurch, dass ifttt-bridge eine WordPress-Action ifttt-bridge aufruft. Die IFTTT-Daten werden als Parameter übergeben.

Die Aufspaltung des Prozesses in zwei Plugins ermöglich WordPress-Entwicklern auf Basis der ifttt-bridge weitere Plugins zu entwickeln, die IFTTT-Daten verarbeiten.

Konfiguration in IFTTT

Damit das Plugin ifttt-instagram-gallery alle benötigten Daten bekommt, müssen diese in IFTTT in die Formularfelder eingetragen werden. Der IFTTT-WordPress-Channel bietet Felder für die Anlage eines Blogbeitrags (Title, Body), auf die Instagram-Daten verteilt werden. Die Bildbeschreibung (Caption) wird als Title übertragen, während die URLs per JSON-Notation  über das Body-Feld übermittelt werden. Ich habe mein IFTTT-Rezept dazu veröffentlicht: https://ifttt.com/recipes/195858-if-i-create-a-instagram-photo-then-create-the-photo-in-my-ifttt-instagram-gallery-via-ifttt-bridge.

Darstellung der Bilder

Für die Darstellung besteht ein Widget, ein Shortcode sowie eine PHP-Funktion. Über die erwähnten Metadaten können die Instagram-Bilder in der Medienbibliothek identifiziert werden. Bei der Darstellung wird die ursprüngliche Bildbeschreibung als Tooltip verwendet und die Bilder verlinken auf das entsprechende Bild in Instagram.

Fazit

Ich wollte diesen Artikel nutzen, um meine Motivation zur Entwicklung der Plugins zu erläutern.

Bezüglich der Instagram-Bilder habe ich für mich eine tolle Lösung gefunden. Ich setze diese auf meinem Reiseblog travel.bjoerne.com ein. Die Bilder haben die richtige Größe und die Darstellung ist genau so, wie ich sie mir vorgestellt habe.

Die (eher technische) Bridge ermöglich mir selbst und anderen Entwicklern, weitere Ideen umzusetzen, die auf IFTTT aufbauen, ohne dass dieser Teil neu entwickelt werden müsste. Mal schauen, ob sich also zukünftig weitere Plugins zur ifttt-bridge-Familie hinzugesellen. Ich würde mich freuen und biete gerne meine Hilfe dabei an.

 

Lust auf mehr? Als Experte für WordPress und individuelle WordPress-Entwicklung kann ich Sie in Ihren Projekten unterstützen. Melden Sie sich gerne bei mir.