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

  • 1

    bonsoir,

    un problème d’affichage quand j’active ce plugin.
    la pagination ne fonctionne plus. Plus précisément, pour une rubrique ou pour une pétition ou qui doit être paginée, quand on pagine, l’URL est bien avec pagination, mais l’affichage n’est pas recalculé. Par exemple l’URL http://xxxxxxxxxxxxxxxx-?debut_article_dates=5#pagination_article_dates
    affiche toujours les 5 premiers articles, et il faut faire un recalcul pour obtenir les 5 suivants

    De plus, les boutons avec cookies de connection qui se rajoutent en haut de page à coté de « espace privé » « recalculer », comme « squelette&CSS » ou « article nn » ne s’affichent plus

    il suffit de désactiver ce plugin pour que tout refonctionne...

    une discussion précédente sur le forum spip, mais indépendant du plugin social évoquait un problème ajax ?

    suis-je le seul avec ce problème ?

    mon environnement : | SPIP 2.1.10 [17657] | Sarka-SPIP 3.0.4 [40664]

    j’ai testé en désactivant d’autres plugins sans succès :
    -  ACTIvité du JOUR 2.1 - en développement
    -  Article PDF 0.2 - stable
    -  Boutons dans le Texte 0.3.3 - stable
    -  cfg : moteur de configuration 1.16.0 - stable
    -  Corbeille 0.71 - stable
    -  Couteau KISS 1.1.1 - stable
    -  Interface d’administration des forums 0.1 - stable
    -  JpGraph 0.3 - en développement
    -  Le Couteau Suisse 1.8.40.04 - stable
    -  Lecteur Multimédia en Flash (MP3,flv) 0.77 - en développement
    -  Mediathèque 1.6.4 - stable
    -  NoSPAM 0.8.5 - stable
    -  Nyroceros 0.2.1 - en développement
    -  SkelEditor 2.0.1 - en test
    -  SPIP Bonux 2.2.21 - stable
    -  SPIP-Listes 2.0199 - en test
    -  SPIP2SPIP 2.3 - stable
    -  Squelette Sarka-SPIP 3 3.0.4 - stable
    -  Thickbox v2 0.3 - en test
    -  Thumbsites 0.3 - stable

    • bonjour,

      Reprenant ce problème non résolu, j’ai retester en supprimant tous les plugins saufs
      -  cfg
      -  sarkaspip
      -  social-tags

      et le pb reste, la pagination ne fonctionne plus sans redéclencher un recalcul de la page...

       ???
      pam

    Répondre à ce message

  • Bonjour,

    j’ai un problème avec l’option Google plus one.

    L’ajout du bouton se fait bien mais ne respect pas la dimension de l’image que j’ai paramétré dans les options du plugin « google +1 ». ce qui fait que l’icône G+ est beaucoup plus grand que les autres.

    Répondre à ce message

  • 7

    Bonjour,

    Novice (encore) avec spip, je cherche (pour l’instant en vain) l’endroit et la manière exacte pour insérer : #MODELE socialtags_badge , dans le squelette. Dans quel fichier ? A quel endroit ? Y a t’il d’autres caractères à insérer ?

    Merci beaucoup

    • bonjour,

      pouvez vous dire si vous utiliser un squelette autre que celui livré en standard dans SPIP ? la réponse dépend de votre réponse.

    • pardon.
      oui, j’utilise le plugin sarka-spip

    • a priori sarkaspip prend déja en compte la présence de social tags. Il doit y avoir une page de configuration de sarkaspip pour choisir où afficher.
      cf http://www.sarka-spip.net/spip.php?article448

    • Oui sarka-spip prend en charge les social-tags, il y a également un formulaire pour coller le code html permettant d’insérer un badge facebook. mais pour que ce badge puisse apparaître, il faut insérer : #MODELEsocialtags_badge , dans les squelettes.

    • oki, je commence un peu mieux à comprendre. SarkaSPIP est un très bon squelette généraliste, mais pour celui qui ne le connaît pas (comme moi) il est un peu difficille à aborder.

      L’endroit où mettre ce code dépend e n réalité de l’endroit où vous souhaitez l’afficher.

      Si vous voulez le mettre dans les cartouches de présentation de l’article, il faut :
      -  copier le fichier plugins/sarkaspip/noisettes/article/inc_article_cartouche.html dans squelettes/noisettes/article/inc_article_cartouche.html
      -  éditer ce fichier, réperer l’endroit qui vous intéresse et insérer votre code.

    • bb il te faut regarde sur la page plugins de sarka spip il me semble mais normalement tu n’a pas besoin de toucher le squelette.

    • En effet, pour l’activer dans Sarka il faut aller dans la configuration d’abord dans « plugins » et cocher « configurer le plugin avec les valeurs nécessaires à Sarka-Spip » puis dans « Article » et cocher l’endroit où on veut l’insérer.
      Il suffit ensuite de revenir dans la configuration de socialtags via CFG pour rajouter tous les boutons voulus (par défaut Sarka n’en met que 4 ou 5 : facebook, netvibes...)

      Voilà, si ça peut aider les débutant(e)s comme moi !!!

    Répondre à ce message

  • certain on reussi a acceder a cfg ?

    Répondre à ce message

  • Bonjour.
    Est-il possible de ne pas avoir la même liste des social tags selon les squelettes ?
    Par exemple, pour le sommaire, je souhaiterais avoir les icones de pluiseurs social tags alors que pour les articles, je ne souhaiterais avoir que facebook ?
    Quelqu’un a t-il une idée ?

    Répondre à ce message

  • 3

    Bonjour,
    Je viens de faire la mise à jour de spip 2.0 à 2.1
    et le plugin Socialtags n’apparait plus sur mes pages
    est il compatible avec cette version de Spip ??
    d’où peut venir le problème ?
    merci

    • ma version de SPIP : SPIP 2.1.10 [17657]

      quelqu’un a t’il réussi à contourner le problème ?

      merci à vous

    • Bonjour

      Tu as vider le tmp via ftp?
      Tous les plugins sont à jour ?

    • ploufplouf

      Bonsoir,

      Moi je viens de passer un site en 2.1.10, j’ai installé le plugin , lse icones s’affichent bien en bas de page mais pas là où je voudrais pourtant sur mon ancienne version (en 2.0.10) pas de soucis, j’avais réussi à placer ma barre d’icones là où je la voulais.

      Si jamais quelqu’un passes par là et a une solution... apparemment il y a un souci pour le placement dans la div socialtags...

    Répondre à ce message

  • bonjour,
    J’ai installé le plugin social tags sur mon site (version 1.9.2d). Lorsque je vais donc CFG pour la configuration rien ne s’affiche ...
    (Aucun champs trouvé dans socialtags)

    Avez vous une solution ? merci d’avance

    Répondre à ce message

  • 1

    Salut, merci pour ce plugin simple et sympa.

    J’ai une petite remarque (à force de corriger pour des nouvelles install ...) : la div ’.socialtags’ a un « clear:both » par défaut, qui fout un peu le bordel, surtout avec un squelette ZPIP sans thème.

    C’est un peu inutile ce « clear:both », non ?

    Répondre à ce message

  • Bonjour,
    Est-ce qu’il existe un moyen de faire pointer directement sur une page twitter spécifique, le lien posé sur l’icône « twitter » du plugin Sociat-tags ?
    Merci pour votre réponse,
    Cyril

    Répondre à ce message

  • 1

    Pour que “div id="socialtags" ; /div ” fonctionne, vérifier le paramètre suivant :
    Une fois que vous êtes dans l’interface de gestion du plugin via CFG, dirigez vous vers les paramètres "Insertion dans les pages :".
    Vous y trouverez une fenêtre pour déterminer quel sélecteur permettra d’inclure les petits icônes du socialtags. Au départ, j’avais "#contenu" inscrit dedans. Je l’ai remplacé par "#socialtags" et ma div a correctement fonctionner.
    Puisse cela en éclairer certains.

    PS : merci aux développeurs du plugin.


    code de ma page body.html de mon theme
    — div id="banner"—
    [(#REM) HEADER / ENTETE ]
    —INCLUREfond=inclure/entete,env
    — /div—
    — div id="container"—
    —div id="navbar"—
    [(#REM) SECONDARY NAVIGATION SIDEBAR / Navigation laterale secondaire ]
    —INCLUREfond=navigation/#ENVtype,env
    —div id="sidebar"—
    [(#REM) MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
    —div id="nav"----INCLUREfond=inclure/barre-nav,env----/div—
    [(#REM) EXTRA INFORMATIONS / Informations complementaires]
    —INCLUREfond=extra/#ENVtype,env
    —/div—
    —/div—

    —div id="content"—
    [(#REM) CONTENT / CONTENU ]
    —INCLUREfond=contenu/#ENVtype,env
    —/div—
    — /div—
    — div id="footer"—
    [(#REM) FOOTER / Pied de page ]
    —div----INCLUREfond=inclure/pied,env----/div—
    — /div—
    — div id="socialtags"—
    — /div—


    FIN DE MA PAGE BODY.HTML

    J’ai suivi les différents conseils sur ce forum sans aucun résultat, si vous avez une autre piste,
    je l’accepte volontiers. Je me demandais juste également s’il fallait entrer une donnée à l’intérieur de la —div id="socialtags"— [c’est à dire ici]—/div— j’ai remplacé les < par de —

    Merci

    • Bon et bien ça marche maintenant...

      va savoir ??? Mais ils sont vraiment tout petit petit

    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