Social tags

Publié le : 8 septembre 2008 – Dernière modification le 21 décembre 2021 – par phil – 480 commentaires

1
2
3
4
5
115 votes

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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

240 discussions

  • 4
    chris

    Bonjour,

    Pas reussi à faire marche ce plug bien utile correctement avec spip 3.0.17, j’arrive à mettre en place la barre d’icônes sur mon site. Les pages avec #Insert-head l’affiche en double et quand je suis sur une page d’article, le lien Facebook, twitter ... se fait sur la page d’accueil de mon site. J’ai essayé avec un squelette minimaliste et pas d’autres plugins.

    C’est normal ?

    • Aurigeft

      Bonjour,

      J’ai le même soucis, j’aimerais bien que que le socialtag soit référent à l’article et non au site lui-même ;
      Est-ce possible et comment ?

      Merci d’avance

    • Aurigeft

      eureka !

      Bon alors pour que ce soit la page (l’article ou la rubrique) qui soit aimée et ou partagée, pour Like et Partage, le tag à mettre est :
      AIE :
      Il n’est pas permis d’insérer des images ni d’utiliser les attributs html class ou style

      ben je sais pas comment partager ma résolution du soucis, zut.
      mon site aurigeft via contact le cas échéant !

      Cela fonctionne super !

    • Maïeul

      je n’ai rien compris à votre message. Pour insérer du code, utiliser <code> et la balise fermante (raccourci standard de SPIP)

    • Aurigeft

      Bonjour,
      Désolé...

      Je n’arrivais pas à mettre en place les socialtags de spip malgré toutes infos récoltées sur le forum ou ici et à la fin de la journée, n’en pouvant plus, me suis rendu sur FB où j’ai récupéré les tags pour Like et Partager en bouton.
      J’ai donc placé :

      <div id="fb-root"></div>
<script>(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/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

      juste en dessous de <body class... sur les pages squelettes-dist de mon site (auteur, article, rubrique etc)

      Et pour les tags eux-mêmes :
      <div class="fb-like" data-href="#GET{href}" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div> à l’endroit souhaité des mêmes pages (pour ma part, sur le side)

      FB donne le lien du site ou d’une page précise (celle qu’on lui inscrit pour obtenir le code) en href qu’il faut donc remplacer par "#GET{href}" pour que cela soit l’article ou la rubrique affichée qui soit likée et ou partagée.

      Et pour finir et avoir le retour du nombre de like, directement sur FB :
      <meta property="fb:admins" content={{"MonNuméroFB"}} />
      juste avant la balise </head> des mêmes pages.
      Penser à y déclarer votre site pour que les stats fonctionnent !
      (ils expliquent aussi comment les avoir sur notre propre site mais pfou pas tout compris encore !)

      J’espère que cette écriture ne contrarie pas Spip et vous remercie de bien vouloir me dire si ça baigne !
      Merci

    Répondre à ce message

  • 1
    Guillaume Blanc

    Rien à faire. J’ai beau essayer de mettre <div id="socialtags"></div> un peu partout dans mon fichier squelettes/articles.html, rien ne s’affiche.

    Je suis sous spip 3.0.17 avec le squelette Ahuntsic.

    J’ai installé CFG même si spip 3 semblait l’inclure, mais avec ou sans, pas de changement ; j’ai active la balise INSERT_HEAD avec le couteau suisse, mais avec ou sans pas de changement ; j’ai un fichier squelettes/head.html (copié de squelettes-dist) avec cette balise.

    Bref, tout ça pour dire, que je n’y comprends absolument rien... Si quelqu’un avait l’obligeance de m’expliquer comment faire... ?

    • o2

      Bonjour

      Pour moi, c’était un conflit avec le plugin spip bonux
      Il faut le désactiver pour configurer social tags. On peut le réactiver ensuite... Et tout fonctionne normalement.

      et
      #socialtags
      Sous la div nommée id=socialtags

    Répondre à ce message

  • 1
    Guillaume Blanc

    Bonjour,

    Je suis sous spip 3.0.17 avec le squelette ahuntsic. J’essaye désespérément de faire apparaître ces « social tags » sur mes articles, mais pas moyen. Mon site : gblanc.fr

    J’ai compris qu’il fallait que mon fichier head.html dans squelettes contienne #INSERT_HEAD ; c’est le cas. Le head.html ne vient pas de ahuntsic (il n’y en avait pas), mais de squelettes-dist.

    J’ai compris qu’il fallait que j’ajoute

    dans mon fichier squelettes/articles.html, à l’endroit où je voulais voir ces icônes.

    Sauf que rien de tout ça ne fonctionne. Donc j’ai dû mal comprendre... Quelqu’un peut-il m’éclairer ?

    • Guillaume Blanc

      J’ai compris qu’il fallait que j’ajoute <div id="socialtags"></div>dans mon fichier squelettes/articles.html, à l’endroit où je voulais voir ces icônes.

    Répondre à ce message

  • joseluis

    Bonjour

    Il serait possible de mettre plusieurs fois socialtags dans une liste de aticulos comme dans rubrique.html

    Merçi

    Répondre à ce message

  • 3
    Anaki

    Bonjour, la balise fonctionne et partage (ou autre) le lien de la page courante.

    J’aimerai cependant que dans une boucle d’article qu’une balise apparait pour chaque article avec comme lien de référence, l’article et non la page courante.

    Je vous remercie d’avance de votre aide, et vive la communauté SPIP.

    • joz

      Bonjour,
      ça m’intéresserai aussi
      joz

    • joz

      Bonjour,
      je me permet de pusher la question à la surface.

      Je voudrais dans une page rubrique afficher la liste des articles avec des socialtags pour chaque article. Et les boutons doivent se référer chaque fois à l’article et non à la page rubrique. (comme ici par exemple : http://dealbook.nytimes.com/)

      Est-ce que c’est possible avec socialtags ou envisageble dans le futur ?

      Merci pour vos lumières
      Joz

    • joseluis

      Bonjour !

      Était-il possible que socialtags montre les boutons plus de 1 fois dans la page pour les listes d’articles : pour les sections où les mots, par exemple.

      Idées ? Merci.

    Répondre à ce message

  • 1
    Pimfe

    Bonjour !
    Pour ceux qui débutent et qui ne voient rien s’afficher et qui ne comprennent plus rien à rien !
    N’oublier pas d’insérer la balise #INSERT_HEAD dans votre fichier head.

    Je fais le beau mais cela fait plus de 3 heures que je cherche pourquoi cela ne s’affiche pas :)

    Répondre à ce message

  • 1
    pgiron

    J’ai un problème avec ce plugin, je n’arrive pas à afficher la boîte qui correspond à
    https://developers.facebook.com/docs/plugins/like-box-for-pages.
    Les codes à insérer me donnent deux fenêtres de code (sauf URL et IFRAME), pas très compatible avec ce que me demande le plugin où il y en a qu’une, et IRL et IFRAME ne donnet rien Où c’est que je me plante ?
    Merci d’éclairer la lanterne borgne... :-/

    • pgiron

      Naturellement je mets bien #MODELE{socialtags_badge} là où il faut dans le squelette...

    Répondre à ce message

  • stef

    Bouhouhou. Une multitude de vilaines petites icônes, nécessitant de nombreux appels d’images. Et aucun css qui permettrait de surcharger. Bon je suis bon pour m’y coler et tout refaire avec ça http://yourhp.de/icon_sets/social/

    Répondre à ce message

  • 2
    bruno

    Bonjour et merci pour ce plugin.
    Est-il possible d’ouvrir le lien vers un popup (et non une nouvelle page)

    Merci

    Bruno

    • DD

      Bonjour,
      Dans la configuration du plugin c’est possible :
      Mode pop-up
      Ouvrir le lien vers le service dans une nouvelle fenêtre

      dd

    • bruno

      Merci
      oui mais sauf erreur cela ouvre une nouvelle fenêtre mais pas un popup

      bruno

    Répondre à ce message

  • AlainF

    Pour bien placer la balise, j’utilise ce code :

    <div style="width: 100%; text-align: center;">
<div id="socialtags"></div>
</div>

    car le plugin insère du code APRES la div id socialtags et c’est donc dans la div parente, donc ici :
    </div>" ici "</div>

    Cordialement

    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