Si le bouton « j’aime » de Facebook est critiqué pour son manque de discrétion, c’est aussi un outil de marketing viral dont il serait idiot de se priver lorsque son audience utilise Facebook au quotidien. Seulement voilà, Facebook a la fâcheuse habitude de se tromper d’illustration lorsque vous cliquez sur « J’aime ». Pourquoi et comment résoudre ce problème ?
Tout d’abord, quand un visiteur clique sur le bouton « j’aime », un appel est fait à Facebook qui récupère quelques infos concernant la page associée au bouton « J’aime » :
Le titre, la description, l’URL et les images affichées sur la page. C’est ensuite à l’utilisateur de choisir l’image qui va bien lorsqu’il partage un lien.
Le bouton pose un problème parce que le partage est automatisé. Du coup, Facebook prend la première image qu’il trouve dans le code source, même si celle-ci peut être totalement hors propos…
Pour résoudre ce problème, il faut ajouter des metadata supplémentaires utilisant le protocole OpenGraph.
Solution #1 : Intégrer les meta données OpenGraphProtocol
Il suffit d’ajouter quelques meta tags particuliers dans votre section pour informer Facebook des contenus à utiliser pour le partage :
[sourcecode language= »html »]
<meta property="og:image" content="https://www.withconcorde.com/imgs/photocb.jpg">
[/sourcecode]
Sur ce blog, Benoit Tersiguel explique en détail comment intégrer du contenu grâce au bouton like.
Si cette intégration supplémentaire peut être adaptée assez facilement sur un CMS qui génère la sortie HTML en dernier lieu, c’est plus compliqué avec WordPress qui nécessite l’ajout d’une fonction dans votre thème, que j’ai trouvé sur le blog anglophone wpbeginner.
Solution #2 : Fonction pour wordpress.
[sourcecode language= »php »]
function insert_image_src_rel_in_head() {
global $post;
if ( !is_singular()) //Si ce n’est pas un post ou une page
return;
if(!has_post_thumbnail( $post->ID )) { //Le Post n’a pas d’image à la une (featured image), on utilise une image par défaut.
$default_image="http://www.monsite.com/illusration-defaut.jpg"; //REMPLACEZ CECI PAR L’URL DE VOTRE IMAGE PAR DEFAUT
echo ‘<meta property="og:image" content="’ . $default_image . ‘"/>’;
}else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘medium’ );
echo ‘<meta property="og:image" content="’ . esc_attr( $thumbnail_src[0] ) . ‘"/>’;
}
echo "\n";
}
add_action( ‘wp_head’, ‘insert_image_src_rel_in_head’, 5 );
[/sourcecode]
Solution #3 : Le plugin WordPress qui fait le café
Et à présent, pour les plus fainéants malins d’entre vous, voici un plugin bien pratique qui fera la même chose : Facebook Like Thumbnail
L’intérêt de ce plugin réside à la fois dans sa simplicité d’installation, puisqu’il n’y a pas de fonction à ajouter manuellement dans le thème, mais aussi à la maintenabilité du code, puisque vous bénéficierez automatiquement des mises à jour éventuelles apportées à celui-ci.
