Seit dem 24. Oktober hat Facebook die Unterstützung für nicht authentifizierte WordPress-Einbettungen eingestellt. Wenn du also Facebook- und Instagram-Inhalte auf deiner WordPress-Seite einbindest, werden diese nicht mehr unterstützt.

Genauer gesagt werden die alten Facebook oEmbed-Endpunkte durch neue ersetzt, die eine Authentifizierung über Facebook erfordern. Da Facebook Instagram besitzt, gelten die gleichen Anforderungen auch für Instagram oEmbed Endpunkte.

In diesem Artikel berichten wir darüber, wie WordPress die Facebook- und Instagram oEmbed-Endpunkte verwendet, was aktualisiert wurde und wie du Dinge reparieren kannst, damit deine Einbettungen weiterhin so funktionieren, wie sie sollten.

Lasst uns loslegen!

Wie WordPress oEmbed verwendet, um Inhalte einzubetten

oEmbed ist ein Protokoll, das es Webseiten erlaubt, Inhalte von anderen Webseiten von Drittanbietern mit nur einer URL einzubetten. Es wurde in erster Linie entwickelt, um die Notwendigkeit zu vermeiden, HTML von anderen Sites zu kopieren und einzufügen. WordPress verwendet oEmbed, um eingebettete Inhalte (wie Fotos oder Videos) anzuzeigen.

Alles, was du tun musst, ist die URL der Ressource in den Inhaltsbereich zu platzieren, und WordPress wird sie automatisch in eine Einbettung umwandeln und eine Live-Vorschau des Inhalts anzeigen.

Einbetten von Inhalten mit nur einer URL in WordPress
Einbetten von Inhalten mit nur einer URL in WordPress

Im obigen Beispiel habe ich einen YouTube Videolink eingefügt und WordPress hat ihn automatisch in ein Video zum Einbetten konvertiert. Das oEmbed-Protokoll ist das Rückgrat von WordPress, um viele Arten von Inhalten wie Videos, Bilder, Updates und mehr von verschiedenen Social-Media-Plattformen einzubetten.

WordPress erlaubt dir zwar das Einbetten bereinigter Iframes von jedem registrierten oEmbed-Anbieter, aber aus Sicherheitsgründen werden nicht alle standardmäßig eingebettet. Es bettet standardmäßig nur URLs von bestimmten genehmigten oEmbed-Providern ein.

Die Liste der von WordPress vertrauten oEmbed-Provider umfasst die meisten der beliebten Inhaltshosting- und Social-Networking-Sites wie Imgur, Facebook, Instagram, Tumblr, YouTube, Vimeo und viele andere. Diese Provider können beliebige Inhalte wie Videos, Iframes, JavaScript und sogar zufälliges HTML einbetten.

Facebook und Instagram oEmbed Endpunkte (Veraltet)

Facebook- und Instagram oEmbed-Endpunkte sind das Rückgrat für die Einbettung von Facebook- und Instagram-Inhalten in WordPress-Seiten.

Ein Beispiel dafür, wie WordPress Facebook-Inhalte einbettet.
Ein Beispiel dafür, wie WordPress Facebook-Inhalte einbettet.

Facebook oEmbed Endpunkte ermöglichen es WordPress, nicht nur den Hauptinhalt, sondern auch Metadaten wie den Seitennamen und das Logo, Datum und Uhrzeit, Miniaturbild, Anzahl der Likes, Kommentare und Freigaben sowie die URL zur Quelle anzuzeigen.

Ein Beispiel dafür, wie WordPress Instagram-Inhalte einbettet.
Ein Beispiel dafür, wie WordPress Instagram-Inhalte einbettet.

Dasselbe gilt für das Einbetten von Inhalten aus Instagram. Du kannst nicht nur das Bild in der Einbettung sehen, sondern auch wichtige Metadaten-Informationen dazu.

Die neuen Facebook- und Instagram-„oEmbed“-Endpunkte

Facebook hat angekündigt, ihre bestehenden oEmbed-Endpunkte ab dem 24. Oktober 2020 als veraltet zu markieren. Sie bezeichnen diese alten Endpunkte nun als Legacy oEmbed Endpoints.

Bis zum 24. Oktober 2020 müssen Entwickler ein Benutzer-, App- oder Client-Token verwenden, wenn sie die Graph API für Benutzerprofilbilder über UID, FB OEmbeds und IG OEmbeds abfragen. Entwickler sollten einen User- oder App-Token bereitstellen, wenn sie Profilbilder über eine UID oder ASID abfragen, obwohl auch Client-Token unterstützt werden. Bitte besuche unser Changelog für Benutzerbild, Facebook OEmbed und Instagram OEmbed für Details darüber, wie man diese Graph API Endpunkte noch heute aufruft.
Facebook für Entwickler

