01/11/2016 Éco-conception des boutons de partage social

Article mis à jour le 01/05/2019 pour prendre en compte la nouvelle version de l'API de Facebook.

Ce sujet fait suite à Enjeux écologiques des boutons like et de partage. Dans cet article, nous avions listé les différents défauts des boutons officiels proposés par les principaux réseaux sociaux (Facebook, Twitter et Google+).

Voyons à présent comment contourner ces services tiers et créer nos propres boutons éco-conçus. Le cahier des charges est le suivant. Nous voulons des boutons :

• écologiques (moins de données transférées)
• respectueux de la vie privée
• affichant un compteur
• restylables

Voilà à quoi ils peuvent ressembler (source site mlegouis.fr) :

Le principe de notre méthode, c'est de dissocier le bouton et le compteur.

Le bouton

Les réseaux sociaux possèdent tous une page pour faire partager à leurs membres une page web.

Soit XXX l'URL de la page à partager :

Facebook Share	https://www.facebook.com/sharer/sharer.php?u=XXX
Facebook Like	https://www.facebook.com/plugins/like.php?href=XXX
LinkedIn	https://www.linkedin.com/sharing/share-offsite/?url=XXX
Twitter	https://twitter.com/intent/tweet?url=XXX
Google+	https://plus.google.com/share?url=XXX

Permettre à ses visiteurs de partager sa page web sur Facebook est ainsi très facile :

<a href="https://www.facebook.com/sharer/sharer.php?u=XXXXX" target="_blank">Je partage cette page sur Facebook</a>

L'inconvénient ici, c'est que le lien s'est ouvert comme une nouvelle page. Malgré la présence d'un target="_blank" - qui l'ouvre dans un nouvel onglet - il y a risque de "perdre l'internaute".

On préférera que la page s'ouvre dans un petit pop-up, comme c'est le cas des boutons officiels :

<button type="button" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=XXXXX', '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700')" >Je partage cette page sur Facebook</button>

Essayez pour voir : Je partage cette page sur Facebook

D'un point de vue écologique, cette technique est très efficiente, car elle coûte moins de 1000 octets.

Le compteur

Comment afficher le nombre de "J'aime" + "Partages" d'une page sans passer par les boutons officiels ?

Commençons par Facebook. Il fournit une API accessible en HTTP. L'URL https://graph.facebook.com/?ids=https://www.nuweb.fr/&fields=engagement&access_token=ACCESS_TOKEN (ACCESS_TOKEN est à remplacer votre token d'accès) retourne un objet JSON avec la propriété "share_count" :

{ "https://www.nuweb.fr/": { "engagement": { "reaction_count": 0, "comment_count": 0, "share_count": 12, "comment_plugin_count": 0 }, "id": "https://www.nuweb.fr/" } }

On peut donc récupérer cette donnée en JavaScript ou en PHP, comme cela :

function get_nb_fb($url) { $ACCESS_TOKEN='xxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxx'; $nb = 0; $ch = curl_init('https://graph.facebook.com/?ids='.$url.'&fields=engagement&access_token='.$ACCESS_TOKEN); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $json = curl_exec($ch); if ($json!==false) { $res = json_decode($json); if (!empty($res->engagement->share_count)) { $nb=(int)$res->engagement->share_count; } return $nb; } echo get_nb_fb('https://www.nuweb.fr');

Pour Google+, ce sera à l'aide de cette URL : https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&url=XXXXX

Elle ne renvoie pas de JSON mais tout le code HTML d'affichage du bouton et du compteur :

[...] <div class="ap"> <div class="iQa HI"> <div id="aggregateCount" class="Oy">1</div> </div> </div> [...]

En PHP, on extrait le nombre à l'aide d'une expression régulière :

function get_nb_gplus($url) { $nb = 0; $ch = curl_init('https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&url='.$url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $html = curl_exec($ch); if ($html!==false) { if (preg_match('#<div id="aggregateCount" class="Oy">([0-9]+)</div>#',$html,$match)==1) { $nb=(int)$match[1]; } } return $nb; } echo get_nb_gplus('https://www.nuweb.fr');

Attention ! Solliciter deux URL lors de l'exécution d'un script PHP risque de le ralentir considérablement.

Pour éviter ce désagrément, on ne va pas exécuter ces requêtes lors du script principal mais au sein d'une requête Ajax.

Conteneurs des compteurs :

<div id="compteur-fb"></div> <div id="compteur-gplus"></div>

Requête AJAX :

var url='https://www.nuweb.fr'; $.getJSON( 'get-nb.php', {url:url}, function( data ) { var items = []; $.each(data, function(network,nb) { $("#compteur-"+network).html(nb); }); } );

Script get-nb.php :

return json_encode([ 'fb'=>get_nb_fb($_GET['url']), 'gplus'=>get_nb_gplus($_GET['url']) ]);

L'affichage du compteur s'effectuera donc de manière asynchrone.

Deux optimisations

Même si le code HTML de Google+ est assez lourd, le bilan écologique est correct :

• 2 requêtes
• 32 Ko de données transférées

32 Ko, c'est environ 10 fois moins qu'en passant par les boutons officiels (cf Enjeux écologiques des boutons like et de partage).

Mais on peut faire mieux !

Lazy loading

Si vos boutons sont situés en dessous de la ligne de flottaison, c'est-à-dire tant que la zone du compteur n'est pas visible par l'internaute, il est inutile de lancer la requête Ajax susmentionnée (et ainsi déclencher les cURL qu'elle contient). Autant attendre que l'internaute ait atteint cette zone en scrollant, si un jour il l'atteint !

Pour ce faire, on pratiquera une technique incontournable de l'écoconception web : le lazy loading (chargement des données seulement lorsqu'elles sont nécessaires). Personnellement, à ces fins, j'utilise la librairie jquery.appear.

