Open Graph, Like et WordPress
22 avril, 2010Facebook 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 
PARTAGER
Tweets that mention Open Graph, Like et Wordpress » Denis au fil du web -- Topsy.com
fred G dit
Bonjour, tres bon article .. cela dit j’arrive pas a faire fonctionner le og:image ?
a quoi sert cette balise ?
bonne continuation
PlF dit
Voici le lien vers le plugin WordPress pour le bouton « j’aime » de Facebook:
http://wordpress.org/extend/plugins/like
Denis dit
og:image est utilisé comme illustration si quelqu’un partage un commentaire sur la page sur son wall, il est donc possible d’utiliser cette variable pour y inclure l’image la plus « palante » d’un post.
Un autre plugin
http://wordpress.org/extend/plugins/facebook-open-graph-widget/
José dit
N’y a t ‘il pas un problème de compatibilité avec facebook connect?
Notamment si on doit utiliser les deux script :
http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/fr_FR
et http://connect.facebook.net/fr_FR/all.js
Thibs dit
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
Denis dit
Noble objectif !
Je ne suis pas un crac des standards W3C… donc de peu d’utilité pour t’aider. Désolé.
Gabriel dit
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+