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.

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!

18 commentaires

  1. 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.

    Reply
  2. 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

    Reply
    • 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 ;-)

      Reply
      • 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.

        Reply
    • 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 » ;-)

      Reply
  3. 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 ?

    Reply
    • 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.

      Reply
  4. 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é.

    Reply
  5. 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 ?

    Reply
    • 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

      Reply
      • 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

        Reply
      • 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 ?

        Reply
  6. 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.

    Reply
  7. 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/

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

    Reply
  9. Merci ça va bien m’aider !

    Reply

Commentez cet article:

Derniers Articles

  • segments avancés
    Les Segments avancés de Google Analytics et 20 exemples

    Il existe plusieurs outils de Web Analytics qui vous permettent de segmenter vos données, moi j’utilise Google Analytics et ses segments avancés que je vais essayer de vous détailler en suivant ce plan : 0) Introduction I) Qu’est-ce que sont les segments avancés et pourquoi les utiliser? I-a) Qu’est ce que sont les segments avancés? […]

  • Netlinking
    Qu’est-ce que le Netlinking et comment faire?

    Voici le sommaire de cet article : 1/ Qu’est-ce que le Netlinking ? 2/ Qu’est-ce qu’un backlink de qualité ? 3/ Plutôt White, Grey ou Black Hat ? 4/ Restez Naturel et Variez 5) Quelles techniques et quels sites utiliser pour son Netlinking ? 6) Analyser 7) Etre organisé et planifier son Netlinking 8) Conclusion […]

  • thumb
    Tout savoir sur le Temps de pose

    Il y a quelques semaines nous parlions d’ouverture du diaphragme et de profondeur de champ, aujourd’hui j’aborderai le deuxième chapitre lié à l’exposition : la vitesse d’obturation. Rappel : une photo bien exposée est une photo qui combine parfaitement les trois facteurs du « triangle de l’exposition » : – L’ouverture du diaphragme – Le […]

  • thumb-i
    Tu savais que …?

    Vous retrouverez sur cet article plein d’anecdotes et de statistiques liées au web, aux réseaux sociaux, à Google, des geekeries… Pour les découvrir en avant-première, suivez moi sur Facebook , sur Google+, sur Pinterest ou sur Twitter! Cette page est mise à jour tous les jours, n’hésitez pas à partager ces images sur cos réseaux […]

  • seo-copywriting
    Comment écrire ses articles et bien utiliser les mots clefs?

    C’est article est la suite de "Comment choisir ses mots clés pour référencer son site?", donc si vous avez la flemme n’avez pas eu le temps de lire ce précédent article, je vous rappelle que : – c’est essentiel de réfléchir sur quels mots clefs associer à chaque page… et donc éviter la cannibalisation SEO […]

  • thumb-ouverture
    Tout savoir sur l’ouverture du diaphragme

    En photographie si vous souhaitez sortir de l’ennuyeux mode « auto » pour faire de la photographie avec créativité et personnalité, il y a un concept qui est essentiel : l’exposition. Une photo bien exposée est une photo qui combine les trois facteurs du « triangle de l’exposition » : – L’ouverture du diaphragme – […]

  • pentax-eau-thumb
    Victoire de LRWEB lors du Concours « l’eau » organisé par Pentax

    Les quelques lecteurs fidèles se demanderont ce que vient faire un article qui parle de photographie sur mon blog… J’en profite donc pour vous annoncer un virage important pour ce blog. Dorénavant je ne parlerai plus uniquement de Web-marketing et de Web Design mais également de Photographie qui est depuis plus d’un an une vraie […]

  • communiques-presse-thumb
    Comment rédiger et publier un communiqué de presse optimisé SEO?

    Voici comment s’articulera cet article : Les communiqués de presse au cœur de votre stratégie SEO Comment rédiger vos communiqués de presse Choisir des bonnes plateformes de press release Comment Publier vos Article de presse Et après la publication je peux en remettre un coup ? Fichier Bonus à télécharger (liste de plus de 250 […]

  • tab
    Tutoriel : Intégrer un Onglet iFrame sur votre Fan Page Facebook

    La durée de vie d’un tutoriel sur Facebook et ses fonctionnalités est très courte vu que le site californien change constamment! Mais vous avez été si nombreux à me demander un tutoriel mis à jour sur la création et l’intégration d’un Onglet sur une Page Fan, que j’ai finalement craqué… Cet article est donc la […]

  • multilingue
    Site Multilingue: domaines, répertoires ou sous-domaines?

    La première règle est qu’il n’y en a pas! Un peu facile comme introduction… Disons qu’il y a de très bonnes techniques, des bonnes techniques et des techniques un peu moins bonnes! Décidemment cette intro est complètement nulle…Et pour conclure en mocheté cette inutile introduction, disons que chaque site multilingue aura sa propre stratégie en […]

  • imacros-bh
    Tutoriel iMacros et Exemples de macros

    Cet article t’intéressera si: – tu souhaites simplement gagner du temps en automatisant des opérations que tu répètes quotidiennement, – si tu es SEO et que tu souhaites automatiser des flux, poster plus rapidement, créer des backlinks ou rendre ta LinkWheel plus puissante, – si « Bookmarking Demon », « SenukeX », « Scrapebox » et autres softwares de BH te […]

  • contentspinning
    Content Spinning: comment faire et quels logiciels utiliser?

    Le content spinning en SEO est une technique qui consiste à créer du contenu rapidement, mécaniquement en substituant des mots grâce aux expressions simples du langage PHP. Elle est très souvent utilisée par la communauté des SEO Black hat pour générer des backlinks. Le rendu peut être propre et ressembler à une reformulation manuelle ou […]

  • like-wordpress
    Comment ajouter le bouton Like de Facebook sur WordPress?

    Vous avez un site web? Que vous ayez une page Facebook ou non, le bouton « like » de Facebook peut être un vrai générateur de trafic si vous l’utilisez bien. Les avantages du bouton « Like » Le bouton Like est un outil très puissant qui permettra à vos lecteurs de vous indiquer qu’ils apprécient votre contenu mais […]

  • likekei
    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: Si vous avez un blog WordPress, c’est très simple, il suffit d’ajouter quelques meta […]

  • thumbb
    The Passion Project: l’initiative Facebook de Novoceram

    Depuis Avril 2011, je suis responsable Web chez Novoceram, un des leaders mondiaux du secteur céramique. Je souhaite vous faire partager une de mes expériences Web chez Novoceram. L’évènement de l’année pour les entreprises du secteur céramique est le Cersaie. Chaque année, le stand de Novoceram illustre un thème choisi l’équipe. L’année dernière, c’était « le […]

Devenez Fan de Léonard Rodriguez sur Facebook
Retrouvez moi sur Google
Suivez-moi sur Twitter
COntactez-moi