Il est possible de personnaliser graphiquement le widget de Facebook que l’on appelle le Like Box (ou fan box) afin de le rendre 100% adapté au visuel de votre site web. Comment faire? Nous vous montrerons en détail les étapes de ce processus assez simple mais combien pratique!
*** Une mise à jour récente de Facebook semble ne plus permettre cette personnalisation. ***
À noter que les étapes présentés dans ce tutoriel sont aussi valables pour un site web monté avec un CMS comme WordPress qu’un site web bien simple codé en HTML. Vous aurez cependant besoin de vous mouiller un peu dans les fichiers de votre site Internet afin d’arriver au résultat escompté.
Ajouter le Like Box
La page Facebook developers du Like Box vous fournis un code à insérer sur votre site pour ajouter la fonctionnalité. Cependant, le code XFBML a été récemment modifié et les nouveaux codes fournis, selon nos expériences, ne vous permettront pas de personnaliser les visuels du widget.
Utilisez plutôt l’ancien code XFBML que fournissait Facebook auparavant, c’est à dire :
<div id="fb-root"></div>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="LE ID DE VOTRE PAGE" connections="18" width="403" height="360"></fb:fan>
Lorsque vous aurez ajouté ces lignes dans l’une de vos pages web, vous devriez avoir ceci comme résultat :
Quelques informations de ce bloc de code se doivent d’être modifiées. Tout d’abord, modifiez la partie suivante du premier script : « en_US ». Remplacez par les initiales de votre langue et de votre pays. Dans notre cas : « fr_CA ».
Vous devez ensuite ajouter le ID de votre page fan d’entreprise Facebook dans la case « profile_id ». Si vous ne connaissez pas ce ID, allez sur votre page fan et cliquez sur le bouton « Gérez » (en anglais: « Manage »). Vous trouverez le numéro requis dans l’adresse URL.
Vous pouvez aussi modifier le nombre de fans qui seront affichés dans votre like box en changeant le nombre dans : connections = ”18″. Il en est de même pour la largeur (width) et la hauteur (height) du bloc.
Modifier le visuel du Like Box
Afin de pouvoir modifier l’apparence générale du bloc Facebook, il vous faudra créer un nouveau fichier CSS. Voici comment ajouter le lien vers celui-ci :
<fb:fan profile_id="150302518402029" stream="0" connections="12" width="300" height="316" header="0" logobar="0" css="style-fb-sidebar.css?49"></fb:fan>
Dans la ligne de code ci-haut, nous avons également ajouté de nouveaux attributs. Voici à quoi ils correspondent :
- stream : Ensemble des dernières nouvelles que vous avez publié sur votre page fan. Valeurs possibles : 1 (visible) ou 0 (non-visible)
- header : En-tête du bloc Facebook Like Box. Valeurs possibles : 1 (visible) ou 0 (non-visible)
- logobar : Barre bleue contenant le logo de Facebook. Valeurs possibles : 1 (visible) ou 0 (non-visible)
- css : Lien vers votre feuille de style
Pourquoi est-ce qu’il y a un paramètre « ?49 » à la fin du lien vers le fichier CSS ?
À chaque fois que vous voudrez voir le résultat des modifications que vous aurez effectué dans votre feuille de style, vous devrez changer le numéro du paramètre. Autrement, la version précédente de votre fichier sera utilisée par Facebook puisqu’elle sera encore dans leur mémoire cache.
Pour modifier les visuels de votre Like box, je vous suggère d’utiliser l’extension Firebug disponible sur différents fureteurs tels que Firefox, Chrome. Le plugin vous permettra d’identifier les classes et les ids à modifier afin de prendre le plein contrôle sur la stylisation des éléments de la boîte Facebook.
Laissez place à votre créativité!
L’expression « Sky is the limit » s’applique désormais à votre Like Box. N’hésitez pas à partager avec nous vos trouvailles, vos commentaires et vos accomplissements suite à ce tutoriel!