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!

10 Partages
  • http://www.apresta.fr julien larzilliere

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

  • http://www.guerillaweb.ca/ Louis-Philippe Dea

    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 :)

  • http://www.designandasia.com/fr/index.php designandasia

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

  • flever

    Bonjour,

    L’astuce fonctionne t-elle toujours?

    • http://twitter.com/franboud Francis Boudreau

      Ouaip :)

  • http://www.guerillaweb.ca/ Louis-Philippe Dea

    Bonjour Flever,

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

  • http://www.latoursombre.fr GREG

    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é) ?

  • http://www.latoursombre.fr GREG

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

  • http://www.guerillaweb.ca/ Louis-Philippe Dea

    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!

  • http://twitter.com/franboud Francis Boudreau

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

  • http://www.facebook.com/jfsim Jean-François Simard

    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 ! :)

    • http://www.facebook.com/jfsim Jean-François Simard

      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 ?

      • http://www.guerillaweb.ca/ Louis-Philippe Dea

        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.

  • matgrafiks

    Salut, on dirait que cela ne fonctionne plus non ?

    • http://www.guerillaweb.ca/ Louis-Philippe Dea

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

  • http://www.facebook.com/dede.akote Dede Akote

    joyeux paques a tous le monde

  • http://www.facebook.com/dede.akote Dede Akote

    ok merci

  • typeQuiTrouveLaVideo

    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

  • http://www.facebook.com/amine.blackstaar amine blàck-stààr

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

  • http://surlapage.fr bartols

Des questions?

  • Ce champ n'est utilisé qu'à des fins de validation et devrait rester inchangé.

Suivez-nous sur Facebook