Instagram-Plattform

Instagram-Beitrag einbetten

Du kannst den oEmbed-Endpunkt von Instagram abfragen, um den HTML-Einbettungscode und grundlegende Metadaten eines Instagram-Beitrags zu erhalten und den Beitrag auf einer anderen Webseite oder in einer anderen App anzuzeigen. Das Posten von Fotos, Videos, Reels und Feeds wird unterstützt.

Informationen zum Abrufen des Einbettungscodes eines öffentlichen Instagram-Beitrags oder -Profils findest du im Instagram-Hilfebereich.

Häufige Anwendungsfälle

  • Einbetten eines Beitrags in einem Blog
  • Einbetten eines Beitrags auf einer Webseite
  • Anzeigen eines Beitrags in einem Content-Management-System
  • Anzeigen eines Beitrags in einer Nachrichten-App

Anforderungen

Bei diesem Leitfaden wird vorausgesetzt, dass du ein*eine registrierte*r Meta-Entwickler*in bist und eine Meta-App erstellt hast.

Voraussetzungen:

Zugriffsebenen

Zugriffstoken

Basis-URL

Alle Endpunkte können über den graph.facebook.com-Host aufgerufen werden.

Endpunkte

Funktionen

Einschränkungen

  • Der oEmbed-Endpunkt von Instagram ist nur dazu gedacht, um Instagram-Inhalte in Websites und Apps einzubetten. Er darf nicht für andere Zwecke verwendet werden. Es ist strengstens untersagt, Metadaten und Seiten-, Beitrags- oder Videoinhalte (oder deren Ableitungen) vom Endpunkt für andere Zwecke zu verwenden, als eine Frontend-Ansicht der Seite, des Beitrags oder des Videos bereitzustellen. Dieses Verbot umfasst das Verwenden, Bearbeiten, Extrahieren oder die dauerhafte Speicherung der Metadaten und Inhalte, insbesondere das Ableiten von Informationen über Seiten, Beiträge und Videos aus den Metadaten zu Analysezwecken.
  • Beiträge in privaten, inaktiven und altersbeschränkten Instagram-Konten werden nicht unterstützt.
  • Konten mit deaktivierten Einbettungen werden nicht unterstützt.
  • Stories werden nicht unterstützt.
  • Shadow DOM wird nicht unterstützt.

Durchsatzratenbegrenzungen

Durchsatzratenbegrenzungen hängen von der Art des Zugriffstokens ab, den deine App in der jeweiligen Anfrage enthält.

Durchsatzratenbegrenzungen für App-Token

Apps, die App-Zugriffstoken verwenden, können innerhalb von 24 Stunden bis zu 5 Millionen Anfragen durchführen.

Durchsatzratenbegrenzungen für Client Token

Durchsatzratenbegrenzungen für Client Token sind erheblich niedriger als Durchsatzratenbegrenzungen für App-Token. Wir geben die tatsächliche Grenze nicht an, da sie sich je nach deinen App-Aktivitäten ändert. Du kannst jedoch davon ausgehen, dass deine App die Grenze nur dann erreicht, wenn sie sich wie ein Bot verhält und etwa Tausende von Anfragen im Batch sendet oder Tausende von Anfragen pro Agent oder App-Nutzer*in sendet.

HTML-Einbettungscode abrufen

Du kannst HTML-Einbettungscode programmgesteuert oder in der Instagram-App abrufen.

Um den HTML-Einbettungscode eines Instagram-Beitrags programmgesteuert abzurufen, sende eine Anfrage an:

GET /instagram_oembed?url=<URL_OF_THE_POST>&access_token=<ACCESS_TOKEN>

Ersetze <URL_OF_THE_POST> durch die URL des Instagram-Beitrags, den du abfragen möchtest, und <ACCESS_TOKEN> durch deinen App- oder Client-Zugriffstoken oder übergib ihn in einem Authorization-HTTP-Header an uns.

Authorization: Bearer <ACCESS_TOKEN>

Wenn du einen Client-Zugriffstoken verwendest, denke daran, ihn unter Verwendung eines Senkrechtstrichs mit deiner Meta-App-ID zu kombinieren. Ansonsten schlägt die Anfrage fehl.

Ist die Anfrage erfolgreich, antwortet die API mit einem JSON-Objekt, das den HTML-Einbettungscode des Beitrags und zusätzliche Daten enthält. Der HTML-Einbettungscode wird der Eigenschaft html zugewiesen.

In der Referenz zu oEmbed von Instagram findest du eine Liste der Abfrage-String-Parameter, die du einschließen kannst, um die Anfrage zu erweitern. Du kannst auch den Abfrage-String-Parameter fields einschließen, um anzugeben, welche Felder zurückgegeben werden sollen. Wird keine Angabe gemacht, sind in der Antwort alle Standardfelder enthalten.

