Rendre compatible son blog wordpress avec le nouveau like de facebook

Cela ne vous a certainement pas échappé mais le bouton like a changé (cf l’article d’hier). Ce nouveau like prenant maintenant une image sur votre blog, il faut donc maintenant aider facebook à prendre une image adaptée au contenu de l’article et ainsi éviter que facebook pioche une image au hasard.

Donc pour associer une image à un article il faut utiliser et composer avec Open Graph de Facebook et intégrer une nouvelle balise dans le header de votre blog pour indiquer l’image à miniaturiser. Pour wordpress, le code générique à intégrer dans le fichier header.php est le suivant :

<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>"/>

Une fois intégré le bouton like prendra automatiquement l’image intégrée dans l’article. Si jamais votre article n’a pas d’image vous pouvez bien entendu lui donner une option par défaut comme par exemple :

<?php if ( has_post_thumbnail() ) { ?>
<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>"/>
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/defaut.png"/>
<?php }?>

Et si vous préférez ne pas toucher au fichier header.php vous pouvez intégrer une fonction dans le fichier function.php :

// add image to facebook like button
function fb_like_thumb() {
if ( has_post_thumbnail() ) { ?>
<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>"/>
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/defaut.png"/>
<?php }
}

add_action('wp_head', 'fb_like_thumb');

Et voilà vous voici compatible avec le like de facebook!

Cette entrée a été publiée dans wordpress, et marquée avec , , , le par .

A propos henri

Henri Labarre est consultant en stratégie auprès d'entreprises innovantes dans les domaines des TIC et plus particulièrement Internet au sein de 2803 MEDIA. Depuis 2005, Henri Labarre écrit sur ce blog sa veille et ses impressions sur l'évolution d'internet et des acteurs.

21 réflexions au sujet de « Rendre compatible son blog wordpress avec le nouveau like de facebook »

  1. Gilles

    Merci !
    Pour info, je viens de l’intégrer dans mon thème, qui est un thème enfant, et j’ai noté qu’il fallait utiliser plutôt que (qui renvoie l’url du thème parent).

  2. Jérôme

    Super merci pour l’info.
    J’ai ajouté le code dans le fichier header.php
    sauf que le bouton ne reprend pas automatique l’image de l’article. Il l’a remplacé par le logo de Facebook :s

  3. Jérôme

    a oui effectivement c’est très bizarre. J’ajoute le code sur le fichier header.php et lorsque je regarde le code source de mon blog, le code n’a pas été copié entièrement.
    Bizarre…

  4. Annie

    c’est bizarre toutes vos manip… j’ai rien fait et j’ai le choix des images… pour poster sur facebook… aussi de pas en prendre du tout

  5. henri Auteur de l’article

    Tu utilises bien les vignettes sur ton blog (mettre une image à la une)? Sinon il faut changer le code pour aller chercher l’image en taille originale.

  6. foxprime

    Pour ma part, ça ne fonctionne pas. Il publie toujours l’avatar par défaut sur Facebook au lieu de l’image de l’article. Même avec l’extension proposée par henri.
    D’ailleurs je profite du commentaire, comment faire en sorte que le texte lorsqu’on aime/partage l’article l’article sur Facebook soit celui de l’article et non pas de l’extension de l’article « partagez-le »

    Merci

  7. henri Auteur de l’article

    Regardes dans ton code de page d’article :

    < meta property="og:site_name" content="Foxprime.net" />
    < meta property="og:title" content="Dead Island : Le trailer qui buzz" />
    < meta property="og:url" content="http://www.foxprime.net/2011/03/dead-island-le-trailer-qui-buzz/" />
    < meta property="og:description" content="Vous avez aimé ? Partargez-le ! Tweet" />
    < meta property="og:type" content="article" />

    Tu trouveras la solution pour le texte…

    De mon point de vue il manque mon code dans ta page pour afficher l’image…

  8. foxprime

    Pourtant je l’ai mis tout en bas de mon fichier header.php peut-être au mauvais endroit…
    Je précise que je n’ai ajouté que ton premier code. Le but n’étant pas de mettre une image par défaut, je n’ai pas fait la suite (que j’ai quand même lu)

    Et sinon à la vue de ce que tu m’as montré, ça

  9. foxprime

    Pourtant je l’ai mis tout en bas de mon fichier header.php peut-être au mauvais endroit…
    Je précise que je n’ai ajouté que ton premier code. Le but n’étant pas de mettre une image par défaut, je n’ai pas fait la suite (que j’ai quand même lu)

    Et sinon à la vue de ce que tu m’as montré, ça coince ici mais où et comment l’éditer ?

    Désolé du double-commentaire, j’ai rippé sur la touche tab…

  10. Jeremy

    Je n’ai pas testé, mais pour ceux qui rencontrent un problème, cela vient peut être du fait que la fonction wp_get_attachment_url est à utiliser dans un loop seulement, si je ne m’abuse.

    Pour régler le problème, il vous faudrait donc démarrer un loop avant la fonction,

  11. Alexandre

    Chez moi tout fonctionne néanmoins question :

    Sur FB, l’image est mieux adaptée si la miniature est carrée, sinon ca fait de l’espace blanc sur l’image.

    Saurais tu comment en créant un post, celui-ci en plus de générer la miniature pour la home, génèrerait aussi une miniature de 50×50 ou il redimensionnerait rognerait les morceaux qui dépassent.

    on aura une image plus propre sur fb.
    tu peux faire le test en aimant un de mes articles sur mindthehype.com

    Cdt

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>