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!

Contactez une agence WordPress si vous n’arrivez pas à intégrer Facebook Open Graph !

Si pour certains utilisateurs, intégrer Facebook Open Graph relèvera d’un véritable jeu d’enfant, pour d’autres utilisateurs, cela peut être une très grande difficulté ! Et dans ces cas là, il est primordial de faire appel à de véritables professionnels de la situation qui sauront parfaitement faire tout le nécessaire. Avec une agence WordPress digne de ce nom, vous pourrez même aller encore plus loin et dépasser toutes vos espérances. Il ne sera donc pas utile de suivre ce tutoriel qui peut être compliqué pour les plus novices : en vous tournant vers une agence spécialisée dans la création et la maintenance de sites sous WordPress, vous n’aurez pas à vous en occuper !

Néanmoins, comme vous avez pu le constater si vous avez fait quelques recherches sur le web, il se trouve que certaines agences WordPress ou freelances ne sont pas toujours très recommandables. Pour en avoir le coeur net, vous pouvez faire quelques recherches sur le web, mais les avis que vous trouverez ne sont pas toujours représentatifs de la réalité : certains datent d’il y a plusieurs mois ou d’il y a plusieurs années. Cela peut malheureusement vous causer des problèmes dans le cas où vous vous faites une idée fausse sur une agence qui a pu changer entretemps.

Quelle agence WordPress recommandez-vous pour cette installation ?

Après avoir eu l’occasion de faire de nombreuses recherches sur le web, nous sommes aujourd’hui en mesure de vous indiquer la meilleure agence WordPress qui nous semble aujourd’hui la plus pertinente. En effet, avec une agence pour wordpress comme celle-ci, vous pourrez être sûr et certain de bénéficier d’une présence dans le Facebook Open Graph, et bien plus encore ! Cette agence n’est pas seulement réputée pour cela : elle peut aussi vous aider dans bon nombre d’autres prestations aussi diverses que variées. Il ne vous restera plus qu’à contacter cette agence pour en savoir plus !

Comment contacter cette agence WordPress ?

Si vous avez besoin de contacter cette agence spécialisée avec le CMS WordPress, alors il n’y a rien de plus simple. Rendez-vous sur le site web de l’agence et remplissez le formulaire de contact prévu à cet effet. Vous pourrez ainsi en quelques clics demander à être recontacté, pour obtenir des informations ou un devis pour la création ou la refonte de votre site internet. Il vous suffira tout simplement de laisser quelques informations sur vous et votre site internet, sans oublier de donner un message pour apporter un peu de contexte. Notez toutefois que plus votre demande sera précise, plus vous obtiendrez une réponse qualifiée.

Quelles sont les autres prestations proposées par cette agence web ?

Si de plus en plus d’annonceurs et d’éditeurs de sites web font appel à cette agence WordPress, cela n’a rien d’un hasard ! En effet, elle propose tout un panel de services tous plus intéressants les uns que les autres. Pour en profiter, il n’y a rien de plus simple : sur une page de l’agence, vous trouverez toutes les prestations concernant WordPress, et celles-ci sont assez nombreuses !

Vous pourrez par exemple demander à réaliser une prestation de création de site vitrine sous WordPress, tout en bénéficiant d’une solution technique pour le référencement naturel de votre site web. Et dans le cas où vous avez besoin d’un site de vente en ligne et non d’un site vitrine, cela sera aussi possible : il vous suffit tout simplement d’opter pour la solution Woocommerce qui a d’ores et déjà pu faire ses preuves sur de nombreux sites de vente en ligne.

Sachez également que des prestations de formation sur mesure sont également disponibles avec cette agence : c’est idéal si vous souhaitez former vos équipes à l’utilisation d’un site WordPress. Vos collaborateurs pourront ainsi ajouter des articles, les corriger, et les publier directement en étant autonomes. À l’heure où on sait que le moteur de recherche Google apprécie de plus en plus les contenus clairs et précis, profitez-en pour tirer profit de toute l’expertise de vos collaborateurs en interne !

Enfin, en travaillant avec cette agence, vous pourrez bénéficier d’un site internet réalisé 100% sur mesure pour vous, sans que votre site web ne ressemble à ceux des concurrents !

Rating: 5.0/5. From 1 vote.
Please wait...
Voting is currently disabled, data maintenance in progress.
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:


      < 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

      • Ben

        20 avril 2012 at 20 h 30 min Répondre

        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