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

  • Bonjour,
    J’utilise ce plugin et ca marche nickel, mais j’aimerai savoir comment changer les boutons facebook et twiter. je trouve que ces bontons sont pas clair avec un fond blanc.. voir image jointe

    Répondre à ce message

  • 3
    zoc_spaak

    Bonjour à tous,

    J’essaie sans succès d’installer ce plugin depuis plusieurs semaines, cependant rien ne s’affiche...
    Pouvez précisez où il faut inclure le

    car je suis un peu perdu...
    J’ai essaye de le mettre dans article.html sous titres et dans head.html sous INSERT_HEAD mais rien n’y fait.

    Je précise que je suis un peu (très) novice en la matière et que je suis sous spip 3.0.5 utilisant un squelette zpip.

    Merci d’avance pour votre aide.
    A bientôt

    • Bonjour,
      il faut l’ajouter dans le fichier squelettes/navigation/page-dist.html
      ou page.html
      ou squelettes/extra/page-dist.html

      selon ta config et le squelette / le thème que tu utilises.

      dd

    • zoc_spaak

      Bonjour,
      Merci !
      Sachant que j’utilise un squelette zpip et un thème tincredible pouvez vous me guider un peu plus ?
      A quel endroit du fichier dois je l’insérer ?
      Merci encore !
      Zoc_spaak

    • je dirai dans plugins/zpip/navigation/dist.html
      ou plugins/zpip/navigation/page.html

      a sauvegarder avec tes modifs avec la même arborescence dans squelettes/navigation/dist.html
      (créer le répertoire squelettes s’il n’existe pas)

      Voir la doc

      dd

    Répondre à ce message

  • 2

    Bonjour,

    je voudrais changer 2/3 bricoles (ordre des icônes,..) mais je ne trouve pas le squelette !

    j’ai juste trouvé cette référence dans socialtags.html

    [(#REM) Compatibilite ascendante avec l'ancienne noisette ]
    <div id="socialtags"></div>

    merci

    • Bonjour, je cherchais justement la même chose afin de placer en premier l’icône d’impression, il faut aller dans le fichier socialtags.xml où tous les éléments sont placés par ordre alphabétique et les réorganiser selon son besoin. J’ai enregistré le fichier modifié dans squelettes pour ne pas tout perdre à la prochaine màj ;)
      Bonne année sous spip :

    • Bonjour,

      Oui merci cela fonctionne bien pour des éléments existants. mais si je veux ajouter le flux RSS parce qu’il me semble plus logique de le mettre avec les autres boutons et bien cela devrait se passer dans le fichier socialtags.js.html mais dès que je change ce fichier et le sauvegarde dans squelettes j’ai une belle erreur jason.

      Ce doit être possible pour quelque qui maîtrise cet autre langage mais pas pour moi.

      dd

    Répondre à ce message

  • bonjour,

    est-il possible d’ajouter un autre réseau social ? comme celui-ci :

    http://lesincroyablescomestibles.ning.com/

    Répondre à ce message

  • Salut, tout le monde !

    J’ai le google+ activé (j’ai testé avec et sans plugin, mais ici, juste la version normale, donc sans plugin me conviendrait bien, si elle marchait chez moi) (l’autre méthode avec le plugin elle aussi ne fonctionne pas plus d’ailleurs) ;)

    L’icône s’affiche bien, ça ouvre une popup avec un lien du genre :

    https://plusone.google.com/_/+1/confirm?url=http%3A%2F%2Furldusite.com

    mais ici aprés avoir tapé mon login, plus rien.. page blanche, vous avez déjà eu ce souci ?

    Est-ce donc google qui foire ? ou auraient-ils changés leur méthode d’appel ?
    Si je suis le seul dans ce cas, ça serait donc complètement ma faute :*)
    Merci de votre retour !

    Répondre à ce message

  • 2

    Bonjour,

    Le plugin marche très bien. Sauf que les icônes s’affichent en colonne, au lieu de s’afficher en ligne. Exemple : http://pcfaubervilliers.fr/spip.php?article879

    Je suppose qu’il faut que je retouche un fichier css. Lequel et quoi ?...

    Merci d’avance,

    Denis

    • thraxsivae

      Je ne suis pas certain d’avoir compris te question.
      Tu peux paramétrer où s’affichent les icônes SocialTag.
      Choisit dans la configuration du Plugin « .page_article .cartouche:first »
      Cela t’évitera de faire descendre le formulaire "recherche" et l’affichage des rubriques du Squelette type de Zpip

    • Bon, j’ai réussi à corriger le problème tout seul.
      J’ai remplacé block:inline dans socialtags.css par float:left.
      Et voilà.

    Répondre à ce message

  • Bonjour,

    Est-il possible d’activer/désactiver l’affichage de « la série d’icônes relatives aux sites choisis » pour chaque article. Actuellement je ne peux l’utiliser que pour « tous les articles » ou « aucun article ».

    Cordialement

    FDG

    Répondre à ce message

  • 2
    Carambole

    Bonjour à tous.
    Je suis en train d’essayer d’installer Social Tag sur un spip 2.0.10 avec CFG.
    Quand je souhaite entrer dans la configuration du plugin, je tombe sur le message suivant :

    Accès refusé
    (cfg socialtags - socialtags - )

    Avez vous idée du problème ?
    A+
    Guillaume

    • françois

      Bonjour,
      J’ai exactement le même souci de mon côté (avec spip 2.1.2).
      Quelqu’un aurait-il une idée pour nous dépanner ?
      François

    • François

      Bonsoir,

      J’ai trouvé une solution : j’étais enregistré comme administrateur, mais pas comme webmestre. Je viens de m’octroyer les droits de webmestre en suivant la procédure indiquée ici :

      http://forum.spip.net/fr_204109.html

      J’ai créé un fichier mes_options dans config, dans lequel j’ai recopié le code indiqué sur le site ci-dessus :

      <?php
      define ('_ID_WEBMESTRES', '1:2');
      ?>

      ainsi l’auteur numéro 1 reste webmestre, et l’auteur n°2 (moi) le devient ! Si tu es l’auteur n°8, remplace simplement le 2 par un 8, et le tour est joué !
      Cordialement,
      François

    Répondre à ce message

  • Bonjour,

    Merci pour ce plugin et ses nombreuses options.

    Je suis en SPIP 2.1.19. J’ai installé le plugin pour ne plus avoir la série de iframes vers des sites tiers que sont les boutons fournis par FB / Twitter et aussi pour remplacer le Like par un Share a priori plus visible sur la timeline. Je rencontre toutefois quelques difficultés.

    • j’ai activé l’option permettant d’ouvrir dans une nouvelle fenêtre l’interface de partage mais elle ne fonctionne pas sur http://www.taurillon.org/5344
    • j’observe que les boutons de partage sont insérés via javascript ce qui est bien pour ne pas obliger à modifier le squelette mais est-il possible de les insérer sans cette méthode (en modifiant le squelette justement) pour alléger le travail du navigateur ?
    • le lien de partage Twitter affiche l’URL complète de la page, ne serait-il pas possible de prévoir le partage par défaut de l’URL courte quand elle est activée (celle qui utilise uniquement l’id_article).
    • le bouton de partage Facebook ne prends pas en compte les données Open Graph présentes dans la page

    Valéry

    Répondre à ce message

  • Bonjour à tous,

    J’ai une question toute simple : Peut-on utiliser Social tags dans les brèves ?

    Si oui, quelle est la procédure car j’ai inséré les tags dans mes brèves mais ça ne me remonte pas le bon lien (dans Twitter par exemple) ? Ça cherche automatiquement à remonter des articles donc l’URL remontée se termine par « article0 ».

    Merci pour vos réponses

    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