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
ifttt_regen_beispiel

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.

widget

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.

ifttt-recipe-content

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.

 

bjoerne_com_bjoern_weinbrenner_softwareentwickler_icon_leistungen_02

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.

2017-01-28T14:22:46+00:00 16.08.2014|Tags: , , , |13 Comments

13 Kommentare

  1. […] 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. […]

  2. Thomas 21. Januar 2015 um 14:07 Uhr- Antworten

    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

  3. Björn Weinbrenner 21. Januar 2015 um 16:58 Uhr- Antworten

    Hallo Thomas!

    Auf meinem Reiseblog habe ich exakt die beschriebene Lösung eingesetzt.

    Viele Grüße
    Björn

  4. Rory 29. März 2015 um 3:47 Uhr- Antworten

    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.

  5. Erli 6. April 2015 um 13:34 Uhr- Antworten

    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!

    • Björn Weinbrenner 8. April 2015 um 15:13 Uhr- Antworten

      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

  6. Hans 7. Juni 2016 um 19:40 Uhr- Antworten

    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

  7. Suitbert 13. Oktober 2016 um 8:59 Uhr- Antworten

    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

    • bjoerne 13. Oktober 2016 um 9:08 Uhr- Antworten

      Hallo Suitbert!
      Die möglichen Shortcode-Attribute sind auf https://wordpress.org/plugins/ifttt-instagram-gallery/ aufgelistet. Aktuell sind das

      • wrapper_width
      • images_per_row
      • image_size (thumbnail|medium|large|full)
      • num_of_images
      • random (true|false)

      Hilft dir das weiter?
      Viele Grüße
      Björn

      • Suitbert 13. Oktober 2016 um 10:14 Uhr- Antworten

        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

  8. Dan Lockcuff 30. März 2018 um 1:51 Uhr- Antworten

    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?

Hinterlassen Sie einen Kommentar