Was du jetzt brauchst, um die Vorteile der Facebook oEmbed-API zu nutzen

Im Gegensatz zur offenen Web-API von oEmbed hat die neue Facebook oEmbed API verschiedene Anforderungen:

  • Du musst ein Facebook für Entwickler-Konto haben.
  • Dann benötigst du eine registrierte Facebook-App, um eine eindeutige App-ID zu generieren.
  • Als nächstes musst du das oEmbed-Produkt für deine registrierte App aktivieren.
  • Dann musst du ein App-Zugangs-Token oder ein Client-Zugangs-Token generieren.
  • Schließlich musst du die Facebook-App in den Live-Modus versetzen.

Als Reaktion auf diese neuen Anforderungen entfernt WordPress Facebook und Instagram als vertrauenswürdige oEmbed-Quellen.

Wir erwarten, dass das nächste größere WordPress-Update diese Änderungen enthalten wird. Wenn du das Gutenberg-Plugin verwendest, dann hat die neueste Version von Gutenberg 9.0 die Unterstützung für diese bereits entfernt.

Was passiert mit alten Facebook- und Instagram-Einbettungen?

WordPress speichert oEmbed-Antworten in seiner Datenbank unter der post meta oder dem versteckten Beitragstyp oembed_cache (derzeit nur in Widgets verwendet).

Da WordPress diese Werte nicht standardmäßig entfernt, bleibt der Inhalt der Einbettungen auf deiner Website erhalten.

Aber sie werden geleert, wenn du sie manuell aus der Datenbank löschst. Daher bleiben alle Facebook- oder Instagram-Einbettungen, die du vor dem 24. Oktober hinzugefügt hast, auch nach dem Verfallsdatum bestehen.

Wie man Facebook- und Instagram-Inhalte einbettet (nach dem 24. Oktober)

Wenn du versuchst, Facebook- oder Instagram-Inhalte einzubetten, nachdem sie die veralteten oEmbed-Endpoints abgelehnt haben, erhalten du und deine Nutzer möglicherweise HTTP 400-Fehler als Antwort.

Um uns beim Testen zu helfen, wie Einbettungsversuche nach dem 24. Oktober 2020 angezeigt werden, hat Facebook einen Parameter für die Legacy oEmbed-Endpoints hinzugefügt, um den Fehler zu simulieren. Ich habe es ausprobiert und die Ergebnisse sind unten aufgeführt.

Eine simulierte Einbettung unter Verwendung der veralteten Facebook oEmbed Endpoints
Eine simulierte Einbettung unter Verwendung der veralteten Facebook oEmbed Endpoints

