Modifier l’aspect du bouton j’aime de facebook

Je fais peu d’intégration mais on me demande tout de même assez souvent de personnaliser l’aspect du bouton j’aime (like) de Facebook. Malheureusement ce n’est pas possible dans la mesure où ce bouton est contenu dans une iframe. De plus Facebook n’autorise pas que l’aspect visuel de ses boutons soit modifié. Mais voici une alternative à ce problème.

Après tout je trouve cela assez logique de ne pas modifier l’aspect de ces boutons dans la mesure où les internautes y sont habitués. De plus ne pas respecter les règles de Facebook ne me semble pas être une très bonne idée si on ne veut pas un jour subir les Foudre du Mark Zuckerberg.

Cependant, ce n’est pas toujours facile de faire comprendre cela aux designers et après tout, le client est roi, non ?

J’ai donc trouvé une solution qui me semble être le meilleur compromis pour tout le monde.

L’idée est de créer un faux bouton « j’aime » qui respectera la charte graphique du site et de n’afficher le vrai bouton « j’aime » de Facebook que lorsque l’on survole le premier bouton. Ainsi la charte graphique n’est pas dénaturée sauf si le visiteur survole le faux bouton. Il voit alors le bouton original de Facebook ce qui lui confirme qu’il va ajouter une mention j’aime sur son profil.

Voici le code à mettre en place.

Le code html

<div class="conteneurFbLike" id="conteneurFbLike">
    <div class="fb-like" id="fb_like" data-href="votreLien" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div> <!-- pensez a modifier le data-href -->
    <img class="maskFbLike" id="maskFbLike" src="mask_fb_like.png" alt="" /> <!-- mask_fb_like.png est l'image de votre faux bouton -->
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;appId=votreApiId&amp;version=v2.0"; /* pensez a ajouter votre appId */
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Le code CSS

.conteneurFbLike {
	position:relative;
	width:59px; /* on impose la largeur et la hauteur du conteneur pour qu'elle soit égale à celle du bouton Facebook original */
	height:20px;
	display:block;
margin:0 auto 10px;
}
.conteneurFbLike .maskFbLike,
.conteneurFbLike .fb-like{
	position:absolute;
	top:0;
	left:0;
}
.conteneurFbLike .maskFbLike{
	width:59px; /* le faux bouton doit avoir les même dimensions que le bouton original de Facebook */
	height:20px;
}

le code javascript

jQuery('document').ready(function() {
	jQuery('#conteneurFbLike').mouseover(function() {
		jQuery('#maskFbLike').css('display','none');
	});
	jQuery('#conteneurFbLike').mouseout(function() {
		jQuery('#maskFbLike').css('display','block');
	})
});