Eigenen Instagram Feed auf der Webseite nutzen

Instagram hat die API durch eine neue Version ersetzt. Der hier beschriebene Weg ist daher nicht mehr so direkt nutzbar.

Wer sich schon mal mit der Instagram API auseinander gesetzt hat, wird bemerkt haben, dass die Hürde für einen Zugang extrem hoch sind (Stand Januar 2019). Neben einem großen Formular müssen alle Funktionen in einem Video gezeigt werden und es kann ein Interview folgen.

Die Themes Schmiede Pixel Union hat hier Abhilfe geschaffen. Normal gibt ein User z.B. einer App bei Instagram die Rechte auf bestimmte Inhalte oder Aktionen zuzugreifen. Die App bekommt von Instagram darauf hin einen AccessToken, mit dem Aktionen im Namen des Users ausgeführt werden können.

Tool link

Das Tool Instagram Access Token Generator ermöglicht dem Tool das Recht einzuräumen, den eigenen Fotofeed abzufragen. Die Antwort von Instagram in Form des AccessToken gibt das Tool zurück. Mit diesem kann die API zum Abfragen des eigenen Bilderfeeds genutzt werden.

API link

Über die Instagram REST API können im Anschluss die Bilder abgerufen werden. Der Platzhalter TOKEN muss dabei durch den AccessToken ersetzt werden. Ein Beispielauszug des JSON ist unten zu finden.

https://api.instagram.com/v1/users/self/media/recent/?access_token=TOKEN

Bash Command zum Herunterladen link

Ich habe mir einen Bash Command gebaut, der mir die Bilder herunterlädt. curl läd die JSON herunter, jq extrahiert das data Array und gibt für jedes Foto die ID und URL als Argument zurück. Mit xargs übergebe ich die 2 Argumente wieder an einen curl Befehl, der das Bild herunterlädt und nach der ID benennt.

curl -s "https://api.instagram.com/v1/us..." |\ 
     jq -r '.data[] | (.id, .images.standard_resolution.url)' |\ 
     xargs -n 2 curl -o

Zu beachten ist, dass je nach Bash oder Betriebssystem das -o evtl. groß geschrieben werden muss.

JSON link

Das JSON was zurück kommt enthält pagination Links weitere Bilder nachzuladen. Im data Array befinden sich alle Bilder inkl. User, verschiedenen Auflösungen, Beschreibung und Ort. Die in der Beschreibung vorkommenden Tags werden noch einmal extra aufgelistet.

{
  "pagination": {
    "next_max_id": "XXXXXXXXX_XXXXXXXXX",
    "next_url": "https://api.instagram.com/v1/users/XXXX/media/recent?access_token=XXXXXXXXX&max_id=XXXXXXXXX_XXXXXXXXX"
  },
  "data": [
    {
      "id": "XXXXXXXXX_XXXXXXXXX",
      "user": {
        "id": "XXXXXXXXX",
        "full_name": "Philipp Kübler",
        "profile_picture": "https://scontent.XXXX.jpg?_nc_ht=scontent.cdninstagram.com",
        "username": "XXXXXXXX"
      },
      "images": {
        "thumbnail": {
          "width": 150,
          "height": 150,
          "url": "https://scontent.XXXX.jpg?_nc_ht=scontent.cdninstagram.com"
        },
        "low_resolution": {
          "width": 320,
          "height": 320,
          "url": "https://scontent.XXXX.jpg?_nc_ht=scontent.cdninstagram.com"
        },
        "standard_resolution": {
          "width": 640,
          "height": 640,
          "url": "https://scontent.XXXX.jpg?_nc_ht=scontent.cdninstagram.com"
        }
      },
      "created_time": "1554348477",
      "caption": {
        "id": "18016544512042120",
        "text": "Hier steht der #Text unser dem #Bild.",
        "created_time": "1554348477",
        "from": {
          "id": "XXXXXXXXX",
          "full_name": "Philipp Kübler",
          "profile_picture": "https://scontent.XXXX.jpg?_nc_ht=scontent.cdninstagram.com",
          "username": "XXXXXXXX"
        }
      },
      "user_has_liked": false,
      "likes": {
        "count": 483
      },
      "tags": [
        "text",
        "bild",
      ],
      "filter": "Normal",
      "comments": {
        "count": 1
      },
      "type": "image",
      "link": "https://www.instagram.com/p/XXXXXXXXXXXX/",
      "location": {
        "latitude": 1.7753,
        "longitude": 1.0828,
        "name": "Stadt, Germany",
        "id": 228745733
      },
      "attribution": null,
      "users_in_photo": [
        {
          "user": {
            "username": "lego"
          },
          "position": {
            "x": 0.47918594000000003,
            "y": 0.48299062000000004
          }
        }
      ]
    },
  ],
  "meta": {
    "code": 200
  }
}