Alles, was Sie über die Instagram API-Integration wissen müssen

Avatar of Emerson This
Emerson This am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Das Folgende ist ein Gastbeitrag von Emerson This. Dies ist eine Anleitung für Webentwickler, die daran interessiert sind, Instagram-Inhalte auf Websites zu integrieren. Es ist erst wenige Monate her, dass Instagram die Möglichkeiten seiner API geändert hat. Dieser Beitrag erklärt daher, was jetzt möglich ist und gibt Beispiele für diese Möglichkeiten.

Teil Eins: Die Instagram-API in drei Minuten verstehen

Um mit der Instagram-API zu arbeiten, müssen Sie früher oder später den nebulösen Registrierungs- und Autorisierungsprozess für API-Clients durchlaufen. Das Verständnis der API-Zugriffsbeschränkungen kann viel Zeitverschwendung verhindern, da sie oft zu unerwarteten Daten führen und nicht zu direkten Authentifizierungsfehlern, die leichter zu diagnostizieren sind.

Die berüchtigten API-Beschränkungen vom Juni 2016

Am 1. Juni 2016 leuchteten weltweit Fehlermeldungen in der Konsole auf, als Instagram den Zugriff auf seine API erheblich einschränkte. Das erste, was man verstehen muss, ist, dass dies eine bewusste Geschäftsentscheidung von Instagram war, die darauf abzielte, die Nutzung seiner API für verschiedene Zwecke zu verhindern. Wenn man diese Tatsache versteht, werden die Fehlermeldungen in der Konsole nicht behoben, aber die Einschränkungen sind intuitiver zu umgehen, wenn man ihre Absicht versteht.

Sandbox-Modus vs. „Live“-Modus

Der Torwächter zwischen Entwicklern und vollem API-Zugriff wird Sandbox-Modus genannt. Die Dokumentation präsentiert ihn als einen vorübergehenden Schritt im Entwicklungsprozess, aber die überwiegende Mehrheit der Projekte wird den Sandbox-Modus niemals verlassen, da Instagram vollen Zugriff auf seine API nur für eine Handvoll sehr spezifischer Anwendungsfälle gewährt.

  • „Meine App ermöglicht es Benutzern, sich mit Instagram anzumelden und ihre eigenen Inhalte zu teilen.“
  • „Mein Produkt hilft Marken und Werbetreibenden, ihr Publikum und ihre Medienrechte zu verstehen und zu verwalten.“
  • „Mein Produkt hilft Sendern und Verlagen, Inhalte zu entdecken, digitale Rechte an Medien zu erwerben und Medien mit ordnungsgemäßer Namensnennung zu teilen.“

Wenn Sie die Instagram-Lords nicht davon überzeugen können, dass Ihre App einem dieser spezifischen Zwecke dient, wird sie abgelehnt, wenn Sie sie zur „Live-Schaltung“ einreichen. Aus diesem Grund mag es intuitiver sein, sie als „Seitenlinien-Modus“ zu betrachten.

Was können Sie im Sandbox-Modus tun?

Sandbox-Modus bedeutet, dass Ihre API-Aufrufe zu einer magischen Insel gehen, auf der nur Ihre letzten 20 Beiträge existieren. Das ist alles. Niemand sonst existiert auf der Insel, daher werden Sie keine Ergebnisse für etwas sehen, das Sie früher gepostet haben, oder von anderen Instagram-Nutzern, selbst wenn diese Inhalte öffentlich sind. Sie können zusätzliche „Sandbox-Benutzer“ einladen, die sie zu Ihrer magischen Insel hinzufügen, aber genau wie bei Ihnen existieren auch von ihnen nur die letzten 20 Beiträge auf der Insel.

Die Sandbox-Insel: nur die ersten 20 Beiträge

Die Insel wird niemals sehr groß, da Sie nur insgesamt zehn Sandbox-Benutzer haben können. Lassen Sie dies einen Moment auf sich wirken. Alles, was Sie tun möchten und das Inhalte aus der allgemeinen Öffentlichkeit betrifft, ist im Sandbox-Modus nicht möglich.

