Votre webmaster spécialiste Wordpress

Intégrer l’Opengraph de Facebook à WordPress

Le protocole Facebook Open Graph vous permet de partager votre contenu de blog non seulement avec vos lecteurs, mais aussi avec leurs amis Facebook. En paramétrant correctement les données qui seront lues par Facebook, vos visiteurs verront la bonne image, la bonne description et le bon titre de votre article ou de votre page.

 

Etape 1: Créer une application Facebook

Nous aurons besoin d’une Application ID et pour cela, vous devrez créer une Application Facebook. Si vous en avez déjà une, passez directement à l’étape 2.

Créer une application est très facile, voici ce que vous devez faire:

  1. Connectez-vous sur Facebook et rendez-vous sur la plate-forme Facebook Developers
  2. Cliquez sur le bouton « Ajouter une app »
  3. Donnez un nom à votre application et un email de contact
  4. Cliquez ensuite sur « Tableau de Bord » dans la colonne de gauche
  5. Dans la partie de droite, vous pourrez visualiser l’ID de votre application

C’est fait!! Vous pourrez revenir ensuite sur la page pour y paramétrer les paramètres restants.

 

Etape 2: Remplacer le tag <HTML>

Ouvrez maintenant le fichier header.php de votre thème dans votre éditeur favori. Gardez toujours une copie de votre fichier au cas où les choses tourneraient mal.

Recherchez la ligne de code commençant par <html xmlns=”http://www.w3.org/…

Remplacez la par:

Gardez le fichier header.php ouvert, nous avons encore des modifications à faire.

 

Etape 3: Insérer les tags OG <Meta>

Copiez le code suivant juste après le tag <head> ou juste avant le tag </head>:

Voici quelques unes des valeurs que vous devez modifier:

  • Ligne 3: Remplacez your_fb_app_id avec l’Application ID de l’étape 1.
  • Ligne 12: Cette ligne détermine l’image qui sera visible pour chaque partage. Si votre thème supporte WordPress Post Thumbnails, cela devrait marcher. Si tel n’est pas le cas, reportez vous à l’étape 3a.
  • Ligne 19: Remplacez logo.jpg par l’URL de votre propre logo

 

Etape 3a: Si “wp_get_attachment_thumb_url” ne fonctionne pas

Quand wp_get_attachment_thumb_url() ne fonctionne pas, vous obtiendrez certainement une valeur nulle pour la balise image, comme ci-dessous:

Une solution de rechange simple sera de remplacer la ligne 12 par le code suivant:

Ensuite ouvrez le fichier function.php de votre thème et ajoutez-y les lignes de code suivantes:

Ce code de remplacement tente d’utiliser un appel de fonction catch_that_image () pour saisir et afficher l’URL de la première image qu’il rencontre. Remplacez la ligne 10 par l’URL par une image par défaut si la fonction ne parvient pas à trouver sa première image.

 

Etape 4: Insérer le Javascript Facebook SDK

Le code Javascript ci-dessous vous donne accès à tous les services de l’API Graph. Il vous permet également d’intégrer les plugins Facebook, comme le bouton « J’aime » etc, avec facilité.

Placez ce code dans votre fichier header.php, juste après la balise <body>:

Remplacez your_fb_app_id de la ligne 4 avec l’Application ID de l’étape 1.

 

Et voilà, le tour est joué. Il ne vous reste plus qu’à tester le tout en partageant un article sur Facebook.

INFO: Si vous effectuez des modifications sur votre blog, alors que Facebook a déjà enregistré les OG <Meta> de votre page, n’oubliez pas d’utiliser le Debugger Facebook pour réinitialiser les données et intégrer les nouvelles !

Webmaster depuis 1998, je me suis spécialisé dans le CMS Wordpress depuis 2010 et le lancement d'un blog collaboratif sur le community management: www.mycommunitymanager.fr. Depuis le virus a pris et ne m'a plus quitté...

Laisser un commentaire

*