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,

    Est-ce que les boutons sont stockés en local sur le site SPIP, ou s’agit-il d’images hébergées par les différents réseaux sociaux ?

    Merci d’avance,

    Mathieu

    Répondre à ce message

  • Bonjour,

    Merci pour ce plugin !

    Mais serait-il possible de pouvoir surcharger la feuille de styles, tout simplement en modifiant la fonction socialtags_insert_head_css($flux) et, mieux encore en passant par le pipeline insert_head_css ?

    Répondre à ce message

  • Bonjour
    Ce post non pas pour poser un problème mais pour faire partager une solution. Comme j’ai un peu galéré avant de la trouver, je voudrais en faire profiter les autres qui gagneront peut-être ainsi un peu de temps.
    J’administre un site sous SPIP 3.2 et je voulais utiliser ce plugin pour faire des boutons de partage sur les réseaux sociaux, bien que n’étant pas utilisateur d’iceux.
    Or la doc du plugin est obsolète parce que datée, en particulier concernant les badges. Le lien est mort. La page technique de Facebook inaccessible.
    Et il vrai qu’accompagner un lien d’un petit visuel est un plus certain. Il fallait trouver une solution. Elle est simple : il suffit d’installer le plugin Metas, de le paramétrer avec l’image de votre choix, et le badge est installé. Simplissime. Seulement l’effet n’est pas immédiat. Une fois ça marche, une fois pas. Pourquoi ? Parce que le robot de Facebook ne scanne pas automatiquement votre page. Après m’être gratté la tête a essayer de comprendre ce que se passait, je suis tombé sur cette page : https://developers.facebook.com/tools/debug/ En rentrant l’URL de votre page ou de votre site, Facebook vous donne un aperçu de votre post. Si l’image manque, vous re-collectez, et hop, elle est prise en compte. Mon problème était résolu. Si ça peut servir ... Et vive SPIP qui serait parfait si sa documentation était complète. ;-)

    Répondre à ce message

  • Bonjour,

    Serait-il possible d’ajouter des boutons de partage pour Signal et Whatsapp ?

    Merci

    Répondre à ce message

  • 1

    Bonsoir,

    comment ajouter le socialtag instagram ?

    Merci d’avance,

    Cordialement,

    Hervé

    • Bonjour,

      Pas de possibilité à ma connaissance.
      D’ailleurs, les plateformes qui proposent le partage de liens n’offrent pas Instagram dans leurs services : AddToAny, ShareThis et AddThis.

    Répondre à ce message

  • 1

    Bonjour,

    En utilisant SPIP 4.1.2 et la dernière version de SocialTags, il y a un warning dans la console navigateur : L’attribut « src » de l’élément <script> est vide.

    Un ticket est ouvert à ce sujet : https://git.spip.net/spip-contrib-extensions/socialtags/issues/2

    Merci.
    François

    Répondre à ce message

  • Il faudrait modifier dans le JS $('title') en $('head > title') pour être sûr que c’est bien le titre de la page qui est récupéré et pas celui d’un svg incorporé dans le DOM qui a lui même une balise title (c’est le cas par exemple du bouton RSS inséré par SPIP en pied de page).

    Répondre à ce message

  • 8

    Bonjour

    Comment modifier le contenu d’un tweet partagé ? J’aimerais enlever le nom de mon site pour ne garder que l’url de l’article...

    Merci beaucoup !

    • Je relance ^^^
       :)
      merci d’avance

    • Bonjour

      «Comment modifier le contenu d’un tweet partagé ? J’aimerais enlever le nom de mon site pour ne garder que l’url de l’article...»

      Aucune idée, vraiment ? :-)
      Merci bp !

    • Salut,
      Ça doit reprendre en JS le contenu de la balise <title> mais peut-être que ta balise html est mal formatée ?

      https://git.spip.net/spip-contrib-extensions/socialtags/src/branch/master/socialtags.js.html#L19

    • Bonsoir

      J’ai ça

      <head>
          <script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
          <title>[(#TITRE|couper{80}|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
          [<meta name="description" content="(#INTRODUCTION{150}|attribut_html)" />]
          [<link rel="canonical" href="(#URL_ARTICLE|url_absolue)" />]
          <INCLURE{fond=inclure/head} />
      </head>

      dois je changer ?

      [(#NOM_SITE_SPIP|textebrut)]

      Merci !!!

    • Ce qui est en fait ce que le squelette-dit propose...

    • Ok oui si c’est le squelettes-dist, c’est formaté ainsi. C’est dommage d’enlever le nom du site de la balise title, cela fait parti des bonnes pratiques Opquast :
      https://checklists.opquast.com/fr/assurance-qualite-web/le-titre-de-chaque-page-permet-didentifier-le-site.

      Si c’est vraiment important pour toi, je regarderai plutôt le JS et couper au bon endroit.
      la balise title est composée de 3 éléments :

      • titre de l’objet (article, rubrique, etc)
      • un séparateur : « - »
      • le nom du site

      Je surchargerais alors le socialtags.js.html du plugin et à la ligne 19 remplacer

      var title = $('title').text() ||'';

      par

      var title = $('title').text().split(' - ')[0] ||'';

      le split va couper la chaine en 2 là où il ya « - » pour en faire un tableau, et on ne prend que la première partie dont la clé est [0]

    • Top top !

      Merci encore

    • Bonjour Davduf,

      Personnellement j’utilise des balises type « open graph » mais pour twitter et j’insère le code dans le head.
      Cela me sert surtout pour définir une image par défaut pour le partage au cas où le logo n’est pas présent.
      Et cela m’évite de modifier mes metas de base

      <meta name="twitter:card" content="summary" />
      <meta name="twitter:site" content="@nomdemonsite" />
      [<meta name="twitter:title" content="(#TITRE|textebrut)" />]
      [<meta name="twitter:image" content="#URL_SITE_SPIP/(#LOGO_ARTICLE_RUBRIQUE|image_reduire{1200}|extraire_attribut{src}|sinon{IMG/arton9.jpg})" />]
      [<meta name="twitter:description" content="(#INTRODUCTION|attribut_html)" />]

      https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

    Répondre à ce message

  • Bonjour,
    J’utilise ce plugin sur mes sites SPIP avec Escal.
    Cela publie bien sur Facebook et Twitter, mais le résultat est ... moche !
    Sur FB cela me met le bandeau du site, pas l’image de l’article,
    Idem sur Twitter, c’est juste une ligne avec l’URL, sans l’image.
    Est-ce moi qui ait mal paramétré quelque chose ou le lien avec Escal ou le plugin ?

    Cordialement

    Répondre à ce message

  • 1
    christophe

    bonjour, Je souhaiterais avoir de l’aide pour insérer le réseau social Instagram dans Social Tags. Merci de votre réponse,

    • Bonjour,

      Je suis aussi intéressée par le lien vers Instagram, de plus en plus utilisé.

    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