Facebook`s Fallback Einbettungen werden als kleine Textauszüge (max. 120 Zeichen) innerhalb von Blockzitaten erscheinen. Es wird auch Links zum Autor und zur Originalquelle enthalten, aber sonst nichts weiter.

Nicht einmal einen Verweis auf Facebook, außer den Links, auf die du durch einen Klick zu Facebook gelangst.

Eine simulierte Einbettung unter Verwendung von veralteten Instagram oEmbed Endpoints.
Eine simulierte Einbettung unter Verwendung von veralteten Instagram oEmbed Endpoints.

Im Vergleich dazu sind die Fallback-Einbettungen von Instagram viel besser, bei dem die Einbettungsstruktur so gut wie intakt ist.

Dies ist jedoch ein vorübergehendes Phänomen. Sobald WordPress die Facebook und Instagram oEmbed Endpunkte aus seinem Kern entfernt hat, werden die veralteten oEmbed Endpunkte kein Problem mehr darstellen.

Die einzige Möglichkeit zum Einbetten von Facebook- und Instagramm-Inhalten wird dann darin bestehen, die Anforderungen von Facebook zu erfüllen. Wie du genau das machst, erfährst du im nächsten Abschnitt.

Wie man das Facebook- und Instagram oEmbed-Problem in WordPress behebt

Der einfachste Weg, Facebook- und Instagram-Einbettungen in WordPress wiederherzustellen, ist die Verwendung des kostenlosen oEmbed Plus-Plugins von Ayesh Karunaratne. Es hilft dir dabei, die neuen Facebook oEmbed Endpunkte zu implementieren, um Facebook- und Instagram-Einbettungen im Blockeditor wieder zu aktivieren.

Das oEmbed Plus WordPress plugin
Das oEmbed Plus WordPress plugin

Um damit anzufangen, installiere und aktiviere zuerst das Plugin.

Hinweis: oEmbed Plus benötigt PHP 7.3 oder eine höhere Versionen, um zu funktionieren. Wenn dein aktueller WordPress Host PHP 7.3+ Versionen noch nicht unterstützt, empfehlen wir dir dringend, ein neues Hosting zu suchen.

Erstelle als Nächstes ein Facebook für Entwickler-Konto, falls du noch keines hast. Erstelle dann eine App. In meinem Fall nenne ich meine App „WordPress-Site“, aber du kannst sie nennen, wie du willst.

Erstelle eine App im Facebook-Portal für Entwickler.
Erstelle eine App im Facebook-Portal für Entwickler.

Wenn du eine App erstellst, wird automatisch eine App ID für sie generiert.

Du kannst sowohl deine App ID als auch dein App Secret einsehen, indem du zu den Settings → Basic Panel unter deinem App-Dashboard gehst. Notiere diese beiden Werte, da du sie später brauchen wirst.

Facebook für Entwickler 'App ID' und 'App Secret'
Facebook für Entwickler ‚App ID‘ und ‚App Secret‘

Während du hier bist, kannst du auch die Privacy Policy URL festlegen, da diese benötigt wird, um die App Live zu schalten. Es wird empfohlen, eine angemessene Datenschutzrichtlinie zu verwenden, damit deine App nicht auf eine schwarze Liste gesetzt wird.

Das oEmbed Product ist standardmäßig automatisch aktiviert, du kannst es also so lassen, wie es ist.

Gehe als Nächstes zu den Bildschirm Settings → Writing in deinem WordPress-Dashboard und suche nach dem Abschnitt Facebook and Instagram Embed Settings. Gib hier die Werte für App ID und App Secret ein, die du dir vorher notiert hast.

oEmbed Plus Plugin-Einstellungen konfigurieren
oEmbed Plus Plugin-Einstellungen konfigurieren

Alternativ kannst du die App ID und App Secret in deine wp-config.php Datei. einfügen. Hier ist der Code-Schnipsel, den du verwenden musst:

define('OEMBED_PLUS_FACEBOOK_APP_ID', '7168...app.id...789');  
define('OEMBED_PLUS_FACEBOOK_SECRET', '20e5...app.secret...890xyz');

Vergiss nicht, die oben angezeigten Werte auf deine zu ändern! Wenn du fertig bist, speichere die Datei ab.

Wenn du die wp-config.php Datei bearbeitest, um oEmbed Plus zu konfigurieren, deaktiviert es automatisch die Felder App ID und App Secret in deinem WordPress Dashboard. Auf diese Weise kannst du deine App-Credentials vor anderen Benutzern geheim halten.

Das ist so ziemlich alles!

Alle neuen Facebook- und Instagram-Einbettungen verwenden jetzt die neue Authentifizierungs-API, um Inhalte in deine WordPress-Site einzubetten.

Andere spezielle Social Media Plugins, wie der Instagram-Feed und der Social Post Feed, fügen ebenfalls Unterstützung für die neuen Facebook oEmbed Endpunkte hinzu.

Diese Plugins werden jedoch in einem Paket mit vielen Funktionen geliefert, so dass sie in diesem speziellen Anwendungsfall für deine Seite unnötig aufgebläht sein können. Wenn du sie bereits verwendest, kannst du sie dir ansehen.

Facebook ist vorerst großzügig mit den Preisgrenzen für ihre neue API. Sie erlauben es dir, bis zu 5 Millionen Anfragen pro Tag zu stellen. Da WordPress die Antworten der oEmbed-API in der Datenbank zwischenspeichert, wird eine Einbettung keine weiteren Anfragen über die erste hinaus auslösen. Weitere Informationen findest du in der aktualisierten oEmbed-Dokumentation von Facebook.

Zusammenfassung

WordPress ist das beliebteste CMS, das heutzutage verwendet wird. Ebenso sind Facebook und Instagram die beliebtesten Social-Media-Plattformen. Daher betrifft diese Änderung potentiell Millionen von Seiten.

Das Einbetten von Social-Media-Inhalten in WordPress bietet deinen Seitenbesuchern ein einzigartigeres Erlebnis. Ab dem 24. Oktober 2020 wird es für viele unwissende Nutzer frustrierend sein, Inhalte von Facebook und Instagram einzubetten. Wir hoffen, dieser Artikel hilft dir dabei, das Facebook oEmbed-Problem in WordPress zu beheben.

Wenn du immer noch Probleme mit der Einbettung von Facebook- und Instagram-Inhalten hast, lass es uns in den Kommentaren wissen!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.