À partir du 24 octobre, Facebook abandonne le support des applications WordPress non authentifiées. Ainsi, si vous intégrez des contenus Facebook et Instagram sur votre site WordPress, ils se briseront.

Plus précisément, les anciens points de terminaison (endpoint) oEmbed de Facebook sont remplacés par des nouveaux qui nécessitent une authentification via Facebook. Comme Facebook est propriétaire d’Instagram, les mêmes exigences s’appliquent aux points de terminaison oEmbed d’Instagram.

Dans cet article, nous verrons comment WordPress utilise les points de terminaison oEmbed de Facebook et Instagram, ce qui est mis à jour et comment vous pouvez corriger les choses pour que vos intégrations continuent de fonctionner comme elles le devraient.

Préparons-nous !

Comment WordPress utilise oEmbed pour intégrer du contenu

oEmbed est un protocole qui permet aux sites d’intégrer du contenu provenant d’autres sites tiers avec une simple URL. Il est conçu principalement pour éviter de devoir copier-coller le HTML d’autres sites. WordPress utilise oEmbed pour afficher le contenu intégré (comme les photos ou les vidéos).

Il vous suffit de placer l’URL de la ressource dans la zone de contenu, et WordPress la transformera automatiquement en une intégration et en affichera un aperçu en direct.

Intégrer du contenu avec une simple URL dans WordPress
Intégrer du contenu avec une simple URL dans WordPress

Dans l’exemple ci-dessus, j’ai collé un lien de vidéo YouTube et WordPress l’a automatiquement converti en vidéo intégrée. Le protocole oEmbed est l’épine dorsale de WordPress pour intégrer de nombreux types de contenus tels que des vidéos, des images, des mises à jour, et plus encore, provenant de diverses plateformes de réseaux sociaux.

Bien que WordPress vous permette d’intégrer des iframes sanitisées provenant de n’importe quel fournisseur d’oEmbed enregistré, il ne les intègre pas toutes par défaut pour des raisons de sécurité. Il n’intègre par défaut que les URL de certains fournisseurs d’oEmbed.

La liste des fournisseurs de confiance d’oEmbed pour WordPress comprend la plupart des sites populaires d’hébergement de contenu et de réseaux sociaux tels que Imgur, Facebook, Instagram, Tumblr, YouTube, Vimeo, et bien d’autres encore. Ces fournisseurs peuvent intégrer n’importe quel contenu, tel que des vidéos, des iframes, du JavaScript et même du HTML aléatoire.

Points de terminaisons oEmbed Facebook et Instagram (Legacy)

Les points de terminaison oEmbed de Facebook et Instagram constituent l’épine dorsale pour l’intégration du contenu de Facebook et Instagram dans les sites WordPress.

Un exemple de la façon dont WordPress intègre le contenu de Facebook
Un exemple de la façon dont WordPress intègre le contenu de Facebook

Les points de terminaison oEmbed de Facebook permettent à WordPress d’extraire non seulement le contenu principal, mais aussi des métadonnées telles que le nom de la page et le logo, la date et l’heure, la miniature, le nombre d’articles préférés, les commentaires et les partages, ainsi que l’URL de la source.

Un exemple de la façon dont WordPress intègre le contenu d'Instagram
Un exemple de la façon dont WordPress intègre le contenu d’Instagram

Il en va de même pour l’intégration du contenu d’Instagram. Vous pouvez voir non seulement l’image dans l’intégration, mais aussi des informations importantes sur les métadonnées qui s’y rapportent.

Les nouveaux points de terminaison « oEmbed » de Facebook et Instagram

Facebook a récemment annoncé qu’il désapprouverait ses points de terminaison oEmbed existants à partir du 24 octobre 2020. Ces anciens points de terminaison sont désormais appelés Legacy oEmbed endpoints.

D’ici le 24 octobre 2020, les développeurs doivent utiliser un jeton utilisateur, une application ou un client lorsqu’ils interrogent Graph API pour obtenir des images de profil utilisateur via l’UID, FB OEmbeds et IG OEmbeds. Les développeurs doivent fournir un jeton d’utilisateur ou d’application lorsqu’ils demandent des images de profil via un UID ou un ASID, bien que les jetons clients soient également pris en charge. Veuillez consulter notre journal des modifications pour User Picture, Facebook OEmbed et Instagram OEmbed pour savoir comment commencer à appeler ces points de terminaison Graph API dès aujourd’hui.
Facebook for Developers

