Geek : Ajouter le nouveau bouton « J’aime » de Facebook

Vous voulez vous aussi avoir l’encart « J’aime » ou « I Like » de Facebook sur votre site ou blog ?

Voici comment faire. Je sais que ce post n’a rien avoir avec le Japon mais dans cette catégorie Geek, je vous donne aussi des astuces.

Pourquoi je vous dis ça maintenant, et pas avant ? Tout simplement parce que Facebook a eu la bonne (??) idée de modifier les codes de ses Fanbox (ses encarts « J’aime »). Et donc ce matin en regardant le blog j’ai constaté que ma Fanbox (aussi appelée Likebox) Facebook qui marchait si bien n’apparaissait plus.

Génial, encore des modifs dictatoriales de la part de FB, et sans prévenir… Alala !!

Entrons maintenant dans le vif du sujet, parce que là, c’est du gros geek ! Attention, cette méthode est valable pour les blogs WordPress ! Je ne sais pas si elle est adaptable sur d’autres types de sites ou blogs… (en théorie oui, mais alors en pratique…)

1) Paramétrer la Fanbox Facebook de son site

tlj_facebookPour commencer, il vous faut une « Page FaceBook ». C’est la base. Chaque page a une ID (un numéro unique d’identifiant). Par exemple, l’ID de tout le Japon est « 167502089141 », on le connait car il arrive en fin d’URL de votre Page. Chez moi ça donne ceci : facebook.com/pages/Tout-le-Japoncom/167502089141 éventuellement suivi de « ?ref=ts ».

Pour cela, il va donc falloir se rendre dans la partie « Édition » de votre Page FaceBook. Cliquez sur « Modifier : Page », puis sur « Mettre en avant avec un bouton « J’aime » » qui se trouve à droite dans la sidebar, menu « Promouvoir votre page ».

Là, c’est nouveau. Et c’est mal codé de la part de Facebook ! En effet, vous vous apercevrez surement que l’ID pré-remplie N’EST PAS LA VOTRE ! (c’est pour ça que c’est mal codé). D’ici là, FB aura peut-être réglé le problème.

En tout cas, vérifiez bien. Si ce n’est pas votre ID, changer la pour la votre, puis paramétrez votre box selon vos besoins.

Voici l’aperçu de la page de paramétrage de votre Likebox :

Bon, on a déjà bien avancé. Une fois tout paramétré, vous devez récupérer le code de la Like Box Facebook. Cliquez sur « Get Code ».

2) Mettre en place la nouvelle FanBox Facebook

2 choix s’offrent à vous. Un code à base de frame (qui va, grosso modo, dupliquer vos actus dans la Box) et un code à base de XFBML (un nouveau truc créé par Facebook… hem hem). Après avoir d’abord testé la frame, je le déconseille !

Optez plutôt pour le XFBML qui me semble mieux, même s’il nécessite plus de manip.

Récupérez donc ce code, modifiez le au niveau de l’ID qui, une fois de plus, ne doit pas être la votre ! (décidément), et suivez les indications : « XFBML is more flexible than iframes, but requires you use the JavaScript SDK. »

Rendons-nous donc sur la page JavaScript SDK de Facebook. Ici, tout ce qui nous intéresse, c’est le bout de code proposé :

<script type="text/javascript"><!--
  window.fbAsyncInit = function() {

    FB.init({appId: 'your app id', status: true, cookie: true,

             xfbml: true});

  };

  (function() {

    var e = document.createElement('script'); e.async = true;

    e.src = document.location.protocol +

      '//connect.facebook.net/en_US/all.js';

    document.getElementById('fb-root').appendChild(e);

  }());
// --></script>

Vous voyez ici qu’ils nous disent de remplacer « your app id » par le numéro de votre ID (logique). Pensez à laisser les guillemets.

Maintenant que vous avez ce bout de code, vous devez le coller dans votre Header (header.php si vous avez, sinon c’est dans index.php (tout en haut)) sous la balise <body>. Et ce n’est pas fini, placez aussi ce bout de code tout en haut de votre header :

xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/"

, entre <html xmlns="http://www.w3.org/1999/xhtml" et >. Ce qui donne

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">

Ceci permet à votre site ou blog d’interpréter correctement le fameux langage « XFBML »…

Sauvegarder votre page Header.

Ensuite, il faut simplement coller le code de la LikeBox Facebook à l’endroit que vous souhaitez.

Moi je suis sous WordPress, et je veux que ma box apparaisse dans mon encart « A propos ». J’ouvre donc mon fichier « about.php » et je colle le code fourni par Facebook précédemment, qui se présente sous cette forme :

<fb:like-box profile_id= »Votre ID à VOUS » width= »320″ height= »210″ stream= »true » header= »false »></fb:like-box>

Ensuite, je sauvegarde, et là, c’est magique : ça marche ! (enfin normalement ça marche !) Le résultat, c’est comme ma box en haut à gauche. Moi j’ai opté pour : width=320 height=210 Stream « activé » Header « désactivé » et connections=0.

3) Résumé du tuto d’installation de la Like Box Facebook

1) Avoir une Page

2) Allez dans « Modifier : Page », puis « Mettre en avant… »

3) Paramétrer votre Likebox Facebook

4) Cliquer sur « Get Code »

5) Aller récupérer le code sur la page Facebook SDK et remplacer ‘your_app_id’ par votre ID

6) Ajouter le code xmlns:fb dans le Header et coller le code Facebook SDK juste après la balise <body> et sauvegarder

7) Placer le bout de code <fb:like-box> là où vous souhaiter voir votre Box apparaitre en ayant bien vérifié les paramètres (ID, taille…)

Voilà, je suis nul en code mais j’espère avoir pu vous aider. Si vous avez des questions, j’essayerai d’y répondre au mieux ! @+ mes geeks !!

8 Responses to “Geek : Ajouter le nouveau bouton « J’aime » de Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *