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

  • Lisbeth

    Bonjour,

    J’ai installé le plugin socialtags pour insérer une icône facebook sur mon site, lorsqu’on clique sur l’icône, un nouvel onglet s’ouvre avec le site de fb mais n’affiche pas le contenu souhaité (il est indiqué comme indisponible), l’url est pourtant la bonne, pour arriver à la page souhaitée il suffit de recharger la page et ça marche.
    Je n’arrive pas à comprendre pourquoi il faut recharger la page pour qu’il s’affiche. Quelqu’un pourrait-il m’aider ?

    Merci d’avance.

    Répondre à ce message

  • Bonjour,

    Déjà merci pour le plugin, que j’utilise depuis un bon moment et sur pas mal de sites.

    Au fur et à mesure j’ai modifié et ajouté certaines fonctions et paramétrages que j’utilise sur mes sites :
    -  la taille des icones est parametrable en 16px ou 32px
    -  la barre de liens peut être verticale ou horizontale
    -  la transparence des icones est paramétrable

    bref , je viens de faire la diff et d’intégrer mes modifs à la dernière version présente sur la zone et je propose de les re-versser, je ne sais pas si il faut mieux brancher ou trop comment faire pour soumettre mes modification à l’auteur du plugin

    Répondre à ce message

  • 1

    Bonsoir,

    J’ai un doute sur la compat spip3 de ce plugin. Tout test habituel fait par ailleurs, impossible d’afficher quelque bouton social que ce soit ?

    Suis-je seul dans ce cas ou d’autres ont-il eu le soucis ?

    Merci.

    • Mist. GraphX

      Bonjour,

      J’ai eut le même problème, j’ai l’impression que la fonction produire_fond_statique() de socialtags_fonctions.php pose problème sur une mutualisation de spip dans mon cas, elle allait chercher le cache_js dans le dossier de la racine et non dans le dossier du site :

      en remplaçant par l’ancienne version spip2 du chargement du js ça marche :

      // on a besoin de jquery.cookie
      	if (!strpos($flux, 'jquery.cookie.js'))
      		$flux .= "<script type='text/javascript' src='".find_in_path('javascript/jquery.cookie.js')."'></script>\n";
      	$jsFile = generer_url_public('socialtags.js');
      	$flux .= "<script src='$jsFile' type='text/javascript'></script>\n";

      j’ai pas testé sur du non mutualisé par contre (pas le temps tout de suite :) )

    Répondre à ce message

  • 2

    Bonjour,

    Tout d’abord, grand merci pour ce plugin qui fonctionne parfaitement.

    Ma question est peut-être naïve, mais je n’y connais pas grand chose en programmation...

    J’aimerais placer un « track event » de Google analytics sur mes icones. Comment dois-je m’y prendre ? Est-ce que le code de tracking est simplement à ajouter dans les liens du socialtags.xml ? Ou bien faut-il mettre les mains dans un JS ou un PHP ?

    Merci de vos réponses.

    • Hum ! D’après ce que je lis sur le web, le « onClick » n’est pas possible dans un donc pour insérer le tracking dans le fichier xml, cela semble compromis... J’attendrai donc un plus malin que moi qui pourra me donner la bonne piste à suivre.

    • Zut ! Pas possible dans un <link>, voulais-je dire.

    Répondre à ce message

  • Bonjour,

    J’ai de modifié le lien pour Imprimer la page dans socialtags.xml, mais sans succès. Ce que j’aimerai c’est un lien de style :

    <item>
    <title>Imprimer la page</title>
    <author>printer</author>
    <link>#URL_SITE_SPIP/spip.php?page&amp;print=#ID_ARTICLE</link>
    </item>

    Quelqu’un pourrait m’aider ?

    Aline

    Répondre à ce message

  • Bonjour,

    Le plugin fonctionne très bien avec SPIP 2.1.10 mais lorsque j’utilise les adresses propres, il ne recupère plus les images des articles que l’on partage, ce qui est très gênant.

    Quelqu’un sait-il comment éviter ce problème ?
    Merci

    Répondre à ce message

  • 1

    Après avoir appris à maîtriser le plugin, je dois dire qu’il fonctionne à priori bien.

    J’avais cependant besoin de rajouter « via @moncompte » pour twitter. Pour cela, ouvrir socialtags.xml, puis aller sur le bloc réservé à Twitter. Remplacer

    <link>http://twitter.com/share?text=%t&url=%u</link>

    par

    <link>http://twitter.com/share?text=%t&amp;url=%u&amp;via=moncompte</link>

    Ce serait pas mal d’ajouter la fonction dans le paramétrage du plugin.

    ATTENTION à la longueur du titre de la page, car twitter autorise seulement 140 caractères qui comprennent titre + lien raccourci + @moncompte.

    Pour ceux qui cherchent à ouvrir le lien dans une nouvelle page, ouvrir socialtags.js.html, puis modifier la ligne

    <code>$('<a rel="nofollow"><img class="socialtags-hovers" src="'+ this.i +'"\/><\/a>')</code>

    en

    $('<a rel="nofollow" target="_blank"><img class="socialtags-hovers" src="'+ this.i +'"\/><\/a>')
    • Merci pour l’info, mais quitte à personnaliser le truc tentons encore mieux : l’ouverture du lien dans une nouvelle fenêtre de taille configurable sans les barres d’outils, et autres menus... (oui j’aime les défis !)

      Mon problème, j’ai tenté d’introduire la fonction Javascript : onclick="window.open... mais mon niveau en javascript étant proche de zéro, mes essais n’ont pas été concluants !

      Dommage... qui peut me filer un coup de pouce ?
      Cordialement

    Répondre à ce message

  • Tropicaloo

    Bonjour,
    La série d’icônes insérée dans les pages n’est pas accessible pour les personnes souffrant d’un handicap visuel. Serait-il possible de renseigner l’attribut alt= de chaque icône insérée par le plugin ?
    Cdlt

    Répondre à ce message

  • Bonjour,

    Comment fonctionne la sélection des icônes à afficher ? Base de donnée ?

    J’ai un petit soucis, impossible désormais de modifier les icônes qui s’affichent au public.
    J’avais sélectionné : FB, GOOGLE +1, IN et TWITTER

    Aujourd’hui, plus possible de modifier quoi que ce soit. Dans la partie privée, lorsque je sélectionne les sites sociaux, ils sont bien enregistrés et reste cochés, mais aucun changement en version publique !

    Pourtant je ne crois pas avoir modifié quoi que ce soit en dehors de socialtags.css !
    J’ai même tenté de désinstaller le plugin via l’interface privée SPIP puis en supprimant les fichiers du dossier Plugins. Là mes icônes ont bien disparues, mais sont revenues (les mêmes) dès l’instant que j’ai réinstallé le plugin...

    Merci de votre aide,
    Cordialement,

    Répondre à ce message

  • 2

    J’ai un problème avec l’utilisation de se plugin.

    Impossible de le faire fonctionner avec spip SPIP 2.1.10 + Zpip + Noizetier.

    J’ai installé le plugin.

    Je coche facebook et twitter

    Dans « insérer le bloc social-tags en-dessous du bloc suivant : » j’ai mit ..socialtags

    J’ai creer une noisette avec : <div class="socialtags"></div>  

    Le résultat générer est :

    <div class="noisette noisette_socialtags">
    <div class="ajaxbloc env-hDUx7w0CaWZBtT4oj+yA//0e3eSt9ahZOxrJzCnI15Rc7SovK3szfD3TvACGpdXyMDz7kXs89qSUy9g9K9PeLQlza1gNVCKMbTyG4vD0gdgazYRG8kMQ9PmgVIvpgJIm4EdyiykD/l/h0/fH+VJ/bpBRezVcHx6VrVMFGLW+oOV4R46dwmaNkIssFdZA+9TKrRDwQsRb6k3T5KC+7WSaE/2M4XR5f57BI+anRd9ByDnnvoMiXl9LhKa53VQv39dnRZVtwgFZYfEs1B9afILXkFyz5LeK+h3Wk6TUhDXW4MgTQ7m89ZiwgCSWgMg=">
    <div class="socialtags"></div>
    </div>
    <!-- ajaxbloc -->
    </div>

    Comme vous le voyais je ne génère pas la liste

    • (<div class="socialtags"></div>).
    • même problème, rien ne s’affiche non plus pour moi. Pourtant le plugin google +1 fonctionne. Je suis sous spip SPIP 2.1.11 [18566] avec squelette zpip et quelques autres plugins

      Merci d’avance pour votre aide

    • Bonjour, j’ai le même soucis.

      Quelqu’un a réussit à faire fonctionner le plugin soous Zpip ?

    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