Ce blog vient de fêter ses dix ans, mais Internet a évolué entre temps. Les blogs ne sont plus à la mode, comme les pages statiques et autres homepages ne l’étaient plus il y a une décennie [1]. « Le monde » a migré sur Facebook, Twitter, accessoirement Google + [2]. Ceux qui bloguent encore utilisent les boutons de Facebook & consorts avec un GROS effet pervers : le tracking des utilisateurs par lesdits services, y compris ceux qui ne repostent/retweetent pas les pages, puisque les boutons proviennent directement des serveurs des mastodontes américains.

En tant que webmestre je pourrais dire que je m’en fiche : je ne suis pas tracké. Et quand je surfe, Ghostery me masque ces boutons si je ne veux pas explicitement partager des choses… mais tout le monde ne l’utilise pas, et autant réduire le problème à la source.

Mon magazine allemand favori C’t s’est déjà attaqué au problème, d’abord avec des icônes à double clic, puis avec Shariff, que je viens d’installer ici. (Il doit exister des équivalents vu que ce n’est pas fondamentalement compliqué, par exemple Meddelare, que je n’ai pas testé). Je suis preneur de toute autre option.

Liens

Principe

Si j’ai bien compris, les boutons sociaux sont générés par un script qui tourne sur mon serveur, et les icônes proviennent de la police de caractère libre Font Awesome qui comprend les icônes des services suscités et bien d’autres. Les serveurs des nouveaux maîtres du monde ne savent donc pas que vous êtes venus ici, votre navigateur ne leur parle pas.

Si le visiteur clique pour partager par exemple la vérité sur la mort de Kennedy [3], alors seulement il y a communication entre son navigateur et celui de la NSA de Google ou concurrents.

Détails techniques divers

Intégration à une page web
  1. Télécharger les feuilles de style et les scripts Javascript sur Github. En fait, il y a deux versions, je préfère la « complète », ce qui ne fait que deux fichiers à déposer sur son serveur web.
  2. La page du projet donne un exemple propre, mais le pavé suivant suffit, inséré à un endroit intelligemment choisi de la page et en adaptant les deux chemins :
 <link href="/scripts/shariff/shariff.complete.css" rel="stylesheet">
 <div class="shariff" 
   data-lang=fr 
   data-background-image=none data-orientation=vertical 
   data-theme=standard
   data-services="[&quot;facebook&quot;,&quot;googleplus&quot;,&quot;twitter&quot;]"
 ></div>
 <script src="/scripts/shariff/shariff.complete.js"></script>

C’est l’emplacement du script qui indique l’emplacement effectif.

On pourrait changer la langue (le défaut est l’allemand :-), le thème, les services (comme LinkedIn ou le mail) ; voir la page du projet.

Intégration à Dotclear

Cela dépend du thème. J’utilise Ductile et le code ci-dessus, inséré dans _sidebar.html, entre la première et le deuxième ligne, fonctionne. J’ai un problème esthétique (le background-image pointant vers l’image du carré gris) mais je ne m’y connais pas vraiment en CSS et je n’ai pas envie de hacker le code de Dotclear. C’est bien les CMS mais jamais assez flexible.

Plugin Wordpress

Il y en a un, je n’ai pas testé : https://wordpress.org/plugins/shariff/

Récupérer Font Awesome

Il est un peu paradoxal de se débarrasser d’un suivi par Facebook pour le remplacer par celui de l’éditeur de la police FontAwesome (moins pérenne également). Les commentaires de la page de Shariff suggère de télécharger la police sur son serveur et, dans shariff.complete.css, de remplacer les URL du style https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0 par /fonts/font-awesome/fonts/fontawesome-webfont.eot.

Le problème ne se pose pas si on utilise la version réduite sharif.min.css qui suppose que l’on utilise déjà cette police, je n’ai pas testé.

Décompte des partages

La seconde étape consistera à afficher le nombre de partage (pour le moment je vais me passer de n’afficher que des zéros), que ne connaissent que Google & consorts. Pour éviter que le simple affichage ne rende le visiteur à nouveau visible à leurs grandes oreilles, il va falloir ajouter un script côté serveur qui fera l’interrogation, et seul l’IP du site sera enregistré par la NSA à la place de toutes celles des lecteurs. Il y a des versions en Node.js, perl, PHP, Java. On va voir.

Tracking or not tracking

Ce genre de technique ne supprime pas une autre source de flicage des utilisateurs : celle par les créateurs du site. J’utilise Piwik (et vous ai posé un cookie par la même occasion) pour suivre en gros le trafic, mais vous devez me croire sur parole si je vous dis que je n’en fais rien que des graphiques agrégés ou une liste des mots clés qui mènent ici. Même avec AdblockPlus, uBlock Origin, Ghostery, le Do-Not-Track activé chez tout le monde, je peux toujours explorer mes logs Apache. Je n’ai pas encore comparé les résultats de Piwik et AWstats…

Notes

[1] Je rappelle que le site statique existe toujours, un peu mis à jour depuis les années 90.

[2] Uniquement des gens intéressants pour Google + apparemment.

[3] Oui, c’est du racolage.