Sandbox-Modus vs. Scopes

Eine der häufigsten Verwechslungen bezüglich der neuen Einschränkungen ist die Vermischung von Scopes und Sandbox-Modus. Der Sandbox-Modus bestimmt, was Ihre API-Anfragen „sehen“ können, und leitet sie zur magischen Insel um. Scopes bestimmen, wofür ein bestimmter Token verwendet werden kann und wofür nicht. Jeder Token beginnt automatisch mit dem `basic`-Scope. Ein Token mit nur dem `basic`-Scope kann sehr wenig tun, egal ob im Sandbox-Modus oder im Live-Modus. Um auch öffentliche Inhalte anzuzeigen, müssen Sie den zusätzlichen `public_content`-Scope anfordern. Wo der Sandbox-Modus ins Spiel kommt, ist die Bestimmung, was in „öffentlichen Inhalten“ enthalten ist. Im Sandbox-Modus werden nur die Beiträge auf der magischen Insel einbezogen, während eine Live-App alles sehen kann, was auf Instagram öffentlich ist (in der realen Welt).

Die häufigste Fehlannahme ist, dass eine App genehmigt werden muss, um „live zu gehen“, um Scopes anfordern zu können. Das ist falsch. Zum Beispiel benötigen Sie im Sandbox-Modus einen Token mit dem `public_content`-Scope, um Beiträge Ihrer anderen Sandbox-Benutzer sehen zu können, genau wie genehmigte („Live“)-Apps es tun1. Technisch gesehen gibt es nichts, was eine Live-App tun kann, das nicht im Sandbox-Modus getan werden kann, solange es sich nur um Benutzer und Inhalte handelt, die auf der magischen Insel leben.

Vorsicht vor alten Dokumentationen!

Es ist auch erwähnenswert, dass vor Juni 2016 viele API-Aufrufe eine Authentifizierung nur mit einer `client_id` von einem registrierten Client erlaubten. Jetzt benötigen *alle* Anfragen einen `access_token`. Es gibt jedoch immer noch viele Plugins, Dokumentationen und Tutorials von vor dem 1. Juni, die noch nicht entsprechend aktualisiert wurden.

Teil Zwei zeigt, wie man innerhalb der API-Beschränkungen arbeitet, um die beliebten Instagram-Integrationen einzurichten, die im Sandbox-Modus noch möglich sind.

Teil Zwei: Wie man die Instagram-API auf Websites verwendet

Registrierung eines API-Clients

Bevor Sie etwas mit der Instagram-API tun können, müssen Sie sich als Entwickler registrieren und einen API-Client registrieren. Wenn Sie noch nicht als Entwickler registriert sind, werden Sie aufgefordert, dies zu tun, bevor Sie mit der Registrierung eines neuen API-Clients fortfahren.

Instagrams Benutzeroberfläche zur Registrierung neuer Clients

Der heikelste Teil der Konfiguration eines API-Clients ist die Eingabe der korrekten Werte im Feld Gültige Weiterleitungs-URIs. Dies ist eine Whitelist von URIs, die Instagram während des Authentifizierungs-Workflows verwendet. Der URI-Abgleichsalgorithmus ist sehr streng. Sie müssen also sicherstellen, dass eine der hier eingegebenen URIs *exakt* mit der URI übereinstimmt, die Sie im Parameter `redirect_uri` bei der Anforderung eines Tokens übergeben (weiter unten beschrieben). Wenn Sie beispielsweise `http://mysite.com/oauth` eingeben und dann versuchen, ein Token mit `mysite.com/oauth` oder `http://mysite.com/oauth/` anzufordern, schlägt dies fehl.

Ein registrierter API-Client erhält eine `client ID` und ein `client secret`. Wie der Name schon sagt, sollten Sie Ihr Client-Secret nicht weitergeben. Sie werden beide verwenden, um Tokens von Instagram anzufordern.

Generierung eines Zugriffstokens

