Sinds 24 oktober is Facebook gestopt met de ondersteuning van ongeverifieerde WordPress insluitingen (embeds). Als je dus content vanuit Facebook en Instagram op je WordPress website hebt opgenomen, zal die insluiting niet meer werken.

Specifieker gezegd worden de oude Facebook oEmbed endpoints vervangen voor nieuwe die verificatie via Facebook vereisen. Aangezien Facebook ook Instagram bezit, zullen dezelfde eisen van toepassing zijn op Instagram oEmbed endpoints.

In dit artikel zullen we bespreken hoe WordPress gebruik maakt van Facebook en Instagram oEmbed endpoints, wat er in de update is veranderd en hoe je deze updates kan verwerken zodat je embeds gewoon blijven werken.

Aan de slag!

Zo gebruikt WordPress oEmbed voor het insluiten van content

oEmbed is een protocol waarmee websites content van een andere website kunnen insluiten via een URL. Het is primair ontworpen om te voorkomen dat je HTML van andere websites moet kopiëren en plakken. WordPress gebruikt oEmbed voor het weergeven van content (zoals foto’s en video’s).

Het enige wat je hiervoor hoeft te doen is het plaatsen van de bron URL in het contentgebied, en WordPress zal er automatisch een insluiting van maken met een live preview.

Embedden van content via een URL in WordPress
Embedden van content via een URL in WordPress

In het voorbeeld hierboven is er een link van een YouTube video geplakt, waarna WordPress er automatisch een video-insluiting van maakt. Het oEmbed protocol is de ruggengraat van WordPress voor het embedden van allerlei typen content, zoals video’s, afbeeldingen, updates en nog veel meer van verschillende sociale platforms.

Alhoewel WordPress het mogelijk maakt om opgeschoonde iframes in te sluiten van een geregistreerde oEmbed provider, worden ze vanwege veiligheidsoverwegingen niet allemaal standaard opgenomen. Alleen URL’s van bepaalde toegestane oEmbed providers worden standaard opgenomen.

De lijst met betrouwbare oEmbed providers volgens WordPress bevat de meeste populaire websites voor contenthosting en sociale netwerken, zoals Imgur, Facebook, Instagram, Tumblr, YouTube, Vimeo en nog veel meer. Deze providers kunnen verschillende typen content embedden, zoals video’s, iframes, JavaScript en zelfs willekeurige HTML.

Facebook en Instagram oEmbed endpoints (Legacy)

Facebook en Instagram oEmbed endpoints zijn de basis voor het insluiten van Facebook en Instagram content binnen WordPress websites.

Een voorbeeld van hoe WordPress Facebook content embed
Een voorbeeld van hoe WordPress Facebook content embed

Facebook oEmbed endpoints maken het mogelijk voor WordPress om niet alleen de hoofdcontent op te nemen, maar ook metadata zoals de naam en logo van de pagina, tijd en datum, thumbnail, aantal likes, reacties en shares, en de bron URL.

Een voorbeeld van hoe WordPress Instagram content embed
Een voorbeeld van hoe WordPress Instagram content embed

Het zelfde geldt voor content van Instagram. Je ziet niet alleen de afbeelding in de embed, maar ook relevante metadata.

De nieuwe Facebook en Instagram “oEmbed” endpoints

Facebook heeft aangekondigd dat hun bestaande oEmbed endpoints vanaf 24 oktober niet meer ondersteund worden. Ze noemen deze verouderde endpoints nu Legacy oEmbed endpoints.

Vanaf 24 oktober 2020 moeten ontwikkelaars gebruik maken van een gebruikers-, app- of client-token bij het opvragen van Graph API voor gebruikersprofielfoto’s via UID, FB OEmbeds en IG OEmbeds. Ontwikkelaars moeten een gebruikers- of app-token aanleveren bij het zoeken naar profielfoto’s via een UID of ASID, hoewel client-tokens ook worden ondersteund. Bezoek onze changelog voor User Picture, Facebook OEmbed en Instagram OEmbed voor meer informatie over hoe u deze Graph API endpoints vandaag nog kan opvragen.
– Facebook for Developers

