Comment customiser la Fan-box de Facebook sur votre blog ?

Vous avez sans nul doute remarqué le design inhabituel de la fan-box Facebook sous les billets du blog. Vous vous demandez maintenant certainement comment obtenir ce résultat. Je vais aujourd’hui vous expliquer comment j’ai fait.

Mes buts étaient multiples: retirer le logo iNicolas, retirer la barre bleue de Facebook et changer couleurs et police du widget afin de l’integrer dans le design du blog. Malheureusement, je n’ai rien pu faire concernant le bouton « J’aime » mais bon, ça, on y peut rien il est hébergé chez Facebook.

Après avoir cherché un moment sur le net je suis tombé sur un excellent billet de Daddy Design. Je ne vais pas vous refaire son tutoriel, cela ne servirait a rien car il est tout à fait explicite, bien qu’étant rédigé en Anglais. Je vais par contre vous donner quelques trucs qui vous feront certainement gagner du temps.

Comme l’explique Daddy, il faut savoir que votre widget est mis en cache chez Facebook pour des raisons évidentes de performance. Aussi, vous constaterez dans son tuto qu’il à ajouté un ?1 à la fin de l’ URL du CSS que le widget utilisera.

css="<?php bloginfo('stylesheet_url'); ?>?1"

Ce ?1 est très important car c’est lui qui va gérer la version du fichier CSS que le widget devra utiliser et donc, le cache de votre widget.

Il y a donc une erreur à ne surtout pas commettre, c’est de coller le CSS de Facebook dans la feuille de style de votre thème car quand plus tard vous modifierez le CSS de celui-ci le widget n’en sera pas informé. Créez donc plutôt un fichier facebook.css que vous déposerez dans le dossier de votre thème avec le code fourni par Daddy que vous modifierez ensuite. Ce fichier, une fois sauvegardé sur votre serveur, sera donc « appelé » ?1 dans le code PHP du widget. Vous me suivez ?

Ensuite, pour adapter votre widget selon vos goûts vous allez sans doute faire des essais. N’oubliez alors surtout pas d’incrémenter le ?1 (en ?2; ?3; ?4; etc) dans le code PHP à chaque modification du fichier facebook.css sans quoi le widget ne prendra pas en compte vos modifications. Hé oui, on est obligé de faire du versioning !

Ci-dessous le contenu actuel de mon fichier facebook.css:

/* Facebook */

.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none !important;
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none;
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #00b9e9;
}
span.total{
color: #d346b5;
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #00b9e9 !important;
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 10 !important;
}

Une dernière chose. Si vous ne savez plus ou vous en êtes dans le nombre de fois ou vous avez sauvegardé votre CCS. Pas de panique, récupérez son contenu, collez le dans un nouveau fichier, facebook1.css par exemple et changez le chemin du fichier dans le PHP avec un ?1. Une nouvelle mise en cache sera générée. Et au fait, tant que l’on y est, avez vous cliqué sur le bonton « J’aime » ? juste là-dessous ?