Comment imposer une illustration à facebook quand vous « jaimez »

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 :

<meta property="og:image" content="http://www.withconcorde.com/imgs/photocb.jpg">

Sur ce blog, Benoit Tersiguel explique en détail comment intégrer du contenu grâce au bouton like.

« Grâce à mon QI de génie, j’ai enfin un bouton like qui marche. » Albert Enstein (USA)
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.


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-&gt;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-&gt;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 );

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.

Crédit photo : Leonard Savage

Laisser un commentaire

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