Wie oben erwähnt, müssen Sie ein Token generieren, um Anfragen an die Instagram-API zu authentifizieren. Grundsätzlich gibt es zwei Möglichkeiten, dies zu tun: Sie können Tokens programmatisch oder manuell anfordern. Beide Ansätze erfordern, dass Sie zuvor einen API-Client registriert haben (wie oben beschrieben).

Instagram-Tokens programmatisch mit dem OAuth 2.0-Workflow generieren

Instagrams Implementierung von OAuth 2.0 ist sehr standardmäßig. Wenn Sie also Erfahrung mit diesem Authentifizierungsmuster haben, wird es Ihnen sehr vertraut vorkommen. Es gibt gute Dokumentationen in den offiziellen Dokumenten, die die genaue Abfolge von Anfragen und Parametern durchlaufen. Hier ist eine kurze Zusammenfassung:

  1. Leiten Sie Ihren Benutzer zur Instagram-Autorisierungs-URL weiter
  2. Der Benutzer erteilt die Autorisierung
  3. Instagram leitet den Benutzer mit einem Code zurück zu Ihrer Website
  4. Senden Sie den Code zurück an Instagram im Austausch für das Token

Instagram-Tokens manuell generieren

In Situationen, in denen Sie nicht dynamisch auf die API als verschiedene Benutzer zugreifen müssen, können Sie ein Token manuell generieren.

Wenn Sie ein Tool zum Ausführen von POST-Anfragen haben und einen öffentlichen Endpunkt eingerichtet haben, um die Weiterleitung von Instagram zu empfangen, *könnten* Sie ein Token generieren, indem Sie jede Anfrage in der vorherigen Sequenz manuell ausführen. Dies kann jedoch mühsam sein, insbesondere für ein kleines Projekt, bei dem Sie nur ein Token benötigen.

Der einfachste Weg, dies zu tun, ist die Verwendung eines Token-Generierungs-Tools wie diesem. Vor den Einschränkungen vom Juni 2016 gab es viele solcher Ressourcen zur Auswahl, aber Sie werden feststellen, dass viele von ihnen mit Beginn der Einschränkungen kaputtgegangen sind. InstagramToken.com funktioniert immer noch und ermöglicht es Ihnen auch, Tokens mit spezifischen Scopes (in Teil Eins erklärt) zu generieren, was wichtig ist, wenn Sie etwas anderes tun möchten, als Ihre eigenen Inhalte abzurufen.

So laden Sie Sandbox-Benutzer ein

Sandbox-Benutzer sind andere Instagram-Benutzer, die Sie zu Ihrem Client einladen. Der Hauptgrund dafür ist, dass Ihre App dann zusätzlich zu Ihren eigenen die letzten zwanzig Beiträge von ihnen „sehen“ kann. Dies wird unter Sandbox-Modus vs. „Live“-Modus oben erklärt.

Sie laden Sandbox-Benutzer über den Tab Sandbox in der Benutzeroberfläche zur Bearbeitung von Clients ein.

Sandbox-Tab der Benutzeroberfläche zur Bearbeitung von Clients

Ein paar kurze Anmerkungen zum Verhalten beim Einladen von Sandbox-Benutzern (gültig ab 28. August 2016):

  1. Eingeladene erhalten keine Benachrichtigung, wenn Sie sie eingeladen haben2. Sie müssen sie bitten, sich bei Instagram anzumelden und dann diese Seite zu besuchen. Dort müssen sie ein kurzes, vages Formular ausfüllen, um sich als Entwickler zu registrieren. Wenn sie keine Entwickler sind, werden sie von diesen Fragen verwirrt sein. Glücklicherweise scheinen die Antworten keine Rolle zu spielen.
  2. Es kann auch sein, dass sie Ihre Einladung gar nicht annehmen müssen. Derzeit müssen „Sandbox-Benutzer“ die Einladung nicht annehmen, um ihre Inhalte über einen Client im Sandbox-Modus anzeigen zu können. Es scheint zu funktionieren, auch während ihre Einladung noch „ausstehend“ ist.

