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 fichierheader.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 }?>
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!
21 commentaires sur “Rendre compatible son blog wordpress avec le nouveau like de facebook”
Les commentaires sont fermés.
Merci champion !
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).
Gilles utilise http://pastebin.com sinon on ne verra pas le code
Euh… get_stylesheet_directory_uri plutôt que bloginfo :)
Propre.
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
Jérôme tu as du louper un truc car
< meta property="og:image" content=""/>
est vide…
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…
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
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 ?
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.
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
Installes ce plugin pour générer les vignettes http://wordpress.org/extend/pl.....thumbnail/
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
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…
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
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…
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,
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
Merci encore pour l’info.
Bonjour,
Merci purces informations pour rendre compatible un wordpress avec le bouton like de facebook.