Social tags

Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious....

Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration.

Insertion dans les pages

Le plugin utilise la balise #INSERT_HEAD de vos squelettes.
Il suffit de configurer le plugin via cfg en indiquant le nom de votre div, et d’insérer éventuellement le code suivant dans les squelettes :

<div id="socialtags"></div>

La noisette ou le div va donc afficher une série d’icônes relatives aux sites choisis, une petite image vaut mieux qu’un long discours :

Le plugin offre une très grande liste de réseaux sociaux et de bookmarking, notamment :
Digg, Delicious, Facebook, Google Bookmarks, Technorati, Live, Scoopeo, Wikio, Furl, Blogmarks, Reddit, Mister wong, Viadéo, MySpace...

Le plugin est téléchargeable sur la zone :
socialtags.zip.

Vous êtes invité à ajouter des sites de réseaux sociaux si vous le désirez, c’est sur la zone.

Réserver les boutons aux visiteurs en provenance du site concerné

Cette nouvelle option (version 0.8 du plugin) permet de réserver l’affichage du bouton « partager » aux seuls utilisateurs en provenance de Facebook. Ceci afin de ne pas gêner les visiteurs qui ne souhaitent pas utiliser Facebook.

L’option fonctionne en ajoutant un cookie social_facebook=1 à tout visiteur provenant de Facebook. Dès lors, l’affichage du bouton « partager » sera conditionné à la présence de ce cookie.

Pour tester cette fonctionnalité, on peut passer le referer dans l’URL : http://zzz.rezo.net/?HTTP_REFERER=h... ; pour revenir à l’état précédent, il suffit de supprimer son cookie social_facebook.

Ajouter un badge Facebook

Le bloc de badge javascript permet d’afficher un badge Facebook ou autre. Il est programmé de manière à pouvoir être réservé aux visiteurs en provenance de Facebook. Voici, à titre d’exemple, comment je procède pour mettre le badge du site per.sonn.es sur le site zzz.rezo.net.

La page http://www.facebook.com/facebook-wi... m’indique que je peux utiliser comme badge le code HTML suivant :

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/fr_FR"></script>
<script type="text/javascript">
	FB.init("f38e69d43f79cbe7e03bba1d54c0a01c");
</script>
<fb:fan profile_id="213643810738" stream="1" connections="10" width="300"></fb:fan>
<div style="font-size:8px; padding-left:10px">
	<a href="http://www.facebook.com/pages/personnes/213643810738">per.sonn.es sur Facebook</a>
</div>

On remarque que ce badge :
-  appelle la librarie JS de Facebook http://static.ak.connect.facebook.c...
-  définit une largeur de 300 pixels (width="300")
-  affichera le flux de nouvelles de la page (stream="1")
-  affichera 10 photos de fans (connections="10")
-  conduira vers la page profile_id="213643810738"
-  est marqué d’une clé d’API "f38e69d43f79cbe7e03bba1d54c0a01c"
-  pose un lien « en dur » vers la page (ce qui permet au passage à Facebook d’augmenter son pagerank).

Pour obtenir l’équivalent en javascript on écrira dans la boîte JS :

if (document.cookie.match('social_facebook=1'))
$.getScript('http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/fr_FR', function() {
  $('.menu.subscribe')
  .append('<fb:fan profile_id="213643810738" stream="1" connections="8" width="250"><\/fb:fan>');
  FB.init('f38e69d43f79cbe7e03bba1d54c0a01c');
});

À la 1re ligne, je vérifie si le visiteur a un cookie indiquant qu’il est dejà venu sur ce site depuis Facebook ; le cas échéant, on va lui envoyer le badge.

La deuxième ligne charge la librairie facebook, puis, une fois celle-ci chargée, insère le marqueur de badge, avec toute sa configuration, dans le bloc .menu.subscribe, et enfin exécute le script avec la clé d’API.

On remarque au passage que je n’ai pas conservé le « lien en dur », inutile et pas très esthétique.

 

À noter : une fois le code HTML d’un badge renseigné dans le CFG du plugin, il est possible de l’insérer dans les squelettes avec #MODELE{socialtags_badge}, ou dans un article avec le raccourci <socialtags|badge>.

Ajouter Google+1

Si vous avez le plugin google+1 activé, vous pouvez choisir de l’afficher à la suite de vos images de tags.
Pensez à configurer le plugin google+1 pour adapter la taille du bouton.