Ce dont vous avez besoin maintenant pour profiter de l’API oEmbed de Facebook

Allant à l’encontre de la nature de l’API web ouverte d’oEmbed, la nouvelle API Facebook oEmbed a diverses exigences :

  • Vous devez avoir un compte Facebook pour les développeurs.
  • Vous devez ensuite disposer d’une application Facebook enregistrée pour générer un App ID unique.
  • Ensuite, vous devez activer le produit oEmbed pour votre application enregistrée.
  • Vous devez ensuite générer un App Access Token ou un Client Access Token.
  • Enfin, vous devez mettre l’application Facebook en mode Live.

Pour répondre à ces nouvelles exigences, WordPress supprime Facebook et Instagram en tant que sources fiables d’oEmbed.

Nous espérons que la prochaine mise à jour majeure de WordPress inclura ces changements. Si vous utilisez l’extension Gutenberg, la dernière version 9.0 de Gutenberg a déjà supprimé le support.

Qu’arrive-t-il aux anciennes intégrations Facebook et Instagram ?

WordPress met en cache les réponses oEmbed dans sa base de données sous le type masqué post meta ou oembed_cache (actuellement utilisé uniquement dans les widgets).

Comme WordPress ne purge pas ces valeurs par défaut, le contenu de l’intégration continuera d’exister sur votre site web.

Mais ils seront purgés si vous les supprimez manuellement de la base de données. Par conséquent, toute intégration Facebook ou Instagram que vous avez ajouté avant la date limite du 24 octobre restera même après la date de suppression.

Comment intégrer du contenu Facebook et Instagram après le 24 octobre

Si vous essayez d’intégrer du contenu de Facebook ou d’Instagram après qu’ils aient déprécié les anciens points de terminaison oEmbed, vous et vos utilisateurs pouvez recevoir des erreurs HTTP 400 en réponse.

Pour nous aider à tester comment les nouvelles tentatives d’intégration apparaîtront après la date limite, Facebook a ajouté un paramètre pour les anciens points de terminaison oEmbed afin de simuler l’erreur. Je l’ai testé et les résultats sont présentés ci-dessous.

Une simulation d'intégration utilisant les anciens points de terminaison Facebook oEmbed
Une simulation d’intégration utilisant les anciens points de terminaison Facebook oEmbed

Les « fallback embeds » de Facebook apparaîtront sous forme de petits extraits (120 caractères maximum) entre guillemets. Ils comprendront également des liens vers l’auteur et la source originale, mais rien d’autre.

Pas même une référence à Facebook, à l’exception des liens, qui, en cliquant vous amèneront sur Facebook.

Une simulation d'intégration utilisant les anciens points de terminaison oEmbed Instagram
Une simulation d’intégration utilisant les anciens points de terminaison oEmbed Instagram

En comparaison, les fallbacks embeds d’Instagram sont bien meilleurs, la structure de l’intégration étant pratiquement intacte.

Cela étant dit, il s’agit d’un problème temporaire. Une fois que WordPress aura retiré de son noyau les points de terminaison oEmbed de Facebook et Instagram, les anciens points de terminaison oEmbed cesseront d’être un problème.

La seule façon d’intégrer le contenu de Facebook et d’Instagram sera alors de se conformer aux exigences de Facebook. Vous apprendrez comment faire cela dans la prochaine section.

Comment résoudre le problème d’oEmbed Facebook et Instagram dans WordPress

Le moyen le plus simple de restaurer les contenus Facebook et Instagram dans WordPress est d’utiliser l’extension gratuite oEmbed Plus d’Ayesh Karunaratne. Elle vous aide à implémenter les nouveaux points de terminaison oEmbed de Facebook pour réactiver les intégrations de Facebook et Instagram dans l’éditeur de blocs.

L’extension WordPress oEmbed Plus
L’extension WordPress oEmbed Plus

