Depuis peu , Facebook vient d’améliorer le fonctionnement du bouton Like ou J’aime. Il poste désormais un résumé sur le profil dans le style de bouton Share ou Partagez. Voici comment définir l’image miniature associée par défaut à ce résumé sous WordPress.

miniature bouton like j aime facebook wordpress Wordpress : Modifier limage dun article associé au bouton Jaime de Facebook

Jusqu’à présent, j’utilisais le bouton Share qui permettais de réaliser un meilleur rendu lorsqu’un lecteur partagait un article, en effet celui-ci affichait un court résumé de l’article ainsi qu’une miniature.

Chaque fois que l’on cliquait dessus, on arrivait sur une page qui nous permettait de choisir la miniature associée à l’article, et pour mon cas, bien souvent, celle par defaut ne correspondait pas souvent à l’article partagé.

Avec l’arrivée du bouton « J’aime » amélioré, on arrive plus sur cette page d’interface, la miniature est générée automatiquement, ne laissant plus aucun choix à l’utilisateur. Ceci est bien en taux de conversion, car on passe d’un partage en deux clics en un partage en seul clic.

Mais quel est donc l’impact réel si la miniature n’image en rien votre article…


Il suffit cependant d’ajouter dans la partie head de votre code une balise link pointant vers votre image source de l’article.

<link rel="image_src" href="mon-image.jpg"/>

Voici donc une modification à intégrer au fichier fonction.php de WordPress pour générer une miniature correspondante à la première image de l’article.

add_action( 'wp_head', 'fb_like_thumbnails' );
function fb_like_thumbnails()
{
global $posts;
$default = 'http://www.monblog.com/mon-image-par-defaut.png';
$content = $posts[0]->post_content;
$output = preg_match_all( '/<img.+src=['"]([^'"]+)['"].*>/i', $content,
                                      $content, $matches);
if (( $output> 0 ) & is_single())
$thumb = $matches[1][0];
else
$thumb = $default;
echo '<link rel="image_src" href="'.$thumb.'"/>';
}

Personnellement je n’utilise pas la fonction native de thumbnail d’article intégré à WordPress, mais rien ne vous empêche de l’utiliser pour l’affecter à l’image par défaut avec la fonction the_post_thumbnail();

