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
Morgen früh Schirm einpacken? Nur eins von vielen Beispielen
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.
So werden Instagram-Bilder auf meinen Reiseblog dargestellt.
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:
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.
So sieht mein Instagram-WordPress-Rezept in IFTTT aus
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.
[…] and the WordPress features are nice but could use some work. Thanks to Germany-based developer bjoerne, looks like we may see some great new improvements to the IFTTT to WordPress bridge. […]
Hallo Björn,
danke für deine Ausführungen mit Instagram und der Bridge.
In deinem Fazit schreibst du, dass du auf deinem Reiseblog es anderst gelöst hast.
Wie hast du es dort mit den Bildern und den Beiträgen gelöst?
Gruß
Thomas
Hallo Thomas!
Auf meinem Reiseblog habe ich exakt die beschriebene Lösung eingesetzt.
Viele Grüße
Björn
Any way to pull past photos until new photos are added. I have a weekly show and post once a week to instagram. using this method I see a blank spot and no image feed until I post a new image.
Hi Roy!
With IFTTT it's not possible to re-trigger events which took place in the past. Thus, it's not possible to display old pictures with this approach. Sorry!
Regards
Björn
Hi Rory!
May be there is a solution. You could "like" old pictures, but I don't know if this solution works. See this discussion: https://wordpress.org/support/topic/if-i-like-a-photo-on-instagram-then-create-the-photo-on-my-ifttt-via-bridge.
Hallo!
Ich würde Dein Plugin gerne nutzen um Text aus IFTTT als WordPress-Beitrag zu posten. Ich kenne mich selbst in der Plugin-entwicklung nicht aus. gibt es bereits ein Plugin dafür? Oder hast du eine Idee, wie ich das schnell realisieren kann?
Viele Grüße!
Hallo Erli!
Hast du dir die Möglichkeiten angesehen, die IFTTT von Hause aus mitbringt? Eventuell reicht dir das schon aus und du brauchst kein Plugin für die weitere Verarbeitung.
Viele Grüße
Björn
Hallo Björn,
vielen Dank für deine Arbeit.
Habe deine Plugins installiert aber IFTTT schafft es nicht sich an meine WordPress Seite zu koppeln!
Bei der WordPress Registrierung auf der IFTTT Seite kriege ich immer den Fehler: "Live channel fields value is not a valid WordPress url
Unable to verify WordPress credentials. Please try again."
Keine Ahnung was ich falsch mache... bin mir ziemlich sicher das URL, User und Password richtig sind...
Hast du eine Idee?
Viele Grüße und vielen Dank,
Hans aus Italien
Die PlugsIns funtionieren prima, danke dafür! Ein Frage hätte ich aber: Wie kann ich bei Einbindung mit Shortcode das Layout beeinflussen (Größe der Bilder, Anzahl der Bilder) Gibt es dazu ein Beispiel-Snipet? Danke
Schöne Grüße
Suitbert
Hallo Suitbert!
Die möglichen Shortcode-Attribute sind auf https://wordpress.org/plugins/ifttt-instagram-gallery/ aufgelistet. Aktuell sind das
Hilft dir das weiter?
Viele Grüße
Björn
Hallo Björn,
ok, danke für die Info. Ich dachte, dass gilt nur für die Einbindung mittels PHP. Ich werde es mit den Shortcodes versuchen!
Schöne Grüße
Suitbert
Hey Björn,
Is there a way to pull pics from a specific hashtag and pull the URL from the Instagram caption and pass it for the URL of the picture in WordPress?
Ich weiß nicht, ob du mir helfen kannst. Ich bin ein totaler Laie!
Ich benutze seit 10 Jahren Evernote und schicke die Beiträge auf WordPress, wo ich ein völlig privates und kostenloses Blog mit Unterwebseiten betreibe.
Seit einiger Zeit kann ich meine Evernote Beiträge leider nur noch auf eine einzige Seite von WordPress schicken.
Nun startete ich deswegen den Versuch mit IFTTT, was spontan auch ein oder zweimal geklappt hat. Jetzt bekomme ich aber von IFTTT immer eine Meldung, dass mein WordPress offline sei. Ich habe keine Ahnung, was ich machen muss. Es ist zum Verzweifeln
Ich stecke leider nicht mehr in dem Thema drin. Nach der Entwicklung hat mein Anwendungsfall mit Instagram erstmal problemlos funktioniert, jetzt habe ich aber seit längerem keine Instagram-Bilder mehr erstellt.
Da müsstest du dich leider selbst reinfuchsen.