Eine kurze Sicherheitswarnung: Es ist im Allgemeinen keine gute Praxis, clientseitige Anfragen mit einem API-Token zu stellen, da es wie ein Passwort ist und von einem böswilligen Benutzer leicht aus dem Quellcode gelesen werden kann. Im Sandbox-Modus können die Tokens jedoch nur sehr wenig tun, daher sind die Risiken ziemlich gering.

So finden Sie Ihre Benutzer-ID

Es ist überraschend schwierig, die numerische ID eines Benutzers zu finden, die für viele beliebte Arten von Anfragen notwendig ist. Es gab eine Handvoll Online-Ressourcen, die dazu dienten, dies zu erleichtern, aber die meisten waren zum Zeitpunkt des Schreibens dieses Artikels kaputt. Smash Balloon hat ein kostenloses Tool, das im Moment zu funktionieren scheint. Es ist auch nicht sehr schwierig, eine ID selbst zu finden, wenn man weiß, wo man suchen muss.Jetzt ist auch dieses tot. FindInstaID scheint zu funktionieren.

Um die numerische Instagram-ID eines Benutzers zu finden, besuchen Sie zuerst die öffentliche Instagram-Seite des Benutzers: `https://instagram.com/`. Zeigen Sie den Quellcode dieser Seite an und suchen Sie den großen ` .

` am Ende Ihrer Seite ein. Fügen Sie auch `
` ein, wo auch immer der Bilderstrom erscheinen soll.

  <div id="instafeed"></div>
  <script src="path/to/instafeed.min.js"></script>
</body>

Als Nächstes müssen Sie Instafeed mit einem weiteren kleinen Skript initialisieren, das ihm mitteilt, welche Beiträge Sie anzeigen möchten.

  <div id="instafeed"></div>
  <script src="path/to/instafeed.min.js"></script>
  <script>
    var feed = new Instafeed({
      get: 'user',
      userId: USER_ID, // Ex: 1374300081
      accessToken: 'YOUR_ACCESS_TOKEN'
    });
    feed.run();
  </script>
</body>

Dies kann verwendet werden, um die letzten 20 Beiträge von allen Benutzern anzuzeigen, die die Einladung angenommen haben, Sandbox-Benutzer für Ihren API-Client zu sein.

Warum Sie keine Liste von Tags mehr anzeigen können (wirklich)

Technisch gesehen *können* Sie Beiträge mit einem bestimmten Tag anfordern. Nichts hindert Sie daran, den gleichen Workflow wie oben gezeigt zu verwenden. Instafeed unterstützt Tag-Suchen bereits, sodass Sie einfach die folgenden Einstellungen übergeben könnten.

var feed = new Instafeed({
  get: 'tagged',
  tagName: 'TAG', Ex: // 'cat'
  accessToken: 'YOUR_ACCESS_TOKEN'
});

Wenn Sie sich jedoch im Sandbox-Modus befinden, werden Sie wahrscheinlich nicht die erwarteten Ergebnisse sehen!

Tags existieren, weil sie Inhalte von verschiedenen Benutzern gruppieren. Denken Sie aus Teil Eins daran, dass der Sandbox-Modus bedeutet, dass Ihre API-Anfragen zu einer magischen Insel umgeleitet werden, auf der nur die letzten 20 Beiträge von Ihnen und Ihren wenigen Sandbox-Benutzern existieren. Das bedeutet, wenn Sie eine Anfrage nach Beiträgen mit dem Tag #cat (der ca. 90 Millionen Beiträge hat) stellen, aber Sie und Ihre Sandbox-Benutzer diesen Tag nicht innerhalb Ihrer letzten 20 Beiträge verwendet haben, wird die API-Anfrage erfolgreich sein, aber null Ergebnisse zurückgeben.

Die Quintessenz ist, dass der Tag-Feed wahrscheinlich nur dann aussagekräftig ist, wenn Sie einen Tag anzeigen, der von Ihnen und Ihren Sandbox-Benutzern einzigartig und häufig verwendet wird.