Beispielanfragen

curl -X GET \
  "https://graph.facebook.com/v21.0/instagram_oembed?url=https://www.instagram.com/p/fA9uwTtkSN/&access_token=IGQVJ..."


curl -i -X GET \
     --header "Authorization: Bearer 96481..." \
     "https://graph.facebook.com/v21.0/instagram_oembed?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FfA9uwTtkSN"

Beispielantwort

Einige Werte sind zur besseren Lesbarkeit mit Auslassungszeichen (...) abgeschnitten.

{
  "version": "1.0",
  "author_name": "diegoquinteiro",
  "provider_name": "Instagram",
  "provider_url": "https://www.instagram.com/",
  "type": "rich",
  "width": 658,
  "html": "<blockquote class=\"instagram-media\" data-instgrm-ca...",
  "thumbnail_width": 640,
  "thumbnail_height": 640
}

URL-Formate

Der Abfrage-String-Parameter url akzeptiert die folgenden URL-Formate:

https://www.instagram.com/p/{media-shortcode}/
https://www.instagram.com/tv/{media-shortcode}/https://www.instagram.com/{username}/guide/{slug}/{guide_id}

JS einbetten

Der HTML-Einbettungscode enthält eine Referenz zur JavaScript-Bibliothek embed.js von Instagram. Wenn die Bibliothek geladen wird, scannt sie die Seite nach dem Beitrags-HTML-Code und generiert den vollständig gerenderten Beitrag. Wenn du die Bibliothek separat laden möchtest, schließe den Abfrage-String-Parameter omitscript=true in deine Abfrage ein. Um den HTML-Einbettungscode manuell zu initialisieren, rufe die Funktion instgrm.Embeds.process() auf, nachdem die Bibliothek geladen wurde.

Beitragsgröße

Der eingebettete Beitrag ist responsiv und wird an die Größe des Containers angepasst. Das bedeutet, dass die Höhe je nach Containerbreite und Länge der Bildunterschrift variiert. Du kannst die maximale Breite festlegen, indem du den Abfrage-String-Parameter maxwidth in deine Abfrage einschließt.

Miniaturbilder abrufen

Wir empfehlen dir, nach Möglichkeit den gesamten HTML-Einbettungscode des Beitrags zu rendern. Wenn dir das nicht möglich ist, kannst du die URL des Miniaturbilds eines Beitrags abrufen und stattdessen dieses rendern. Wenn du das tust, musst du aber neben dem Bild eine klare Attribution angeben. Dazu zählen eine Attribution des ursprünglichen Autors und von Instagram sowie ein Link zum Instagram-Beitrag, den du abfragst.

Um die URL des Miniaturbilds und die Attributionsinformationen eines Beitrags abzurufen, sende eine Anfrage an:

GET /instagram_oembed
  ?url=<URL_OF_THE_POST>
  &maxwidth=<MAX_WIDTH>
  &fields=thumbnail_url,author_name,provider_name,provider_url
  &access_token=<ACCESS_TOKEN>

Ersetze <URL_OF_THE_POST> durch die URL des Instagram-Beitrags, den du abfragen möchtest, <MAX_WIDTH> durch die maximale Größe des Miniaturbilds, das du rendern möchtest, und <ACCESS_TOKEN> durch dein App- oder Client-Zugriffstoken.

Beispielanfrage

curl -i -X GET \
  "https://graph.facebook.com/v21.0/instagram_oembed?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FfA9uwTtkSN&maxwidth=320&fields=thumbnail_url%2Cauthor_name%2Cprovider_name%2Cprovider_url&access_token=96481..."

Beispielantwort

Einige Werte sind zur besseren Lesbarkeit mit Auslassungszeichen (...) abgeschnitten.

{
  "thumbnail_url": "https://scontent.cdninstagram.com/v/t51.288...",
  "author_name": "diegoquinteiro",
  "provider_name": "Instagram",
  "provider_url": "https://www.instagram.com/"
}

App-Review-Einreichung

Wenn du eine App zur Review einreichst, verwende im Formularfeld Teile uns mit, weshalb du Oembed Read anforderst > Bitte gib eine URL an, mit der wir Oembed Read testen können den oEmbed-Endpunkt von Instagram, um den HTML-Einbettungscode für einen öffentlichen Beitrag auf unserer offiziellen Facebook-Seite oder Instagram-Seite abzurufen. Füge anschließend den zurückgegebenen HTML-Einbettungscode an der Stelle ein, an der der oEmbed-Inhalt angezeigt werden soll, und gib die URL dieser Seite in das Formularfeld ein.

Sobald du eine Genehmigung für die oEmbed Read-Funktion erhalten hast, kannst du deine eigenen Seiten, Beiträge oder Videos einbetten, indem du die entsprechenden URLs verwendest.