Pour commencer, installez et activez l’extension.

Note : oEmbed Plus nécessite PHP 7.3 ou une version plus récente pour fonctionner. Si votre hébergeur WordPress actuel ne supporte pas encore les versions PHP 7.3+, nous vous encourageons vivement à rechercher un nouvel hébergeur.

Ensuite, créez un compte Facebook pour les développeurs, si vous n’en avez pas déjà un. Ensuite, créez une application. Dans mon cas, j’appelle mon application « Site WordPress », mais vous pouvez l’appeler comme vous le souhaitez.

Créer une application dans le portail Facebook pour les développeurs
Créer une application dans le portail Facebook pour les développeurs

La création d’une application génère automatiquement un ID d’application pour celle-ci.

Vous pouvez afficher votre App ID et votre App Secret en vous rendant dans Réglages → Basiques dans le tableau de bord de votre application. Notez ces deux valeurs car vous en aurez besoin plus tard.

Facebook pour les développeurs : « App ID » et « App Secret ».
Facebook pour les développeurs : « App ID » et « App Secret ».

Pendant que vous êtes ici, définissez également l’URL de la politique de confidentialité, car elle est nécessaire pour que l’application soit opérationnelle. Il est recommandé d’utiliser une politique de confidentialité appropriée afin que votre application ne soit pas mise sur une liste de blocage.

Le produit oEmbed est activé automatiquement par défaut, vous pouvez donc le laisser tel quel.

Ensuite, allez dans l’écran Réglages → Écriture dans votre tableau de bord WordPress et cherchez la section Réglages d’intégration Facebook et Instagram. Ici, saisissez les valeurs App ID et App Secret notées précédemment.

Configuration des réglages de l’extension oEmbed Plus
Configuration des réglages de l’extension oEmbed Plus

Vous pouvez également ajouter l’App ID et l’App Secret à votre fichierwp-config.php. Voici le code que vous devez utiliser :

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

N’oubliez pas de remplacer les valeurs indiquées ci-dessus par les vôtres ! Une fois cela fait, enregistrez le fichier.

Si vous modifiez le fichier wp-config.php pour configurer oEmbed Plus, il désactivera automatiquement les champs des formulaires App ID et App Secret dans votre tableau de bord WordPress. Ainsi, vous pouvez garder secrets vos identifiants App pour les autres utilisateurs.

C’est à peu près tout !

Toutes les nouvelles applications Facebook et Instagram utiliseront désormais la nouvelle API d’authentification pour intégrer le contenu sur votre site WordPress.

D’autres extensions dédiées aux réseaux sociaux, comme Instagram Feed et Social Post Feed, prennent également en charge les nouveaux points de terminaison oEmbed de Facebook. Cependant, ces extensions sont fournies avec de nombreuses fonctionnalités, et peuvent donc constituer un poids inutile pour votre site dans ce cas d’utilisation spécifique. Si vous les utilisez déjà, vous pouvez les consulter.

Pour l’instant, Facebook est généreux en ce qui concerne les limites tarifaires de sa nouvelle API. Ils vous permettent de faire jusqu’à 5 millions de requêtes par jour. Comme WordPress met en cache les réponses de l’API oEmbed dans la base de données, une intégration ne déclenchera pas d’autres demandes au-delà de la première. Vous pouvez vous référer à la documentation oEmbed mise à jour de Facebook pour plus d’informations.

Résumé

WordPress est le CMS le plus populaire utilisé aujourd’hui. De même, Facebook et Instagram sont les plateformes de réseaux sociaux les plus populaires. Par conséquent, ce changement affecte potentiellement des millions de sites.

L’intégration du contenu des réseaux sociaux dans WordPress offre une expérience plus unique aux visiteurs de votre site. À partir du 24 octobre 2020, de nombreux utilisateurs ignorants trouveront compliqué d’intégrer du contenu de Facebook et d’Instagram. Nous espérons que cet article vous a aidé à rectifier le problème de l’intégration de Facebook et Instagram dans WordPress.

Si vous rencontrez toujours des problèmes avec les applications Facebook et Instagram, faites-le nous savoir dans les commentaires !

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.