Un bouton de partage Identi.ca comme sur Twitter

via sxoop.com/twitter/

Je me suis remis à utiliser Identi.ca récemment. Il s’agit d’une instance de StatusNet dont la fonction première est d’échanger de courts messages. Comme la plupart des sites permettent de partager un lien sur un réseau social grâce à un bouton, j’ai reproduit à l’identique celui de Twitter pour Identi.ca.


Depuis que StatusNet a abandonné son protocole initial pour reposer sur pump.io, toute compatibilité avec leur API a été brutalement perdue. Ce code n’est donc plus d’aucune utilité.

Il entièrement écrit en JavaScript pour que chacun puisse l’intégrer à son site sans avoir nécessairement à modifier un fichier. WordPress ou DotClear permettent de placer du code dans des Widgets, le code ne dépends pas donc pas du CMS.

Mieux. En faisant glisser le bouton dans la barre de marques page de votre navigateur, vous allez pouvoir vous faire un bouton universel : même les sites qui ne sont pas équipés d’un bouton pourront désormais être partagés sur Identi.ca !

Le code source de chaque bouton est sous licence CC-BY. Il inclut des commentaires permettant de respecter la licence, libre à vous de choisir si vous souhaitez les laisser ou non. Moi je préférerais :D

Télécharger identica-share-button.html

Télécharger identica-share-button-large.html

Le compteur ne s’actualise que toutes les 24h.

J’ai ouvert un ticket sur StatusNet pour signaler un problème de redirection qui se produit lorsque vous n’êtes pas loggué sur Identi.ca. Après vous être connecté vous serez en effet retourné sur votre flux au lieu d’être renvoyé vers la page précédente qui contenait votre message.

J’ai rencontré une très grande difficulté à raccourcir l’URL de la page, en interrogeant en AJAX l’API des raccourcisseurs d’URL. Cette utilisation de XMLHttpRequest() « site-to-site » est soumise à une sécurité que de très rares API permettent. La réponse de l’API doit contenir dans le header :

Access-Control-Allow-Origin: *

À ce jour je ne connais que http://is.gd/ qui permet les appels cross-domain. Ce problème peut pourtant facilement se résoudre en ajoutant au script PHP de l’API :

header(‘Access-Control-Allow-Origin: *’);

(plus d’info sur Wikipedia (JSONP cross-site) et sur le siteduzero (AJAX cross-domain))

Les boutons sont compatibles Firefox 3.6+, Chrome 10+ et Safari 5.1+ (signalez moi si cela fonctionne ailleurs). IE 9 et Opera ne semblent pas être supportés mais IE 10+ devrait l’être. J’apprécierais vraiment que vous postiez vos éventuelles améliorations sous cet article :)

N’oubliez pas de suivre le flux RSS des commentaires afin d’être alerté, j’en posterai un pour décrire toute nouvelle mise à jour.