Le gain écologique s'avère être très conséquent.

Mais on peut faire encore mieux !

Cache

Grâce à nos fonctions get_nb_fb() get_nb_gplus(), on a pu récupérer le nombre de partages d'une URL.

L'idée, c'est de mettre en cache ces nombres, par exemple pendant 60 minutes, afin de les réutiliser sans solliciter les API des réseaux sociaux.

En base de données, on crée la table `nb_shares` :

Champ	Type	Commentaire
url	varchar	URL de la page
nb_fb	smallint	Nombre de partages sur Facebook
date_fb	datetime	Date de dernière vérification Facebook
nb_gplus	smallint	Nombre de partages sur Google+
date_gplus	datetime	Date de dernière vérification Google+

Dans le script PHP de la page, on récupère les infos de l'URL courante :

SELECT * FROM `nb_shares` WHERE url='https://www.nuweb.fr/';

On applique l'algorithme suivant :

Pour chaque réseau social, a-t-on sollicité l'API il y a moins de 60 minutes ?

• OUI :
  • Affichage du nombre à l'intérieur du compteur : echo '<div id="compteur-fb">'.$row['nb_fb'].'</div>';
  • Pas de script pour lancer l'Ajax
• NON :
  • Affichage du compteur vide <div id="compteur-fb"></div>
  • Script pour lancer l'Ajax
  • L'Ajax récupérera les nombres, les stockera (ainsi que la date de mise à jour date_fb), et les renverra au DOM pour les afficher dans les compteurs

Certes, les données des compteurs peuvent éventuellement manquer de fraîcheur mais les API ne sont sollicitées au maximum qu'une fois par heure (pour une URL donnée).

Deux avantages induits

Coder soi-même ses boutons amène d'autres avantages. Décidément, l'écoconception apporte toujours un petit truc en plus, un effet positif qu'on n'attendait pas !

Liberté dans l'affichage du compteur

Par exemple, sur Nüweb, le compteur s'incrémente à vue d'oeil ; ça peut attirer le regard vers le bouton et ainsi inciter l'internaute à partager la page.

On peut également choisir d'additionner les compteurs des différents réseaux. Ainsi, sur le site lequipe.fr, on ne trouve qu'un seul compteur :

L'impact visuel est fort.

Statistiques de partages

Stocker en base le nombre de partages de chacune des URL de votre site vous offrira un tableau récapitulatif très riche d'enseignements.

On peut également utiliser ces données au sein d'une page catégorie ou de serps pour montrer la popularité de chaque article. Exemple, sur le site topito.fr :

Synthèse

Résumé des techniques mises en œuvre :

• Coder en dur les boutons de partage
• Récupérer les compteurs en PHP mais lors d'une requête Ajax pour ne pas ralentir le chargement de la page
• Lazy loading

Mise en pratique

Vous êtes cordialement invité(e) à partager cet article sur vos réseaux favoris !