Comment intégrer Facebook Open Graph dans WordPress?

Quand une personne « aime » votre contenu, un résumé de la page s’affichera sur son mur Facebook. l’Open Data Graph Meta vous permettra d’avoir une correspondance exacte entre le titre de votre article, la vignette et la description comme sur cet exemple:
titre vignette et description article facebook
Si vous avez un blog WordPress, c’est très simple, il suffit d’ajouter quelques meta dans la page header.php de votre thème.

facebook open graph

1) Se munir de l’ID Facebook Admin et de l’APP_ID

Mais avant de modifier le fichier header.php, vous devez vous munir de l’« id facebook admin » et de votre « app_id » que vous pouvez retrouver sur cette page http://www.facebook.com/insights/.
Cliquez en haut à droite sur « statistiques de votre site Web » ou « insights for your website », puis choisissez la page en question et retenez l’ID.
Voir les deux screenshots ci-dessous:
Votre fb:App_ID:
facebook insights
Votre fb:admin:
fb_admin_id
Vous aurez également besoin de connaître l’adresse vers le logo principal de votre site. Si vous n’en avez pas, je vous conseille d’en créer un et de l’ajouter dans le dossier images de votre thème WordPress.

2) Ajouter les meta tags dans la page header.php

Voici les tages dont vous aurez besoin pour la suite de ce tuto:
Title: c’est le titre de votre page ou de votre article. Il apparaîtra comme titre lorsque les gens vont partager votre article sur Facebook.
Description: le texte descriptif qui sera affiché sous le titre lorsque les gens vont partager votre article sur Facebook.
Type: cela définit la catégorie de l’information. Les catégories sont définies dans le protocole Open Graph, et il en existe trois: blog, article, site Web.
URL: l’URL de la page.
Image: l’image qui sera ajoutée sur la gauche lorsque les gens partageront le contenu.
Site_name: le nom de votre site.

Il ne vous reste plus qu’à insérer le code suivant dans votre page header.php. N’oubliez surtout pas de remplacer votre fb:app_id, votre fb:admin! La première ligne de code pourrait déjà être présente, faîtes attention à ne pas la dupliquer et veillez à la personnaliser.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" <?php language_attributes(); ?>>
<?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>
<!-- Facebook Opengraph -->
    <meta property="fb:app_id" content="your_app_id" />
    <meta property="fb:admins" content="your_admin_id" />
    <meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if (is_single()) { ?>
    <meta property="og:title" content="<?php single_post_title(''); ?>" />
    <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php } else { ?>
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
    <meta property="og:description" content="<?php bloginfo('description'); ?>" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<?php bloginfo('template_url') ?>/path/to-your/logo.jpg" />
<?php } ?>

Vous pouvez maintenant lire le prochain article pour intégrer votre bouton « Like » de Facebook sans avoir peur du résultat!

Ces articles pourraient également vous intéresser :