Il faut savoir que si vous voulez tester le résultat final sans pourrir votre profil Facebook et perdre vos amis, vous pouvez tester le resultat sur la page Linker Tool

  • http://themesps3.fr/ Crunch

    Je vais tester ça, merci bien pour cette astuce :)

  • http://cyril.lopez.tk CyrilLopez

    Merci pour cette news

    Du coup je me suis installé le plugin
    http://wordpress.org/extend/plugins/add-image-src-meta-tag/

    • http://www.semageek.com/ Semageek

      Tiens, j’avais même pas vu qu’un plugin existait, pas grave, au moins je garde la maîtrise d’une partie du code ;)

  • http://themesps3.fr/ Crunch

    Je viens de le tester et il me renvoie une erreur à la ligne 7 …

    • http://www.semageek.com/ Semageek

      Oui, je confirme, je corrige, mon plugin pour afficher du code sous wordpress a fait des sienne…

  • http://www.picsl.fr/ Pics’L

    Bonjour,

    Chez moi plusieurs erreurs que j’ai corrigé, déjà il manque les « \ » devant chaque apostrophe dans preg_match_all au niveau de l’expression régulière, ce qui m’amenait une erreur interne du serveur (Erreur 500).

    J’ai donc corrigé par : ‘//i’
    Ce qui fonctionne très bien.

    Et ensuite, il y a un $content en trop, (voir doc. PHP de preg_match_all).

    Du coup la ligne finale donne :
    $output = preg_match_all( ‘//i’, $content, $matches);

    Après ces quelques modifications, tout fonctionne très bien et cela me renvoie bien la première balise « img » de mon article.

    Merci pour ces explications en tout cas, cela m’a bien aidé pour mon blog.

  • http://www.picsl.fr/ Pics’L

    Ligne finale en « pas-corrigée-par-le-html-filtré » :


    $output = preg_match_all( '//i', $content, $matches);

    Désolé pour le double commentaire.

    • http://www.semageek.com/ Semageek

      Ce plugin pour mettre en forme du Php me sort des yeux, le code est bon mais l’affichage part en c…**!

    • http://www.picsl.fr/ Pics’L

      Surtout qu’au final il manque la moitié de ce que tu écris ^^

      Donc bref… pour le preg_match_all, il suffit de reprendre ce que Semageek a écrit dans son article et d’ajouter des « \ » devant les 3 « ‘ » … Du moins pour ceux qui ont les mêmes problèmes que moi.

      Merci encore Seamgeek.

  • small

    Quelqu’un pourrait il publier le code à jour. En effet, je dois avouer que je ne suis pas un caide du php.

    Merci beaucoup !!!! :)

    • http://www.semageek.com/ Semageek

      Je viens d’uploader un fichier avec le code propre
      facebook_thumbnail.txt
      Ce sera plus clair comme ça. ;)

  • small

    Merci beaucoup !

  • http://www.pleaz.fr Thpùas

    Merci beaucoup pour ton aide précieuse. Cela m’a été fort utile. :)

  • blazers

    Bonjour,
    merci pour ce code mais je ne comprends pas ceci :
    « ‘http://www.monblog.com/mon-image-par-defaut.png’ » car pour que ca marche, je dois à chaque fois changer ce lien avec le bon lien de l’image que je veux voir en miniature. Est ce normal ?

    merci d’avance et bravo pour votre site

    • http://www.semageek.com/ Semageek

      ‘http://www.monblog.com/mon-image-par-defaut.png’ -> ceci correspond à l’image par défaut que tu veut affecter si ce n’est pas une page article, genre ta home page et les autres.

    • blazers

      Ah ok, j’ai compris -)
      merci

  • http://www.blog-united.com [Y]vaninho

    Bonjour,

    help me, help me!! :D

    Aujourd’hui, lorsqu’un visiteur cliquer sur le bouton « j’aime » une image qui n’a rien à voir avec l’article est associée.

    J’utilise les thumbnail dans mon thème. Je dois faire quoi exactement comme modification au niveau du code?

    1 – « http://www.monblog.com/mon-image-par-defaut.png »: mon image par défaut s’il n’y a pas de thumbnail

    2 – «  »:Je mets ce bout de code dans la balise

    3 – …?

    Merci d’avance

    • http://www.blog-united.com [Y]vaninho

      oups… le code n’a pas été pris en compte…

      donc:

      2 – dans ma balise « head » je mets le premier bout de code donné dans l’article.

  • jeremy

    Fatal error: Call to undefined function add_action() in /homez.231/jeremyco/www/nighttunes/wp-includes/functions.php on line 4316

    Quelqu’un pourrait m’éclairer ? :)

    Merci d’avance

    • http://www.semageek.com/ Semageek

      Sans la ligne 4316 du fichier function.php on peut pas faire grand chose, copie là au cas où… ;)

  • http://www.blog-united.com [Y]vaninho

    Bonjour,

    une petite relance concernant mon message précédent.
    J’ai pas tout saisi perso.

    Un petit coup de main svo :(

    • http://www.semageek.com/ Semageek

      salut,
      tu ne place rien dans la partie head si tu utilise la fonction dans fonction.php, elle rajoutera automatiquement le code, c’est son rôle.
      Pour l’utilisation des miniatures d’articles intégré à wordpress, je n’ai pas testé car comme je l’ai signalé j’utilise la récupération de la première image disponible dans l’article.

  • http://www.House4DJ.com Stefano Di Spinelli

    Salut,

    Ceci a réglé le problème que je me trainais depuis 4 mois. En revanche, il y a t-il une solution lorsque que l’on copie/coller directement le lien de l’article dans Facebook parce que personnellement ça beug toujours pour ce côté là ?

    Merci

  • http://wertn.com/blog Guillaume K.

    Yes geant !

    Merci merci :)

  • http://www.zero-yen.fr/ Rom’z

    Bonjour et merci pour cette précision !

    Je développe actuellement un site où je n’utilise pas WordPress mais du code que je tape moi même.

    J’ai donc repris le code associée dans votre explication : c’est à dire la première ligne avec le « link » vers l’image par défaut de la page.

    Le problème c’est que dans tous mes articles, ma miniature a été uploadée via le forum et n’est donc accessible que via une url avec « file.php?id=12″ par exemple, et non une image classique du genre « image.jpg ».

    Du coup, lorsque je clique sur j’aime, sur l’un de mes articles, l’image ne s’affiche pas sur mon mur facebook… avez vous une solution par rapport à ça ? (si tant est que j’ai réussi à bien expliquer mon problème ^^)

    Merci d’avance !!

  • http://luxeannonces.com Mastimos

    merci pour ce joli tuto … 

  • http://www.facebook.com/laetitia.bridoux Leticia Draws

    Bonjour à tous,
    J’ai moi aussi un petit soucis avec mes miniatures facebook.
    Quand je copie/colle le lien dans facebook pas de soucis la miniature s’affiche correctement, mais dès que quelqu’un aime un article via le bouton j’aime de mon site il me choisit la miniature des commentaires (ou pas de miniatures du tout).
    Du coup j’ai installé le plugin »Easy Facebook Share Thumbnails » pour qu’il me mette au moins une mianiature qui a rapport avec mon site mais j’aurai vraiment aimer qu »il m’affiche la miniature de mon article c’est plus « vendeur ».

    Est-ce que quelqu’un aurait une solution?

    Merci :)

  • http://www.facebook.com/profile.php?id=100002910050234 Actu Moteurs

    Bonjour,

    J’ai une solution encore plus simple:

    A placer dans le header.php