So betten Sie einen einzelnen Beitrag auf Ihrer Website ein

Instagram möchte, dass Sie ihr offizielles Einbettungs-Widget oder eines ihrer Einbettungs-Endpunkte verwenden, die kein Zugriffstoken benötigen.

Der einfachste Weg, den Code-Snippet für das Einbettungs-Widget zu erhalten, ist über die Schaltfläche `[· · ·]` in der unteren Ecke eines Beitrags. Klicken Sie darauf, um den Code-Snippet anzuzeigen, den Sie in Ihre HTML kopieren/einfügen können.

Der Einbettungs-Code für einzelne Instagram-Fotos befindet sich in diesem Menü.

Der Snippet gibt etwas wie das hier aus.

So sieht das Instagram-Widget für einzelne Fotos aus.

Wenn Sie denken: „Aber das passt nicht zum Rest meiner Website.“ Das ist der Punkt. Es ist kein Zufall, dass die API nicht einfach nur eine URL zu einer Bilddatei zurückgibt. ;)

So fügen Sie einen „Gefällt mir“- oder „Folgen“-Button hinzu

Dies fällt in die gleiche Kategorie wie der Tag-Feed oben. Technisch gesehen *können* Sie im Sandbox-Modus Likes hinzufügen/entfernen, aber es gibt nur wenige Anwendungsfälle, die viel Sinn ergeben, da Ihr API-Zugriff im Sandbox-Modus auf Ihre Sandbox-Benutzer beschränkt ist. Das bedeutet, wenn Sie einen „Like“- oder „Follow“-Button auf Ihrer Website hinzufügen, können nur Ihre Sandbox-Benutzer gegenseitig Beiträge liken.

Wenn die Einschränkungen des Sandbox-Modus kein Dealbreaker sind, dann ist ein Like-Button so einfach wie das Senden einer POST-Anfrage an den Endpunkt `/media//likes`. Das folgende Beispiel verwendet jQuery, um die HTTP-Anfrage zu stellen, aber Sie können Ihr bevorzugtes Tool verwenden.

<button id="like-btn" data-media-id="123456789">Like</button>

<script>
  function sendLike(event) {
    // Find the media ID in a data attribute for the button
    var mediaId = $(event.target).data('media-id');
    var token = 'YOUR_TOKEN';

    // Build the url
    var url = 'https://api.instagram.com/v1/media/';
    url += mediaId;
    url += '/likes?access_token=' + token;

    // Make the request and handle the response
    $.post(url).then(function(){
      // success
      function() { console.log('like request succeeded'); },
      // fail
      function() { console.log('like request failed'); }
    });
  }
  $('#like-btn').click(sendLike);
</script>

In diesem Code registrieren wir einen Listener für ein Klickereignis auf den Button. Die Callback-Funktion `sendLike()` findet die Media-ID in einem Data-Attribut des Buttons und verwendet sie, um die URL zu erstellen, bevor die Anfrage gesendet wird.

Fazit

Wenn Sie bis hierher gekommen sind, verstehen Sie die Einschränkungen der Instagram-API und wissen, welche Integrationen im restriktiven Sandbox-Modus möglich sind. Wenn ich etwas verpasst habe, hinterlassen Sie einen Kommentar oder finden Sie mich auf Twitter: @emersonthis.


1 Ich vermute, diese Verwirrung rührt daher, dass die Client-Management-Oberfläche von Instagram einen Tab hat, der so aussieht, als wäre er für die Anforderung von Scopes gedacht, der aber im Sandbox-Modus deaktiviert ist. So werden Scopes nicht gewährt. Vielmehr ist dies die Art und Weise, wie *Live*-Apps von Instagram autorisiert werden, um bestimmte Scopes (aka Berechtigungen) von Benutzern anzufordern.

2 Es ist möglich, dass Benachrichtigungen als Spam gefiltert wurden oder dass Instagram dies vergessen hat zu implementieren.