Tout savoir sur WordPress
Tutoriel WordPress

Ajouter les balises meta open graph de Facebook

Dans ce tutoriel, vous allez voir comment faire pour ajouter les balises open graph de Facebook sur votre thème WordPress.

Les balises open graph de Facebook permettent de préciser des indications sur la page que l’on « like » (miniature, titre, contenu, etc…). Par exemple, nous pouvons préciser l’url de l’image qui doit être affichée lors du « like » car si on il n’est pas précisé, Facebook choisira la première image qu’il trouvera dans la page.

Ce tuto a pour but de vous faire connaître l’intégralité de balises open graph de Facebook et de voir comment les ajouter automatiquement sur votre thème WordPress.

Modification de la balise HTML pour introduire les open graph Facebook

Pour implanter les balises open graph de Facebook, nous commençons par modifier la balise HTML afin que les navigateurs interprètent les nouvelles balises que nous allons ajouter.

Nous avons deux étapes à faire :

  • ajouter la fonction language_attributes() sur le balise HTML (dans le fichier header.php)
  • modifier le filtre language_attributes

Ajout de language_attributes() dans le fichier header.php

<html <?php language_attributes(); ?>>

Modification du filtre language_attributes dans le fichier functions.php


// Ajout d'Open Graph pour le Doctype
function add_opengraph_doctype( $output ) {
    return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');

Et voilà ! Regardez le code source de votre site Internet et vous devriez voir que la balise HTML a été modifiée. Elle doit ressembler à ceci :

<html dir="ltr" lang="fr-FR" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">

Ajout des balises meta d’Open Graph sur les articles

Maintenant que nous avons modifier notre balise HTML et que le navigateur est apte à reconnaître les balises meta d’Open Graph, nous devons ajouter les différentes balises dans le header.

Déclaration du hook wp_head

Comment faire pour ajouter ces balises dans le header ?
Tout simplement grâce au hook wp_head qui permet d’ajouter le contenu présent dans la fonction entre la balise

On commence par déclarer notre hook dans le fichier functions.php :

function insert_opengraph_in_head() {
}
add_action( 'wp_head', 'insert_opengraph_in_head', 5 );

Ajout des balises meta Open Graph dans le header

Avant de commencer à ajouter les balises meta, on vérifie si nous sommes bien sur la page d’un article ou d’une page. Dans le cas contraire, on ajoute rien car les balises ne seront pas utiles.

Ensuite nous ajoutons 5 balises :

  • og:title : affiche le titre de l’article ou de la page
  • og:type : précise le type de contenu partagé
  • og:url :  affiche l’adresse url de l’article ou de la page
  • og:description : affiche un résumé de l’article
  • og:site_name : affiche le nom du site Internet
  • og:image : affiche l’image indiqué dans la balise

Le titre est indiqué avec la fonction get_the_title() tandis que l’adresse url est indiqué à l’aide de la fonction get_permalink().

En ce qui concerne l’adresse url de la miniature, on utilise la fonction wp_get_attachment_image_src() qui permet de récupérer un tableau contenant plusieurs informations dont l’adresse de l’image en index 0 du tableau que retourne la fonction.
En plus de la meta og:image, on ajoute un supplément link content l’attribut rel avec la valeur image_src.


function insert_opengraph_in_head() {
         
    global $post;
    if ( !is_singular()) // On vérifie si nous somme dans un article ou une page
	return;
        
    echo '<meta property="og:title" content="' . get_the_title() . '"/>';
    echo '<meta property="og:type" content="article"/>';
    echo '<meta property="og:url" content="' . get_permalink() . '"/>';
    echo '<meta property="og:description" content="' .strip_tags(get_the_excerpt()) . '" />';
    echo '<meta property="og:site_name" content="NOM DE MON SITE"/>';

    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) );
    echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    echo '<link rel="image_src" href="'. esc_attr( $thumbnail_src[0] ) . '" />';
}
add_action( 'wp_head', 'insert_opengraph_in_head', 5 );

Et voilà, votre site Internet est maintenant parfaitement configurer pour les partages d’article sur Facebook :)

Remarque : Il faut laisser un peu de temps à Facebook afin qu’il puisse analyser notre site. En attendant, vous pouvez tester votre script avec le lien suivant : http://developers.facebook.com/tools/debug

