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.

  • Quentin

    Merci champion !

  • http://www.katorz.fr 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).

  • http://www.2803.fr henri

    Gilles utilise http://pastebin.com sinon on ne verra pas le code

  • http://www.katorz.fr Gilles

    Euh… get_stylesheet_directory_uri plutôt que bloginfo :)

  • http://www.streetlive.fr Tik

    Propre.

  • http://www.lesmarquesetmoi.fr 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

  • http://www.2803.fr henri

    Jérôme tu as du louper un truc car

    < meta property="og:image" content=""/>

    est vide…

  • http://www.lesmarquesetmoi.fr 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…

  • http://www.penseelibre.fr 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

  • http://www.espace-musculation.com/ Musculation

    Ca ne marche pas chez moi, ca fait buger le site :S

    Une solution ? Est ce qu’il y a pas une erreur dans le code ?

  • http://www.2803.fr henri

    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.

  • http://www.espace-musculation.com musculation

    j’utilise dans les articles des images mais je ne sais pas
    si c’est des vignettes. est ce que vous pouvez me
    dire si ça en est ? (http://www.espace-musculation.com)

    donc si ce n’est pas des vignettes, quels code mettre ?

    merci pour vos réponses

  • http://www.2803.fr henri

    Installes ce plugin pour générer les vignettes http://wordpress.org/extend/pl.....thumbnail/

  • http://www.foxprime.net 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

  • http://www.2803.fr henri

    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…

  • http://www.foxprime.net 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

  • http://www.foxprime.net 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…

  • http://jeremy.tagada.hu 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,

  • http://www.mindthehype.com/ 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

  • http://www.chez-moi.biz Blog Wordpress

    Merci encore pour l’info.

  • http://www.immobilier-vietnam.com agences immobiliere vietnam

    Bonjour,

    Merci purces informations pour rendre compatible un wordpress avec le bouton like de facebook.