Personnalisez le Facebook Like Box sur votre site web

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 :

Facebook like box

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!

Inscription à notre blogue

Recevez nos articles directement par courriel 1 fois par mois (pas plus, garantie!).

Commentaires

  • julien larzilliere, 1 mai 2012

    Super tuto, merci … tu le met ou ton fichier CSS dans l’arbo de wordpress ?

  • Louis-Philippe Dea, 1 mai 2012

    Salut Julien,

    Je met le nouveau .css à la même hauteur que mes autres fichiers du thème. (wp-content/themes/ton-theme/ton-fichier.css).

    Merci pour ton commentaire :)

  • designandasia, 1 mai 2012

    Merci pour cet article fort utile.
    Et voilà une nouvelle boxe personnaslisé

  • flever, 1 mai 2012

    Bonjour,

    L’astuce fonctionne t-elle toujours?

  • Louis-Philippe Dea, 1 mai 2012

    Bonjour Flever,

    Oui, absolument comme tu peux le voir dans le bas de notre site web ou dans la barre latérale :)

  • GREG, 1 mai 2012

    Bonjour Louis-Philippe !

    Merci pour ce tuto, c’est exactement ce que je recherchais. Malheureusement je n’arrive pas à appliquer les styles et je ne comprends pas où est mon erreur.

    J’ai commencé par des styles simples pour tester mais mon fichier css n’est jamais prit en compte :
    .full_widget { background:none; border:none; }
    html#facebook { width:500px; }

    J’ai bien sûr uploadé le fichier css et changé le paramètre chaque fois que j’ai voulu tester… Voyez-vous un soucis quelconque (cf. site indiqué) ?

  • GREG, 1 mai 2012

    Je viens de comprendre ! En fait il faut préciser le chemin absolu du fichier css ! L’info servira peut-être à d’autres ;)

  • Louis-Philippe Dea, 1 mai 2012

    Salut Greg, oui en effet, ça prend un chemin absolu (ex: http://www…. et non juste un lien /css/style-facebook.css). Merci de la précision!

  • Francis Boudreau, 1 mai 2012

    Merci beaucoup pour ce super truc! C’est le seul moyen que j’ai trouvé qui fonctionne pour ajuster la hauteur du Like Box.

  • Francis Boudreau, 1 mai 2012

    Ouaip :)

  • Jean-François Simard, 1 mai 2012

    Excellent Tuto !! J’ai réussi à parvenir à mes fins avec l’ancien code XFBML que fournissait Facebook, mais visuellement, je ne suis pas encore satisfait à 100%.

    J’avoue être un peu jaloux de votre très beau facebook like box que vous avez en bas de cette page. :D Savez-vous comment peut-on arriver à ce résultat dans wordpress ? C-à-dire n’avoir que le boutton j’aime +les photos sans background +Le nombre de personnes qui aiment. (point) (Est-ce uniquement une question de css, ou aussi de jouer avec les attributs) Merci à l’avance pour votre aide ! :)

  • Jean-François Simard, 1 mai 2012

    Il faut croire qu’en date du 25 janvier 2013, tout a changé !! Comme pour votre site.. Est-ce facebook qui a changé sa programmation ?

  • matgrafiks, 1 mai 2012

    Salut, on dirait que cela ne fonctionne plus non ?

  • Louis-Philippe Dea, 1 mai 2012

    Salut Jean-François, c’est une excellente question. J’ai dû pour le moment enlever les blocs que j’avais ajoutés sur Guerilla Web… Je vous fait signe si je trouve la solution.

  • Louis-Philippe Dea, 1 mai 2012

    En effet, depuis ce matin, cette technique ne semble plus fonctionner. Je vous fait signe si je trouve de l’information sur le sujet.

  • Dede Akote, 1 mai 2012

    joyeux paques a tous le monde

  • Dede Akote, 1 mai 2012

    ok merci

  • typeQuiTrouveLaVideo, 1 mai 2012

    Du nouveau avec cette  » mise à jour récente de Facebook »?? ils commencent vraiment à me taper sur le système, déjà que c’était pas aisé de changé maintenant on peut carrément plus. C’est vraiment super quand tu casses le *** à fait un beau design et que tu est obligé de mettre cette boite bleu immonde… tssss

  • amine blàck-stààr, 1 mai 2012

    400 jaime pour tout les photos à ajoutèz votre facebook

Publier un commentaire

9 Partages

Recevez notre infolettre

Suivez-nous sur Facebook