Open Graph, Like et WordPress

Facebook connect est amené à disparaître, le nom pas les fonctionnalités qui seront reprises par Open Graph.

Des plugins permettant une intégration en deux clics seront sûrement dispo sous peu, mais si vous ne voulez pas attendre et intégrer le « Like » sur votre blog WordPress je vous propose de suivre la procédure que j’ai appliquée pour y arriver.

J’ai lu les 3 pages de documentation suivantes

J’ai donc modifié dans mon template header.php pour définir les namespaces og & fb et y déclarer des variables

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:fb="http://developers.facebook.com/schema/" xml:lang="fr" lang="fr" dir="ltr">

<meta property="og:title" content="< ?php wp_title('»',true,'right'); ?>" />
<meta property="og:image" content="http://www.balencourt.com/favicon.gif" />
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="fb:admins" content="501610755" />

Veillez à avoir une image de taille raisonnable (50x50px) pour og:image qui est l’illu employée lors d’une publication d’un lien sur le mur d’un visiteur.

J’ai intégré dans footer.php de mon template l’appel au SDK Javascript (copié/collé du code) et j’ai utilisé l’ID de l’application liée à mon blog (héritage de Connect) en modifiant seulement cette ligne :

FB.init({appId: ‘your app id’, status: true, cookie: true, xfbml: true});

J’ai intégré dans le Loop index.php (sous chaque post) et single.php (entre les posts et les commentaires) le code suivant :

<div class="like>
       <fb :like href="< ?php the_permalink() ?>" layout="standard" show_faces="true" width="715" action="like" colorscheme="light" />
</div>

Et le résultat c’est un bouton Like en dessous de chaque note et la possibilité de poster un commentaire en lien de la note sur votre Wall.

Si vous aimez, il suffit de cliquer 😉

8 réflexions sur « Open Graph, Like et WordPress »

  1. Bonjour, tres bon article .. cela dit j’arrive pas a faire fonctionner le og:image ?
    a quoi sert cette balise ?

    bonne continuation

  2. Hello Denis,

    J’ai intégré ça sur plusieurs de mes sites depuis plus ou moins la même période que toi mais je me heurte à un problème de validité XHTML

    Par exemple sur http://www.les-dessous-du-dessin.be/detail_planche.php?idplanche=1392

    J’ai 3 erreurs syntaxiques :

    line 2 column 52 – Erreur: there is no attribute « xmlns:og »
    line 8 column 15 – Erreur: there is no attribute « property »
    line 57 column 321 – Erreur: there is no attribute « allowTransparency »

    Attention ça n’empêche pas de fonctionner … mais j’essaye de faire des pages W3C compliant et ce genre de truc m’énerve. As tu une idée ?

    A+

    Thibs

  3. Noble objectif !
    Je ne suis pas un crac des standards W3C… donc de peu d’utilité pour t’aider. Désolé.

  4. salut,

    je parcours le web depuis des heures à la recherche d’une solution pour un problème avec og:image … j’en profite pour poster ici, si quelqu’un connait le même problème.

    j’ai inséré les meta de configuration dans le head, j’ai copié-collé les xmlns pour og et fb, j’ai inséré le bouton dans une page de mon site, et la création du message sur mon mur facebook fonctionne bien. il y a juste un souci : l’image n’est pas celle que j’ai mentionnée dans og:image , il prend une image au hasard sur la page.

    si vous voulez voir la source d’une page d’exemple :
    http://www.warp-zone.ch/tests/1219/Assassin%27s+Creed++Brotherhood.htm

    A+

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.