Comment intégrer Facebook Open Graph dans WordPress? Dernière modification : 2011-10-31T20:21:01+00:00 de Leonard
Rating: 5.0/5. From 1 vote.
Please wait...
20 Comments
  • darknote

    12 novembre 2011 at 14 h 26 min Répondre

    il y a cette méthode aussi
    http://www.geekpress.fr/wordpress/tutoriel/ajouter-meta-open-graph-facebook-theme-wordpress-593
    le plus pas besoin d’avoir de page sur Facebook pour partager ces articles,je recommande ce tuto.

  • Louis_marie_c

    15 novembre 2011 at 17 h 47 min Répondre

    Bonjour,

    J’ai tenté d’intégrer ce morceau de code dans mon header, mais lorsque je suis sur la home page, <meta property="og:url" content=" »/> ne me donne pas le lien de la home mais un lien d’un article, comment faire pour le forcer à me donner le lien du site.

    Merci

    • Oreille malade

      16 novembre 2011 at 12 h 56 min Répondre

      Si vous êtes bien sous WordPress, il existe de nombreux plug-ins qui peuvent vous permettre de le faire automatiquement, comme le très connu WordPress SEO (de Yoast) par exemple… Ce sera peut-être plus simple pour vous 😉

      • Leonard

        18 novembre 2011 at 0 h 49 min Répondre

        En effet, pour ceux qui ne souhaitent pas mettre les mains dans le cambouis il y a de nombreux plugins qui s’en occuperont pour vous. Merci oreille malade pour ton lien.

        • Emma

          12 mai 2017 at 17 h 33 min Répondre

          Merci pour cet article. Pour l’instant j’utilise le plugin Yoast SEO mais mon problème est le suivant: pour des articles importants, je voudrais modifier l’image à la une et que ce soit pris en compte pour le partage sur Facebook. Sais-tu ce que je dois faire pour forcer Yoast ou OpenGraph à prendre en compte la mise à jour de mon image? Merci.

    • Leonard

      18 novembre 2011 at 0 h 41 min Répondre

      Bonjour,

      si la home page est la home page aussi sur wordpress essaie d’insérer « echo get_option(‘home’); » au lieu de  » the_permalink()  » ou tu peux tout simplement insérer l’adresse manuellement ex »http://www.tonsite.com » 😉

  • Louis_marie_c

    18 novembre 2011 at 13 h 54 min Répondre

    Alors j’ai bien tenté mais maintenant je n’ai plus d’URL. Ce que je ne comprends pas en fait c’est qu’il faut dans la meta URL qu’il prenne le permalink. Ca marche bien avec le code de base, mais sur la home il ne me récupère pas le lien de la home mais un autre.

    Si je met ce bout de code donné dans les commentaires, il va tout le temps aller chercher le lien de la home et pas le lien de l’article ?

    • Leonard

      18 novembre 2011 at 14 h 17 min Répondre

      Alors je reprends un point que je n’ai pas assez bien expliqué. Dans le code de l’article il y a des conditions. Le premier bloc est pour les articles et la dernière condition est pour les autres types de page comme ta home page.
      Tu peux AJOUTER et non remplacer un bloc comme le premier « if (is_single()) » pour ta home page avec la condition « if (is_home()) » et y mettre
      …meta property= »og:image » content= »adresse de ton image ou logo »…

      Si ce n’est pas assez clair écris moi via le formulaire de contact puis je t’enverrai le code.

  • Arnaud

    22 décembre 2011 at 0 h 13 min Répondre

    Bonjour,

    Merci pour ce tutoriel, que je suis pas à pas.

    J’ai partiellement réussi : le bouton « j’aime » fonctionne, mais il ne prend pas en compte le logo que j’indique, ni le descriptif de l’article.

    Par contre, il y a un descriptif correct dans la page d’accueil (qui, sur mon site, est une vraie page nommée « Accueil » – les articles étant, eux, sur une page nommée « Actu »).

    J’ai fait plusieurs essais en modifiant les paramètres à plusieurs endroits, je n’y arrive pas.

    J’ai pourtant bien spécifié l’emplacement du logo, et tout le reste.

    On peut voir le résultat sur mon site (ne pas tenir compte du problème actuel d’intégration du formulaire déroulant sous le « j’aime », ça doit être un problème de CSS, que j’essaie de régler par ailleurs).

    Je ne sais pas ce que j’ai oublié.

  • Ben

    19 avril 2012 at 18 h 56 min Répondre

    Bonjour,

    J’ai bien réussi à installer le bouton dans les articles (single.php)
    Mais je n’arrive pas à le faire marcher correctement sur la page d’accueil…

    the_permalink me renvoit « http://xxxx.free.fr/?p=1 »
    au lieu de me renvoyer http://xxxx.free.fr/

    Par conséquent, c’est mon premier post qui est liké.

    Une solution ?

    • Leonard

      20 avril 2012 at 14 h 02 min Répondre

      Essayez d’ajouter une condition après la condition pour les posts single de cette façon par exemple:

      < ?php else if (is_home) { ?>
      < meta property="og:title" content="VOTRE TITRE" />
      < meta property="og:description" content="VOTRE DESCRIPTION" />
      < meta property="og:type" content="article" />
      < meta property="og:image" content="URL DE VOTRE IMAGE 100x100" />

      (attention j’ai ajouté un espace entre < et le tag meta donc "< meta" vous devrez l'écrire sans l'espace bien sure)Et avant de tester, passez l'URL de votre home page au debugger ici: http://developers.facebook.com/tools/debug

      • Merci pour ces conseils. Je les avais malheureusement déjà testés.

        Mon souci vient du fait que le is_home() ou is_front_page() ne semblent pas reconnaître la page… c’est constamment géré comme un post. Même en sortant les balises meta de la boucle if.

        http://developers.facebook.com/tools/debug/og/object?q=duchemindusel.free.fr

        L’url canonique est celle d’un post p=198.
        the_permalink sur la homepage me donne quand à lui un post p=1.

        Quand je cherche à partager l’url du site sur Facebook, ça redirige vers p=198…

        Bref je suis paumé…

        Auriez-vous une adresse msn pour échanger ?
        Merci

      • La petite souris

        26 septembre 2012 at 22 h 40 min Répondre

        Bonjour,
        Merci pour cet article.
        Pour la balise og:description je récupère tout le contenu de l’article, ce qui est beaucoup trop long. Je préférerais renseigner la balise avec le titre de la page, de l’article ou du produit (j’utilise woocommerce).
        Ou alors avec le descriptif ou le résumé.
        Savez-vous quelle variable il faudrait utiliser ?

  • Ben

    20 avril 2012 at 20 h 34 min Répondre

    En fait je viens de voir que cette gestion du premier post au lieu de la page est aussi un problème rencontré sur mes autres pages… (males et femelles)… et pas seulement sur la homepage.

    Et à côté, j’ai le problème de l’url canonique fausse.

  • Tony

    22 octobre 2013 at 17 h 43 min Répondre

    Excellent article. Si je peux me permettre, j’ai créé un plugin récemment pour ajouter l’Open Graph Protocol sur les articles et pages d’un site WordPress d’une façon similaire au 2ème point de votre article. J’ai toutefois ajouté la possibilité de personnaliser le titre et la description pour chaque page et article. J’ai également rajouté le code pour faire la même chose sur Twitter.
    Je me permet d’ajouter le lien pour ceux que ça pourrait intéresser : http://wordpress.org/plugins/wp-smo/

  • orthalion

    8 septembre 2014 at 15 h 03 min Répondre

    Merci beaucoup pour ce tutoriel qui m’a beaucoup aidé ! Je vais voir les autres qui vont peut-être aussi m’intéresser !

  • Julien P.

    23 juin 2015 at 17 h 44 min Répondre

    Merci ça va bien m’aider !

  • WORDPRESS - johannalm | Pearltrees

    17 novembre 2015 at 12 h 29 min Répondre

    […] Thèmes wordpress. Comment intégrer Facebook Open Graph dans WordPress? […]

  • stephanie

    14 décembre 2017 at 10 h 58 min Répondre

    Bonjour,
    Très bon tutoriel, merci beaucoup !
    sauf qu’au lieu de la description de l’article, s’affiche la description du site..Je précise que j’ai intégré mon code dans le fichier function (voir ci-dessous).
    Merci pour votre aide.
    Cdt,

    // 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’);

    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 ‘ID)) . ‘ » />’;
    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 );

Post a Comment