Le web est social. Et offrir la possibilité de partager le contenu de son blog sur Facebook, Twitter, Google Plus et autres plateformes de réseaux sociaux, comme LinkedIn, fait partie des plus que vous pouvez, voire devez, apporter à l’expérience de visite sur votre site web. Voyons comment installer des boutons de partage social sur les sites web qui ne ralentissent pas l’affichage de vos pages tout en n’installant pas de cookies de tracking ou de suivi du comportement de vos visiteurs…
Pourquoi ne pas utiliser les widgets des plateformes ?
Les plateformes proposent toutes des widgets pour installer facilement ces boutons en marge de vos articles, mais l’installation de ces boutons de partage présente deux inconvénients :
- Le premier est qu’ils augmentent, souvent significativement, le temps de chargement des pages
- Le second problème que pose l’installation facile des boutons “officiels” concerne la vie privée des visiteurs.
Les scripts chargent des tonnes de ressources sur les serveurs des réseaux sociaux, des ressources inutiles pour votre publication, et ils installent des cookies de suivi comportemental pour pister les visites et proposer de meilleures publicités. Ce qui a des conséquences sur le plan de la législation, notamment la loi “cookies et liberté” qui impose une information et un consentement préalable du visiteur avant l’utilisation de ces cookies.
Installer des boutons de partage “manuels”
Voilà une bonne idée pour optimiser votre site web, et aussi pour améliorer l’expérience des visiteurs : proposer des boutons de partage de votre contenu sur leurs plateformes sociales préférées. Oui, mais sans alourdir les pages et sans tracker le visiteur à son insu. C’est ainsi que sont conçus les boutons de partage du site E SYSTEMES ! Légers et sans tracking…
Ces boutons reconsituent le comportement simple de partage des widgets, au clic ils vont ouvrir une fenêtre popUp pour proposer le partage de l’article en cours sur le réseau social concerné. Créer ses propres boutons de partage est finalement assez simple. Vous avez besoin de récupérer le lien et le titre de l’article, à l’aide d’un petit peu de PHP si votre site est dynamique, et surtout de HTML et de CSS pour afficher les boutons proprement dits.
Le bouton social “soft” : un simple lien sur une image
Concernant l’aspect graphique, à vous de créer ou de récupérer le bouton qui vous convient, à vous également d’écrire les CSS qui vous permettrons de placer le bouton sur la page.
Les boutons que nous allons créer ici sont de simples liens sur une image, l’image du bouton avec un lien vers l’action de partage.
// Le code HTML d'un lien "classique" sur une image <a href="ici-l-adresse-du-lien.html"> <img src="ici-l-adresse-de-l-image.jpg"> </a>
Nous avons l’image du bouton. Nous aurons besoin de récupérer le lien de la page dont nous voulons partager le contenu, ainsi que le titre de l’article, nécessaire pour certains réseaux.
On insère ces données dans une variable PHP pour les utiliser dans les liens spécifiques à chacun des réseaux sur lequel on veut proposer le partage. La façon de récupérer le lien et le titre est à adapter selon votre CMS.
<?php // On insère le lien de la page actuelle dans une variable // exemple de récupération du lien pour WordPress $lien = get_permalink(); // On insère le titre de la page dans une variable // exemple de récupération du titre pour WordPress // strip_tags permet de supprimer l'éventuel code HTML présent $titre = strip_tags(get_the_title()); ?>
Optionnellement, on ajoutera aussi au lien un peu de Javascript inline pour provoquer l’ouverture de la fenêtre PopUp, ici une fenêtre redimentionnable de 500 sur 700 pixels:
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"
les modèles de liens pour quelques réseaux :
Facebook
https://www.facebook.com/sharer.php?u=ICI-LE-LIEN&t=ICI-LE-TITRE
Twitter
https://twitter.com/share?url=ICI-LE-LIEN&text=ICI-LE-TITRE&via=VOTRE-NOM-TWITTER
Google Plus
https://plus.google.com/share?url=ICI-LE-LIEN&hl=fr
Viadeo
https://www.viadeo.com/fr/widgets/share/preview?widgetHost=viadeo.com&urlToBeShared=ICI-LE-LIEN
LinkedIn
https://www.linkedin.com/shareArticle?mini=true&url=ICI-LE-LIEN&title=ICI-LE-TITRE
Pinterest
Pour pinterest, c’est un peu spécial car il s’agit sur ce réseau d’épingler une image dans son compte. On devra donc ajouter dans les paramètres l’adresse de l’image à partager.
https://pinterest.com/pin/create/button/?url=ICI-LE-LIEN&media=ADRESSE-DE-L-IMAGE&description=ICI-LE-TITRE-OU-LA-DESCRIPTION
Pour les autres réseaux sociaux on trouvera la forme des URL de partage en se documentant un peu et en faisant des tests pour l’analyser…
On remplacera dans ces liens ICI-LE-TITRE par le titre de l’article proposé au partage et ICI-LE-LIEN… Par son lien permanent, autrement dit son URL ou son permalink !
Ce qui donne pour, par exemple, un bouton de partage sur facebook :
<a href="https://www.facebook.com/sharer.php?u=<?= $lien ?>&t=<?= $titre ?>"> <img src="ici-l-adresse-de-l-image-du-bouton-facebook.jpg"> </a>
Et avec le code Javascript pour la popUp :
<a href="https://www.facebook.com/sharer.php?u=<?= $lien ?>&t=<?= $titre ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"> <img src="ici-l-adresse-de-l-image-du-bouton-facebook.jpg"> </a>
Et on procédera de la même façon pour chacun des boutons de chaque réseau. Et vous n’avez plus qu’à insérer le code des boutons dans votre template ou votre thème pour les afficher à l’écran ! Des boutons comme ceux que vous pouvez tester sur cette page pour partager cet article et tous ceux du Live Blog E SYSTEMES. N’hésitez pas, partagez ! Des boutons de partage en bonne et due forme, avec le même effet que les boutons des réseaux mais légers et… Sans tracking !
A lire aussi :
Cookies et libertés individuelles, tous dans le droit chemin
Inspiré de cette proposition sur GitHub Boutons sociaux sans tracking
Un générateur de lien de partage
PS : Je sens que vous brulez de partager l’illustration de ce post (magnifique ce… chat, non ?) dans votre compte Pinterest. Trop tentant… Trop social !
Épingler sur Pinterest… Merci pour le partage !