Noisettes

Le plugin fournit des noisettes paramétrables utilisables dans le noiZetier et permettant d’afficher les badges et boites de type « J’aime » de Facebook.

Discussion

240 discussions

  • windaubexp

    c’est bon, j’ai réussi :)

    Répondre à ce message

  • windaubexp

    Bonjour, je monte un site pour association et je n’arrive pas a faire fonctionner ce plu-gin :(

    Je suis bien passé par la config automatique du plugin via cfg / sarka spip / plugin dans un premier temps puis j’ai cocher les différents reseau souhaiter

    Mais apres je calle !

    Pouvez vous m’aider svp

    merci d’avance

    SPIP 2.0.10 [14698]
    Sarka-SPIP 3.0.2 [33955]

    http://puy2lan.free.fr/

    Répondre à ce message

  • 3

    => orangerie : Bonjour, pour faire fonctionner le plugin j’avais tout simplement pris le fichier syndic de spip 2.

    • Tu veux dire le fichier syndic.html ? personnellement je n’arrive pas encore à l’installer. Quel syntaxe ?

    • Le fichier se trouve là :

      ecrire/inc/syndic.php

      Tu remplace ce fichier par celui de spip 2 et ça devrait fonctionner.

    • J’utilise déjà la version 2 du SPIP. Encore plus de détail SVP, je suis débutant avec spip.

    Répondre à ce message

  • 1

    Bonjour,

    Tout d’abord encore une fois merci pour ce plugin.

    J’ai rencontré des problèmes lors de l’installation mais j’ai réussi à les résoudre. Mon cas est sans doute un peu marginal mais ça pourra peut-être aider quelqu’un.

    Lors de l’installation du plugin, rien ne s’affichait. Après avoir cherché un moment, j’ai essayé de commenter dans inc-head l’inclusion du code javascript que j’utilise pour afficher mon menu.

    Les socialtags sont bien apparus. J’en ai déduit que quelque chose dans le code de mon menu js était incompatible avec jquery.

    J’ai réussi à isoler la ligne de code qui posait problème dans mon script :

    Array.prototype.push = function(value) this[this.length] = value ;

    Je ne suis pas un spécialiste de javascript, mais j’en arrive à la conclusion suivante : tous ceux qui ont des problèmes avec ce plugin, et qui utilisent un javascript ’maison’ devraient dans un premier temps essayer de dévalider ce script pour voir si le problème ne vient pas de là.

    • @Gusaweb

      Dans quel fichier se trouve cette ligne dont tu parles ? Array.prototype.push = function(value) this[this.length] = value ;

      Merci,
      Aurélien

    Répondre à ce message

  • Une chose cependant, le plugin semble ne pas fonctionner si le javascript est désactivé.
    Il serait intéressant de l’implémenter.

    Répondre à ce message

  • 4
    parisnice

    Après install du plugin sur SPIP 2.0.10 (install toute fraiche), j’obtiens le message d’erreur
    Warning : Invalid argument supplied for foreach() in /var/www/vhosts/mustlimousines.com/httpdocs/spip2/ecrire/public/assembler.php(553) : eval()’d code on line 19

    Je n’ai donc pas accès à la sélection des tags.

    Quelqu’un a une idée de ce que je dois faire ?

    • Bonjour,

      On dirait que j’ai le même souci. Je ne peux pas cocher les tags dans cfg. Et rien ne s’affiche sur la partie public du site, je pense que cela viens de là.

      Comment résoudre le problème ?

      j’utilise spip 1.9.2d

    • orangerie

      Bonjour
      J’ai exactement la même erreur, avec spip 1.9.2d. Du coup impossible de faire fonctionner le plugin. Avez-vous résolu votre problème ? Si oui, pouvez-vous nous partager la solution ?
      Merci

    • orangerie

      Pardon, je précise, je répondais à scorpion97429 !

    • orangerie

      Problème d’affichage de la liste de tags à cocher...
      Erreur de type :
      « Warning : preg_split() [function.preg-split] »

      La solution se trouve ici...
      http://llenne.free.fr/spip/

    Répondre à ce message

  • Pour moi, d’abord, ca ne marchait pas, puis j’ai trouvé dans ces messages l’astuce : il fallait s’assurer que #INSERT_HEAD était bien dans mon entête de fichier,
    avec #socialtags indiqué dans la config du plugin
    puis

    positionné où je veux affiche bien les social tags.

    Une suggestion : intégrer l’icone des fllux RSS ! je veux le mettre à coté, mais j’ai du mal à éviter que ça passe à la ligne....

    Répondre à ce message

  • Bonjour & Bonne Année,

    Effectivement, bravo et merci pour ce plugin.

    Quelques remarques / idées cependant (Revision 34418 - spip 1.9.2d) :

    -  Impossible de demander l’ajout de sites sociaux plugins via l’url proposée. Pour le commun des Spipiens, c’est dommage...

    Surpris de ne pas trouver par défaut linkedin dans la liste des sites proposés (ce d’autant que l’icône existe bien en png dans le plugin), j’ai réussi à l’ajouter manuellement via le .xml : simple / bien pensé.

    Je balance vers l’url « http://www.linkedin.com/myprofile?editAdditionalInfo » qui permet d’indiquer manuellement une ou plusieurs url sur son profil.

    -  l’ajout du div id socialtags intervient dés qu’une boucle ARTICLES est repérée si je ne m’abuse : ne serait-il pas possible de ne déclencher l’apparition du ’module de partage’ que dans les squelettes articles ?

    Pour avoir ajouté au début le div id socialtags dans mon squelette propre aux articles, il m’a fallu utiliser une petite ruse css simple pour empêcher l’apparition du module de partage dans les pages types rubriques ( .rub #socialtags display:none !important ; ) ce qui n’est pas idéal pour le référencement.

    Merci d’avance pour vos réponses & encore bravo

    Répondre à ce message

  • 2

    Bonjour,

    Meilleurs voeux pour 2010.
    Pour ma part, être un peu plus à l’aise avec l’architecture de spip me botterai bien...

    Je suis sous spip 2.0.9 et ahuntsic.
    J’ai installé le plugin, configuré via cfg les sites que je souhaite rendre disponibles, inséré dans ma page article

    #socialtags		
    	<div id="socialtags">	
    	[(#INCLURE{fond=noisettes/socialtags}{id_article})]
    	</div>

    mais aucune icone ne s’affiche ?

    Sont elles disponibles que sur les articles publiés dans la partie privée ? Faut il insérer du code supplémentaire ?

    Merci par avance pour votre aide

    Cordialement,
    hleb

    • Bonjour,

      Je suis dans la même configuration que toi, c’est à dire spip 2.0.9 et ahuntsic.

      J’ai juste ajouté

      <div id="socialtags"></div>

      sous le cartouche et configuré le plugin avec cfg en choisissant #socialtags comme selecteur et ça marche très bien.

      J’avais, dans un premier temps activé la lame du couteau suisse dans la section balise, filtres, critères /Balise #INSERT_HEAD mais ça me provoquais une erreur et c’est finalement inutile.

      Je ne sais pas si ça peut te rassurer, mais je n’y suis pas arrivé du premier coup quand même.

      Cordialement
      Fred

    • Merci pour tes lumières !!!
      Ca fonctionne en effet avec tes corrections.
      Merci encore,

      Cordialement,
      hleb

    Répondre à ce message

  • 1
    Philippe G.

    Bionjour,
    Chez moi ça marche :-), mais j’aurais quand même voulu un peu plus d’explications, si possible :
    1) Les annotation en bas de l’écran de la page plugin sont particulièrement hermétiques (on y mélange css et code)

    Insérer le bloc social-tags en-dessous du bloc suivant :
    Sélecteur : #contenu
    Exemples (sur les squelettes dist) :
    #contenu
        En bas de chaque page 
    .page_article .cartouche:first
        Sous le bloc de titre des pages article 
    #socialtags
        Sous la div nommée id=socialtags 


    2) Moi, après plusieurs essais, j’ai juste mis dans les pages articles et sous le titre (sous le sous-titre quand il y en a un)
    <div id="socialtags"></div> mais les tags apparaissent en bas de chaque page (et non pas là où je souhaite) et surtout dans les pages rubriques où je ne souhaite pas qu’ils apparaissent !
    Qui peut m’en dire plus ?

    • Dominique Dupagne

      Bonjour

      Je confirme, je ne comprends rien au bloc d’instruction pour l’insertion du code dans le squelette.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom