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

  • christophe degoy

    petite erreur qui s’est glissée dans le champ description du code de mon précédant post, il faut plutôt lire le code suivant :

    <item>
<title>LinkedIN</title>
<author>linkedin</author>
<link>http://www.linkedin.com/shareArticle?url=%u</link>
</item>

    Ca ne changeait de toute façon pas le comportement du lien. Juste pour « l’esthétique » de la partie config

    Répondre à ce message

  • christophe degoy

    Bonjour,

    il semble que le socialtag Linked In ai été enlevé du xml ou omis par l’auteur bien que le logo soit présent dans le répertoire image du plug-in

    Voici le code à rajouter dans le XML socialtags.xml après l’entrée Linkarena (vers ligne 200)

    <item>
<title>LinkedIN</title>
<author>linkedin</author>
<link>http://www.linkedin.com/shareArticle?url=%u</link>
<description>Linked in</description>
</item>

    Répondre à ce message

  • Bernard

    Qui peut m’expliquer clairement ce qu’il faut faire de ça car désolé je ne comprends absolument pas :

    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

    Répondre à ce message

  • 1
    thierrybo

    Bon,

    je viens de trouver. Je ne suis pas d’accord avec le commentaire de Guytarr du 19 mars. Oui, il suffit de BIEN ouvrir les yeux, mais l’auteur pourrait faire des phrases plus claires pour mieux expliquer ce qu’il y a à faire et surtout le METTRE SURE CETTE PAGE, pas seulement dans CFG.

    Quand je lis

    insérer éventuellement le code suivant dans les squelettes

    , je dois comprendre quoi, parfois je le mets, parfois non, en fonction de l’age du capitaine ?

    • Cerdic

      Maintenant que tu as trouvé et compris, tu peux utilement proposer un correctif de la doc ou même la mettre à jour en t’inscrivant sur le site et en demandant l’acccès à l’article pour correction. Tout le monde en sortira gagnant.

    Répondre à ce message

  • thierrybo

    Moi il s’affiche sans que je n’ai rien eu a faire dans le squelette, par contre je ne suis pas foutu de le faire s’afficher à un autre endroit (il se met tout en bas, après les commentaires).

    Répondre à ce message

  • dznet

    Pour les personnes chez qui cela ne fonctionne pas essayé d’ajouter entres les les balises

     : #INSERT_HEAD cela devrait fonctionné

    Dznet

    Répondre à ce message

  • Boris

    Bonjour, j’arrive à afficher les tags des « réseaux » mais ils ne sont pas alignés correctement...
    -  Ils ne sont pas sur la même ligne horizontale.
    -  Le texte que je place avec avant la DIV se retrouve pourtant derrière les icones.

    Comment faire ?

    Je suis sous EVA web 4.0...

    Merci
    .Boris

    Répondre à ce message

  • 1
    B3N

    Merci je viens d’installer CFG j’ai donc une liste déroulante avec le choix des différents réseaux sociaux.
    Je travail sur un site qui avait déjà une ancienne version de spip et j’ose pas la mettre à jour surtout que je suis débutant dans le domaine. Maintenant pour faire apparaître les boutons je dois placer un #contenu en bas de mon fichier article.html c’est bien sa ?

    • Arnaud Harbonnier

      Bonjour,
      J’ai installé socialtags sur spip 2.0.10. j’utilise la div pour l’affichage des logos facebook etc ... j’ai installé la div socialtags dans une div parente dans inc-rubriques http://valarep.free.fr. Toutefois elles n’apparaissent que dans la session administrateur et pas de manière publique pour les internautes non enregistrés. Avez-vous une idée ? J’aimerais qu’elles soient accessibles pour tous.
      Arnaud Harbonnier - VALAREP

    Répondre à ce message

  • 2

    Salut,
    Est-il possible d’insérer plusieurs fois les socials tags dans la même page ?
    Le cas peut se présenter lorsque l’on a plusieurs articles affichés dans la même page par exemple.
    Pour info, j’ai bien bien ma balise <div id=« socialtags »></div> sous chacun de mes articles, mais ils ne s’affichent que sous le premier article affiché dans ma page.
    Merci d’avance si quelqu’un peut m’aider !

    • Haqqtiviste

      j’avais écrit un commentaire qui ne sert à rien, j’avais mal lu la question, désolé...

    • Personne n’a déjà rencontré ce problème ? Ou a peut-être une solution ? .............................................................................................................................................. Salut, Est-il possible d’insérer plusieurs fois les socials tags dans la même page ? Le cas peut se présenter lorsque l’on a plusieurs articles affichés dans la même page par exemple. Pour info, j’ai bien bien ma balise

      sous chacun de mes articles, mais ils ne s’affichent que sous le premier article affiché dans ma page. Merci d’avance si quelqu’un peut m’aider !

    Répondre à ce message

  • 1
    B3N

    Bonjour,
    Débutant en spip, j’arrive bien à installer le plugin mets dès lors que je clique sur « configurer » dans mon espace admin j’ai un message d’erreur « cfg introuvable ».

    Faut-il que je fasse une modification dans les squelettes avant ?
    Ma version de spip est la 1.9.2b.

    • Cerdic

      Il faut aussi le plugin cfg pour permettre la configuration du plugin.
      Toutefois, si tu débutes, je te conseille vivement d’utiliser SPIP 2.0.

    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