Rédigé le 6 mars 2012 dans "Entre-aide"
  1. Shazen écrit le 6 mars 2012 à 12 h 12 min#

    Bonne nouvelle ! Je l’utiliserai ;-)
    Par contre, je viens de l’utiliser pour partager ton article sur identi.ca mais ton compteur reste à zéro !

  2. Vincent écrit le 6 mars 2012 à 12 h 28 min#

    Yep, je l’ai écrit dans l’article ^^’ En fait Identi.ca n’intègre les nouveaux messages que toutes les 24 heures, je pense par soucis de maintenabilité, pour éviter que les publications que les gens suppriment ne se propagent sur tout le réseau StatusNet instantanément. Donc effectivement, le compteur restera à zéro jusqu’à demain ! :)

  3. Greg de H. écrit le 6 mars 2012 à 12 h 53 min#

    Tu publies cet article justement le lendemain où j’active le bouton sur le planet-libre. Pour le planet-libre j’ai mis une bdd sous-jacente pour ne pas flooder les API de twitter et identica (pour l’instant je n’ai pas activté twitter sur le planet-libre pour rester 100% libre).
    Mais je trouve que ça ne marche pas aussi bien que prévu … probablement un problème dans mon code car beaucoup d’articles restent à 0.
    Ceci dit, bravo pour ton boulot ! C’est une bonne initiative ;)

  4. PostBlue écrit le 6 mars 2012 à 13 h 19 min#

    L’idée n’est certes pas mal et ça fait plaisir de voir se développer des outils annexes à StatusNet (dont identi.ca n’est que la vitrine), mais c’est pour moi un camouflet. Je m’explique : StatusNet est un réseau dont l’essence est la décentralisation. Dans cette idée, ceux qui se plaignent d’identi.ca n’ont pour moi voulu que reproduire leurs habitudes sur Twitter mais dans une structure plus « libre » quoique toujours centralisée ; en gros, ils n’ont rien compris à StatusNet.

    Par ce fonctionnement dédié à identi.ca, un tel bouton (que je salue : c’est vraiment bien d’y avoir pensé et passé du temps) perd énormément de son intérêt si de facto il se limite à identi.ca et. Il lui faudrait être « modulaire » et se baigner dans les joies de OStatus de sorte que chacun puisse sélectionner individuellement son pod de prédilection à l’instar des boutons de partage sur Diaspora*.

  5. Shazen écrit le 6 mars 2012 à 13 h 19 min#

    @Vincent : Oups, sorry ! J’ai lu trop vite ton article ;-)

  6. Vincent écrit le 6 mars 2012 à 14 h 19 min#

    @Shazen j’ai vu ca ^^’ Même Greg n’avait pas tout lu tu vois :P

    @PostBlue je te trouve un peu aigri. En toute fin d’article je t’invite à améliorer le script, tu vois il ne manque pas grand chose, juste une page à ajouter dans le pop-up pour demander d’entrer l’URL de l’instance que le visiteur utilise, et hop redirection page suivante, tu vois ca marche sur du décentralisé aussi.

    Moi j’utilise Identi.ca, et oui je fais parti des 95% qui pourissent StatusNet en chargeant un seul node qui se centralise. Mais j’ai juste pas le temps. J’ai pas le temps ni les ressources pour maintenir un noeud, et jusque là aucune page ne répertorie tous les noeuds triés par santé/nombre d’utilisateurs/fiabilité (httpS ? uptime ? bande passante ?). Donc StatusNet n’est pas étranger non plus à mon choix.

    Maintenant ca n’empêche pas de faire un truc libre, pour du matériel libre, et de le recevoir avec le sourire. On peut toujours faire mieux, il faut juste le faire.

  7. PostBlue écrit le 6 mars 2012 à 18 h 59 min#

    @Vincent Je t’ai répondu sur mon blog, mais sache juste qu’il n’y avait dans mon ton rien de vraiment aigri (je ne suis frustré d’aucune sorte, en quoi serait-ce m’aigrir à défendre l’utilisation décentralisée ?)

    Pour ton script, je suis sincère en louant sa création, c’est vraiment quelque chose dont je suis content et je t’encourage à l’améliorer. Dès que j’aurai un peu de temps (études obligent), je regarderai au code pour qui sait apporter ma pierre à l’édifice.

  8. Vincent écrit le 6 mars 2012 à 19 h 57 min#

    Ah, hé bien désolé =$ J’avais la sensation que ça critiquait sec :P

    Du coup je ne vois vraiment pas comment ajouter la fonctionnalité de manière élégante. C’est pour cela que je me suis « contenté » de faire le bouton de Twitter à l’identique, et que j’attends éventuellement un peu d’aide pour la suite.

    J’aimerais également que StatusNet lise ma demande de nouvelle fonctionnalité afin qu’on puisse cliquer sur le bouton même si on n’est pas loggué. Parce que sans ca, ca va être dur de faire quelque chose de propre. On va perdre ce qu’il vient de rentrer à cause de l’absence de redirection :S

  9. PostBlue écrit le 7 mars 2012 à 2 h 10 min#

    @Vincent Non, du tout. Je suis toujours content (sauf en de rares cas où je trouve qu’il y a un abus certain) de l’activité des communautés permettant d’agrémenter un outil commun : c’est pratique, ça fourni du code (même à modifier) ou des idées (à critiquer, réfléchir puis enfin intégrer). Pour ajouter la fonction élégamment, j’ai quelques idées.

    * cliquer sur le bouton
    * un champ de sélection apparaît juste en dessous de celui-ci, identi.ca préselectionné admettons
    * l’utilisateur peut changer le champ et sa modification est sauvée dans un cookie pour les fois suivantes
    Etc. L’idée est brute, techniquement je n’ai pas d’idée précise sur une possible mise en œuvre.

    Ce concernant StatusNet, je te laisse voir ça avec @evan ou d’autres motivés, j’ai moi-même aussi quelques « réclamations » en attente.

  10. Greg écrit le 7 mars 2012 à 11 h 28 min#

    @Vincent : non, sur le planet-libre je n’ai pas utilisé ton code. C’est pour ça justement que je te disais que je regrettait de découvrir que tu avais bossé dessus justement le lendemain où je l’avais mis en place.

    Sinon, pour revenir à la question de la décentralisation, il faut voir les choses dans leur globalité. En effet, aujourd’hui identi.ca est clairement le plus gros noeud de statusnet. Dès lors, lorsqu’un utilisateur crée son propre noeud statusnet il est souvent lié d’une manière ou d’une autre au noeud principal (sans intermédiaire). Ca signifie donc que l’API fournie par identi.ca permet d’avoir une réponse assez précise lorsqu’on souhaite connaitre le nombre de « share » qui ont été fait pour un article. En effet, même si un article a été partagé sur un noeud qui n’est pas identi.ca, son API le saura car vous avez un follower sur identi.ca qui en sera notifié.
    Tout ça pour dire que même malgré la décentralisation, le fait qu’identi.ca soit un noeud majeur permet d’avoir un compteur de « share » assez précis.

    Mes deux cents

  11. Vincent écrit le 12 mars 2012 à 1 h 23 min#

    = Mise à jour =

    Le compteur comptait jusqu’à 100 posts. Je me suis aperçu de ça car l’API ne retourne que « 100 résultats par page », mais la doc ne faisait mention nulle part de la manière dont il fallait changer de page. En observant le comportement du formulaire de recherche sur une instance j’ai trouvé comment il fallait faire.

    Et cela m’a permit de faire apparaître un bug de l’API de StatusNet 1.0.1 reporté sur cette page qui n’est pas présent sur le nœud que j’ai utilisé pour mes tests. Les modifications suivantes seront opérationnelles dès que Identi.ca l’aura corrigé. Identi.ca est vraiment très buggué, c’est agaçant.

    Le nouveau code réagit désormais à un nombre de réponses configurable, par défaut limité à 100. Pourquoi ne pas simplement compter le total des posts ?

    -> Il fallait faire un choix. L’autre partie du bouton doit retourner une URL raccourcie, je ne peux donc ni utiliser l’URL réelle (puisqu’elle n’est pas contenue dans les messages) ni l’URL raccourcie : d’abord pour ne pas ralentir la page (pas de requête systématique à chaque chargement) ensuite pour ne pas être blacklisté par le raccourciceur. Comme la recherche se base sur le titre de la page, une balise Title trop courte (« Linux blog ») risquerait donc de donner des valeurs erronées.

    -> Le temps de chargement d’une page augmente énormément si le nombre de posts explose. Une simple page appelée « Linux » renvoie plus de 2100 résultats pendant près de 23 secondes, et on récupère l’intégralité des messages (date, auteur, répéteur, id, contenu, etc) dans le seul but de les compter.

    Tant que l’API ne gérera pas intelligemment cette donnée, c’est a dire la calculer en interne et retourner en JSON le nombre de répétitions, limiter à afficher « 100+ » le nombre de messages maximum me parait être le juste milieu.

    La seconde fonctionnalité exécute désormais le compteur de messages après la fin de chargement total de votre page. Ainsi votre choix de configurer le compteur à plus de 100 posts (à partir de 2 pages de résultats dans l’API) n’influencera que le délais d’affichage du résultat (le compteur affiche d’abord la valeur « 0 » puis le résultat du calcul par rafraîchissement).

    C’est une fonctionnalité que j’estime « gadget », elle ne devrait pas empêcher votre site de charger. Si vous avez des scripts un peu dégueulasses type Twitter ou publicité, le temps de chargement du site (et donc du compteur) sera rallongé.

    Pour la petite histoire j’ai choisi window.onload plutôt que DOMContentLoaded (après le chargement total plutôt qu’après le chargement du HTML et du calcul du positionnement des éléments). La raison est simple : bien meilleure compatibilité, code beaucoup plus léger, chargement optimisé.

    /!\ Attention : Utilisez l’API en HTTPS lorsque cela est possible, sinon les gens qui utilisent l’extension Firefox HTTPS Everywhere doubleront le temps de chargement du compteur ! (les requêtes seront envoyées en double, en HTTP puis en HTTPS).

    Restez informé, suivez le RSS des commentaires :)

  12. […] cette plate-forme et les gens qu’on y trouve.Pourtant, comme soutenu dans les commentaires de ce billet présentant un « bouton de partage » dédié à identi.ca :L’idée n’est […]

  13. jenni écrit le 3 juillet 2012 à 20 h 53 min#

    Je kiff se site§!!!!!!!!!!!!!!!!!!!!!!!!!!

  14. […] plus riche: l’API est très proche de Twitter, ça devrait faciliter les choses non? Créons des boutons « partager sur StatusNet », des clients mobiles, des intégrations dans des sites […]

  15. david96 écrit le 18 août 2012 à 11 h 55 min#

    Excellent, c’est tout à fait ce qu’il me fallait, j’aime avoir le contrôle de ce que je publie sur mon site…
    Je vais vois ce script de plus près. Merci :)

Pseudo*: E-Mail*: Site: