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
    Daniel Schreurs

    Bonjour,

    Je suis complètement désespéré. Je ne comprends pas très bien comment fonctionne ce plug-in et ce que je dois mettre et où pour que ces petits boutons « affichent simplement. J’ai tenté de mettre

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

    un peu partout sur la page squelette/article.html, mais rien ne s’affiche. je n’ai pas touché à l’administration du plug-in, je n’ai pas d’erreur dans ma console.
    Mon but est de pouvoir partager un article sur un réseau social. J’ai le plug-in SPIP Bonux que j’ai désactivé.

    merci grandement.

    • Etienne

      Je crois que par défaut ce n’est pas

      qui est utilisé. Pour ça il faut aller dans la configuration du plugin et l’indiquer comme sélecteur (« insertion dans les pages »).

      Et il faut cocher tous les boutons que tu veux voir apparaitre, aussi.

    • ThomasG

      Bonjour,
      Moi non plus, je n’arrive pas à faire fonctionner Social Tags. Je suis nouveau sur SPIP (j’étais avant sur WordPress).
      Si je récapitule, j’ai activé le plugin et j’ai coché les réseaux sociaux qui m’intéressent.
      Puis je vais via mon FTP dans .../squelettes/articles.html
      Je modifie le fichier HTML en ajoutant uniquement

      (et rien entre les deux div) à l’endroit qui me semble adéquat.

      Je ferme, enregistre, et renvoie sur le FTP.

      Qu’est ce qui est erroné dans ma démarche ?

      Merci d’avance et bonne année également !

    • Mist. GraphX

      Comme expliqué précédement aller dans la configuration du plugin et indiquer le selecteur pour que le javascript fonctionne, sinon c’est #contenu par défaut....

      donc si vous avez insséré

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

      il faudra spécifier : #socialtags, dans la configuration du plugin

    • Ysabeau

      J’ai eu le même souci.
      En fait tout était bon (div au bon endroit dans le fichier article.html, #socialtags spécifié dans les paramètres du plugins), c’était une histoire de cache du navigateur et du FAI. Si le site est en ligne, il faut vérifier en local avec un squelette identiques et les mêmes plugins. Si la « barre » socialtags apparait en local, elle est sur le site en ligne.

    Répondre à ce message

  • 1
    sirom

    Bonjour,
    D’abord merci pour le travail fournit avec ce plugin !

    J’aimerai avoir des icônes plus grandes,

    j’ai surchargé mes icônes .png qui sont plus grandes,
    mais socialtags me les affichent toujours en « riquiqui » ;) , ce qui n’est pas très « mobile-friendly ».
    des icônes vectorielles seraient sympa aussi, mais bon là je pinaille....

    Comment est-ce faisable ?

    • sirom

      Bonjour,

      Donc pour agrandir les icônes (si on en a déposé de plus grandes), il faut simplement surcharger
      le fichier socialtags.css et changer la valeur height à la classe .socialtags img

      et ça roule.
      Cordialement

    Répondre à ce message

  • 1
    robomatix

    Bonjour,

    Je rencontre un problème avec la version 1.0.10 de ce plugin sur un SPIP 2.0.25. Les boutons de partage font le lien toujours vers la même page... La page qui a été ouverte la première fois ou celle qui a été recalculée.

    En gros, je suis sur une page, les liens des boutons ne sont pas les bons, je recalcul la page, ils deviennent bons... Je change de page, les liens sont vers la page précédente... Celle recalculée !

    Une piste ?

    Merci d’avance !

    Répondre à ce message

  • Etienne

    Salut,

    J’ai mis ce plugin sur un site et c’est très bien. maintenant je suis embêté sur un second site car il n’est pas fait d’articles mais d’évènements (plugin agenda).
    Et donc je peux bien afficher des icônes de réseaux sociaux aux événements et les envoyer sur les réseaux, mais ça envoie sur le réseau social un message avec écrit « erreur 404 », qui renvoi effectivement un lien vers une erreur 404 de mon site.
    Question : quel fichier bidouiller pour renvoyer sur un événement et pas un article ?

    Merci d’avance,
    Etienne

    Répondre à ce message

  • François Schreuer

    Bonjour,

    Je cherche à empêcher l’impression des icônes, via une feuille de style d’impression, mais ça ne semble pas possible.

    Auriez-vous une solution à me suggérer pour ce problème ?

    En vous remerciant,

    François

    Répondre à ce message

  • 1
    FdM

    Je trouve que les icônes datent un peu. Elles sont par ailleurs très petites.

    Y a t’il une adresse où on pourraient trouver du frais ?

    Répondre à ce message

  • 1
    ierpe

    Est-il possible de « réécrire » le html pour pouvoir avoir un affichage différent de celui par défaut ?

    Je souhaiterais utiliser des icônes différentes, et aussi cacher une partie des icônes qui seront « toggle » avec un lien « + »

    • jeanmarie

      Pour ce qui est des icônes, il suffit de surcharger en les plaçant dans le dossier squelettes/images/ en respectant le nom des fichiers que tu trouveras dans socialtags/images.
      Pour le reste, aucune idée...

      jean marie

    Répondre à ce message

  • Cricri

    Bonjour,

    Apres avoir installé le plugin Splickrbox, mes boutons socialtag on disparus !

    Comment remédier à cela ?

    Merci d’avance et joyeux noel

    http://www.culturepontiac.com/

    Répondre à ce message

  • 1
    René

    Bonjour
    En ajoutant <div id="socialtags"></div> dans le squelette article j’ai bien les icones qui s’affichent
    En cliquant sur les icones, elles envoient l’adresse de l’article mais uniquement le nom du site
    J’aurais aimé récupérer le titre de l’article au lieu du nom du site
    http://www.cornouaille-ecologie.eu/
    Comment faire ?
    Merci de votre aide
    René

    • Jol.Gloubi

      Bonjour à tous,
      J’ai exactement le même problème que René : en cliquant sur les icones, elles envoient l’adresse de l’article mais uniquement le nom du site. J’aimerais que le nom de l’article apparaisse. Je n’ai pas trouvé d’infos à ce sujet sur internet. Comment faire ?
      J’ai SPIP 3.0.17 et c’est la version 1.0.5 stable de Social tags.
      Merci à vous,
      Joël

    Répondre à ce message

  • Aurigeft

    Bonjour,

    Est-il possible de Partager seulement l’image contenue dans 1 article ?

    Merci

    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