Wat je nu moet doen om Facebook oEmbed API te gebruiken

In tegenstelling tot het open web API karakter van oEmbed stelt Facebook aan hun nieuwe oEmbed API diverse eisen:

  • Je moet een Facebook for Developer account hebben.
  • Je moet een geregistreerde Facebook App hebben voor het genereren van een unieke App ID.
  • Vervolgens moet je het oEmbed Product voor je geregistreerde App inschakelen.
  • Daarna moet je een App Access Token of Client Access Token aanmaken.,
  • Als laatste moet je de Facebook App op Live modus zetten.

Vanwege deze eisen, heeft WordPress Facebook en Instagram verwijderd als vertrouwde oEmbed bron.

We verwachten dat de volgende grote WordPress update deze veranderingen ook bevat. Gebruik je de Gutenberg plugin, dan heeft de Gutenberg 9.0 release al de ondersteuning hiervoor verwijderd.

Wat gebeurt er met verouderde Facebook en Instagrams insluitingen?

WordPress cachet oEmbed responses in de database, onder het artikeltype post meta of oembed_cache (momenteel alleen gebruikt in widgets).

Aangezien WordPress deze waarden niet standaard opschoont, zal de content van je insluitingen op je website blijven bestaan.

Maar de content zal wel opgeschoond worden wanneer je ze handmatig van je database verwijdert. Daarom zullen Facebook of Instagram insluitingen die je vóór 24 oktober hebt toegevoegd ook na deze datum nog zichtbaar blijven.

Zo sluit je Facebook en Instagram content in (na 24 oktober)

Als je content vanuit Facebook of Instagram probeert in te sluiten na het afschrijven van de verouderde oEmbed endpoints, zullen jij en je bezoekers HTTP 400 fouten als antwoord krijgen.

Om te helpen bij het testen van embeds na 24 oktober 2020, heeft Facebook een parameter voor de legacy oEmbed endpoints toegevoegd voor het simuleren van de fout. Dit is getest, en je ziet de resultaten hieronder.

Een gesimuleerde insluiting via de uitgefaseerde Facebook oEmbed endpoints
Een gesimuleerde insluiting via de uitgefaseerde Facebook oEmbed endpoints

De terugvalopties voor insluitingen van Facebook zullen weergegeven worden als kleine uittreksels (max 120 karakters) binnen blocktekens. Hier zullen ook links naar de auteur en de originele bron bij zitten, maar verder niks.

Niet eens een verwijzing naar Facebook, behalve de links, waarmee je wel op Facebook uitkomt.

Een gesimuleerde insluiting via de verouderde Instagram oEmbed endpoints
Een gesimuleerde insluiting via de verouderde Instagram oEmbed endpoints

In vergelijking hiermee zijn de terugvalopties van Instagram veel beter, aangezien de structuur nagenoeg hetzelfde blijft.

Dat gezegd hebbende, is dit een tijdelijk probleem. Zodra WordPress de Facebook en Instagram oEmbed endpoints uit de kern verwijdert, zullen de uitgefaseerde oEmbed endpoints geen probleem meer zijn.

De enige manier om Facebook en Instagram content daarna nog in te sluitenis door te voldoen aan de eisen van Facebook. In het volgende deel laten we precies zien hoe je dat doet.

Zo los je de Facebook en Instagram oEmbed fout op in WordPress

De makkelijkste manier om Facebook en Instagram insluitingen weer op WordPress te krijgen is door de gratis oEmbed Plus plugin van Ayesh Karunaratne te gebruiken. De plugin helpt bij het implementeren van de nieuwe Facebook oEmbed endpoints zodat je de insluitingen van Facebook en Instagram weer kan inschakelen via de blockeditor.

