Ajouter un lien Facebook-like sur une page SPIP

© Christian PAULUS. Document créé le 23 avril 2010 , mis à jour le 24 novembre 2011.

Aucune route n'est longue à côté d'un ami. Proverbe japonais

Accueil du site > Astuces > SPIP > Ajouter un lien Facebook-like sur une page SPIP

Facebook / SPIP

Facebook nous propose de placer un plugin « like » sur nos pages afin de permettre au visiteur de manifester son intérêt pour un article.

C’est tellement facile à mettre en oeuvre que je ne vois pas trop l’intérêt de créer un plugin pour ça.

En gros, il faut copier quelques lignes de codes en fin de votre article.

Récupérer le code nécessaire pour le bouton Facebook

— Allez sur la page consacrée au plugin like Facebook
— Dans le champ « URL to like », placez #URL_SITE_SPIP/#URL_ARTICLE
— Configurez l’interface
— Cliquez sur le bouton de validation pour obtenir le code nécessaire
— Copiez/collez ce code dans le squelette article.html, juste après la boucle des notes, par exemple
— Corrigez l’URL donné en paramètre en replaçant correctement le %23 par # pour laisser SPIP interpréter les balises.

Le code ressemble à :

<iframe src="http://www.facebook.com/plugins/like.php?href=#URL_SITE_SPIP/#URL_ARTICLE&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=evil" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Et vous obtenez le petit bouton qui vous apportera joie, tendresse et sérénité.

2011 : nouvelle méthodologie pour Facebook

Sur Le site Facebook consacré à la génération du bouton like, le code généré est différent de celui illustré ci-dessus.

Un premier bout de code doit être placé dans le head de la page :

<script type="text/javascript">(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Un second dans le body, à l’endroit souhaité :

<div class="fb-like" data-send="false" data-layout="box_count" data-width="100" data-show-faces="false"></div>

Ce qui donne adapté a-la-spip (par exemple, pour une page article) :

<div class="fb-like" data-href="#URL_SITE_SPIP/#URL_ARTICLE" data-send="false" data-layout="box_count"
                 data-width="100" data-show-faces="false"></div>

Ici

A noter:

Plussoyez !

Les forums sont fermés.

  • Sur MacOSX :

    • Firefox 3.6 : l’identification boucle.
    • Opera 10.10 : la fenêtre d’identification n’apparaît pas, même en acceptant les pop-ups via les préférences
    • Google Chrome : OK
    • Safari 5 : Ok

    Les forums sont fermés.

  • Ajouter un lien Facebook-like sur une page SPIP 12 août 2010 11:18, par Christian PAULUS

    A la relecture de la documentation Facebook, ce serait maintenant du style :

    <iframe
    src="http://www.facebook.com/widgets/lik...
    al&colorscheme=evil" scrolling="no" frameborder="0" allowTransparency="true" style="border:none ;
    overflow:hidden ; width:450px ; height:64px ; margin-top:1em ;"></iframe>

    Les forums sont fermés.

  • Ajouter un lien Facebook-like sur une page SPIP 2 février 2011 00:11, par Amire

    Bonjour,

    S’il s’agit d’un site multilingue. Comment on fait ? Merci

    Les forums sont fermés.

    • Ajouter un lien Facebook-like sur une page SPIP 2 février 2011 07:36, par Christian PAULUS

      Tout dépend de la façon de gérer le multilingue. Pour ma part, je place la langue dans l’URL, en plus de la gestion par cookies.

      A tester ?

      Les forums sont fermés.