Ajouter un bouton "like" Facebook à SPIP

Comment ajouter le nouveau bouton "like" de facebook à un site sous spip (avec une structure Zpip)

Voir en ligne : http://developers.facebook.com/docs...

Facebook a crée l’Open Graph Protocol qui permet de proposer certaines fonctionalités de facebook sur des pages web normales. Pour faire simple c’est un melange de RDFa , microformat ...

En pratique pour l’instant, ça permet d’avoir un bouton "like" sur une page classique et de notifier son reseau facebook avec des informations provenant de la page commme par exemple :

  • le titre
  • le nom du site
  • l’url de la page
  • un logo

Facebook propose un petit script à ajouter dans le code de la page qui donne deux types de code : une iframe et un code en fbml.

Pour des raisons d’élégance, j’utilise le fmbl et le squelette Zpip.

le code

Dans le fichier structure.html de zpip, on ajoute ce script :

<div id="fb-root"></div>
<script>
 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>

Dans le fichier head/article.html entre la  :

<meta property="og:title" content="[(#TITRE|textebrut)]"/>
<meta property="og:site_name" content="[(#NOM_SITE_SPIP|typo|textebrut)]"/>
<meta property="og:image" content="[(#LOGO_ARTICLE|image_reduire{60}|image_recadre{50,50}|extraire_attribut{src}|url_absolue|texte_backend)]"/>

Ce sont les elements de l’opengraph protocol.

Puis dans le fichier contenu/article.html :

<fb:like href="[(#URL_ARTICLE|url_absolue)]" layout="standard" show_faces="true" width="450" action="like" font="segoe ui" colorscheme="light"></fb:like>

Ce bout de code est generer à partir de cette page, il y a donc plusieurs options de personnalisation.

Les exemples

Il y a deux exemples pour l’instant :

La suite

J’ai pas forcement le temps pour l’instant, mais transformer tout cela en plugin avec une petite page d’administration, ça serait bien sympathique.

médias

La photo est issue de la série "Saint Frieux" et le morceau est extrait du dernier album du groupe Canadien Islands.