De oEmbed Plus WordPress plugin
De oEmbed Plus WordPress plugin

Om hiermee te beginnen, installeer en activeer je de plugin.

Let op: oEmbed Plus vereist PHP 7.3 of later. Als je huidige WordPress host PHP 7.3+ nog niet ondersteunt, raden we je sterk aan op zoek te gaan naar nieuwe hosting.

Vervolgens maak je een Facebook for Developers account aan, als je die nog niet had. Vervolgens maak je een App. In ons geval noemen we de App “WordPress Site”, maar je kan dit natuurlijk elke willekeurige naam geven.

Maak een App in het Facebook for Developers portaal
Maak een App in het Facebook for Developers portaal

Door een App te maken wordt er automatisch een App ID voor aangemaakt.

Je kan zowel je App ID als App Secret bekijken via het scherm Settings → Basic binnen je App dashboard. Je moet deze twee waarden ergens opschrijven zodat je ze later kan invoeren.

Facebook for Developers ‘App ID’ en ‘App Secret’
Facebook for Developers ‘App ID’ en ‘App Secret’

Vanaf hier kan je ook meteen de Privacy Policy URL instellen aangezien dit nodig is om de App Live te zetten. We raden je aan een goed privacybeleid te gebruiken zodat je App niet op de zwarte lijst komt.

Het oEmbed Product wordt automatisch ingeschakeld, dus dit kan je verder zo laten.

Nu ga je naar het Settings → Writing scherm in je WordPress dashboard, waar je moet zoeken naar het deel Facebook and Instagram Embed Settings. Hier voer je het App ID en App Secret in dat je eerder hebt opgeschreven.

Instellen van oEmbed Plus plugin
Instellen van oEmbed Plus plugin

In plaats hiervan kan je ook het App ID en App Secret toevoegen aan je wp-config.php bestand. Daarvoor moet je dit stukje code gebruiken:

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

Vergeet natuurlijk niet de waarden te veranderen naar je eigen waarden. Nadat je dat gedaan hebt sla je het bestand op.

Wanneer je het bestand wp-config.php aanpast om oEmbed Plus in te stellen, zal het automatisch de App ID en App Secret velden uitschakelen in je WordPress dashboard. Op die manier hou je je App gegevens geheim voor andere gebruikers.

En dat is het wel zo’n beetje.

Alle nieuwe Facebook en Instagram insluitingen gebruiken nu de nieuwe verificatie API om content op te nemen op je WordPress website.

Ook andere gespecialiseerde social media plugins, zoals Instagram Feed en Social Post Feed voeren ondersteuning voor de nieuwe Facebook oEmbed endpoints in.

Maar deze plugins bevatten ook allerlei andere functies, die onnodig kunnen zijn voor jouw specifieke use case. Maar als je ze toch al gebruikt of nodig hebt, kan je er zeker even naar kijken.

Facebook is momenteel nog erg vrijgevig met de rate-limieten van de API. Momenteel staan ze 5 miljoen verzoeken per dag toe. Aangezien WordPress de oEmbed API responses cachet in de database, zullen ze na het eerste verzoeken geen nieuwe aanmaken. Je kan verder in de bijgewerkte oEmbed documentatie van Facebook kijken voor meer informatie.

Samenvatting

WordPress is tegenwoordig het meest populaire CMS. En Facebook en Instagram zijn de meest populair social media platforms. Daarom kan deze verandering een impact op miljoenen sites hebben.

Door social media content in WordPress in te sluiten, biedt je je bezoekers een betere ervaring. Vanaf 24 oktober 2020 zullen veel onwetende gebruikers moeite hebben met het insluiten van Facebook en Instagram content. We hopen dat dit artikel je helpt bij het rechtzetten van het Facebook oEmbed probleem in WordPress.

Mocht je toch nog problemen hebben met het insluiten van Facebook of Instagram, laat het ons dan weten in de reacties!

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.