Cet article a été mis à jour il y a 1781 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

55 Commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  1. merci pour ces explication mais j’avoue ne pas avoir bien compris, je m’explique.
    1-tu dit d’ajouter <html > dans header.php. dans mon header j’ai <html xmlns="http://www.w3.org/1999/xhtml&quot; > . question :dois-je le remplacer ?
    2- Modification du filtre language_attributes dans le fichier functions.php > question : je ne trouve pas d’élément qui contient language_attributes !!!

    merci pour tes réponses

    • oups les balise ne s’affiche pas dans mon premier poste…

      = html <?php language_attributes(); ?
      = html xmlns= »http://www.w3.org/1999/xhtml » ?php language_attributes(); ?

    • Cela dépend de ton Doctype !

      Si tu es en HTML5, c’est la première solution, sinon c’est celle que tu proposes :)

    • simple pourtant ma question,si je met votre code ainsi,il reste inerte,que je le mette avant ou après ?> dans functions.php de mon thème.
      donc je demande si il ne manque pas quelque chose dans le code par exemple if ( au début0

    • Oui, mais if quoi ? « if » ça ne veut pas dire grand chose :)

      A savoir que l’astuce fonctionne uniquement sur les articles.

      Il y a aucun effet sur la page index ou des pages par exemple, uniquement les articles !

    • je ne sus pas codeur,je posais juste une question,je vois par if{ plus un tas de code,je demandais juste si il suffit de mettre le code comment vous le présentez ou si il fallait rajouter if{ ou autre chose,c’est tout,c’est simple comme question,non ?

  2. si j’ai demandais c’est que le oode coller dans functions.php par l’éditeur de texte de texte NotePad++ reste en texte noire,alors qui devrait prendre des « couleurs » faut-il le coller avant quelque chose ?Ou après ?

  3. bon,j’ai changé de thème et là le code est passé,il a pris de la couleur.
    Le hook on le met entre les parenthèse après head de ?

    les balises meta open graph dans single.php ou header.php ?

  4. Bonjour,

    désolé de déterré le topic mais j’ai un soucis j’ai le code qui est visible sur ma page « article » dès que je tente d’utiliser les bouts de code

    exemple sur cette page entre la navbar et le début de l’article

    http://bit.ly/tuqsbT

    une idée de comment je peux régler le soucis ? merci

    • Je n’ai pas saisi la demande votre problème !

      A savoir que ce code ne permet pas d’ajouter un bouton de partage Facebook, mais qu’il permet d’afficher les bonnes informations + images lors d’un partage sur Facebook.

    • Euh ça j’avais bien compris, j’ai juste un soucis le code s’affichait en clair au dessus de l’article on voyait ça de marqué

      « function insert_opengraph_in_head() {
      global $post;
      if ( !is_singular()) // On vérifie si nous somme dans un article ou une page
      return;
      echo  »;
      echo  »;
      echo  »;
      echo  »;

      $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) );
      echo  »;
      echo  »;
      }
      add_action( ‘wp_head’, ‘insert_opengraph_in_head’, 5 );  »

      J’ai donc enlevé le code et mis un autre en attendant de trouver une solution pour régler le problème

  5. Salut,

    je viens d’appliquer ta méthode sur Protuts.net mais quand je cliques sur J’aime la miniature n’est pas celle définie dans les meta du code source, normal ?

    Il y a un délai d’attente ?

    En tout cas, bonne astuce !

    • Bonsoir Aurélien,

      Alors non, il n’y a pas de délai d’attente, ça doit être instantané si il n’y a pas de système de cache !

      Je n’arrive pas à accéder à Protuts, c’est normal ?
      Je voulais jetté un oeil sur le code source

    • Je viens de me rendre compte qu’il y a peut être un conflit dans le code que j’ai mis.

      Après une mise à jour de l’article j’ai ajouté la ligne avec la balise link rel= »image_src »

      Essayez après avoir supprimer la balise link rel= »image_src », il y a peut être un conflit entre cette balise et la meta og:image.

      Je ne suis vraiment pas sûr de la solution, mais ça ne compte rien de tester :)

    • Merci de ta réponse ! J’ai essayé mais visiblement cela ne change rien…

      L’image affichée sur mon profil Facebook quand je cliques J’aime n’est pas la bonne…

      Est-ce que tu confirmes que cette technique fonctionne de ton côté ?

      P.S : ce serait cool si on pouvait répondre directement dans le corps des commentaires pour relire le commentaire précédent. Simple suggestion ;)

    • OK super ! Je vais refaire des tests de mon côté. Dans ton exemple, effectivement l’image affichée dans le J’aime est bien celle spécifiée dans les URLs (et je suppose que cela n’est pas liée au fait que c’est la première image de la page ?).

      Bientôt une nouvelle version ? Nice ! :cool:

  6. Merci pour cet article.

    J’ai bien suivi ton tuto, on peut apercevoir les différents open graph dans mon code source d’un article. Cependant, mon bouton j’aime/envoyer qui se situe dans un article ne fonctionne pas. Je ne comprends pas pourquoi (Le titre reprend l’url) et pas d’image associée.

    Si tu pouvais m’aider ça serait top.

    Merci

  7. @Britain : je ne me rappelle plus avec certitude, mais il me semble avoir tenté de mixer les 2 tutoriels et que cela fonctionnait. Maintenant ce n’est pas facile…

  8. je suis en WordPress 2.9.2. pour http://www.chambrescarnac.com je voudrais upgrader WP à la dernière version de WP avant de mettre tous les boutons de partage possibles
    Si j’ai bien compris http://codex.wordpress.org/fr:Mettre_a_Jour_WordPress

    « Depuis la version 2.7, WordPress dispose d’un outil interne de mise à jour automatique » MAIS ? il faut enregistrer la nouvelle version de WP en local ? puis lancer la procédure ?

    Parce que je n’ai pas dans mon admin la possibilité de « lancer cette mise à jour en vous rendant sur la page Outils > Mettre à jour (versions pré-3.0) »
    et pourquoi ?
    et comment je fais alors un bckup sql puis je dézipe wordpress-3.3.1-fr_FR.zip
    sur mon dd local et je lance Mise à jour manuelle ?

  9. à ce sujet on trouve juste ça Dans la readme de la wordpress-3.3.1-fr_FR.zip

    « A l’aide de l’outil de mise à jour automatique

    Si votre version de WordPress est égale ou supérieure à 2.7, vous pouvez utiliser l’outil de mise à jour automatique :

    Ouvrez la page wp-admin/update-core.php dans votre navigateur, et suivez les instructions ;
    Vous pensiez qu’il y aurai d’autres étapes ? C’est tout ! »

    mais je suppose qu’il faut avant dezipper wordpress-3.3.1-fr_FR.zip en local ?

  10. bonjour,

    j’ai un souci que j’arrive pas à règler.
    Quand je like une page sur mon site, l’info apparait bien sur facebook mais avec pas avec la bonne image.
    comment puis je lui imposé de prendre l’image de mon produit (prestashop)
    merci

  11. donnant souvent l’adresse de votre article sur le forum de wordpress-fr.net,je remarque les gens ont un doute à cause de ce titre « Ajout des balises meta Open Graph dans le header » cela porte à confusion avec header.php,peut être que « Ajout des balises meta Open Graph dans l’en-tête de votre site » serait mieux,bonne continuation.

  12. Si vous utilisez WordPress SEO by Yoast, il ne faut pas utiliser le code de cet article parce qu’il risque d’avoir deux fois les balises open graph.

  13. je viens de tout supprimer le code, j’ai réactivé WP SEO by Yoast, c’est mieux, mais j’ai ce message
    Open Graph Warnings That Should Be Fixed
    Parser Mismatched Metadata : The parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: ‘fb:admins’

    comme la 1ère fois que j’avais activé l’option, j’avais mis votre code pour Modification du filtre language_attributes
    mais ce bug.
    Merci tout de même

  14. Bonjour,
    je possède un site webradio et je voudrais que les personnes qui aime le titre en cours, puissent le partager sur leur mur facebook. il s’agit du titre, artiste et cover.

    Bien je galère je n’y arrive pas. auriez vous quelques indication et sans abuser un peu d’aide pour moi arriver à ce petit projet svp…

    Merci d’avance

  15. Merci pour cet article!
    Est il possible de savoir quoi changer dans le code du fichier functions.php pour ne plus avoir une ligne du type :
    Mar 16 2016 un article Voyage Laisser un commentaire
    quand je partage un article sur facebook ?
    Merci