Image illustrant Partage Facebook : Respect de la vie privée de vos visiteurs et performances

Partage Facebook : Respect de la vie privée de vos visiteurs et performances

J’accorde beaucoup d’importance au respect de la vie privée de mes visiteurs, de la même façon que j’en accorde à mes clients. Or, il ne fait plus aucun doute que Facebook nous suit à la trace : que nous y soyons connectés ou pas.
À partir du moment où un simple "Social widget" est installé sur votre site, le géant (et les autres) des réseaux sociaux piste vos visiteurs.

Mauvaises performances

En plus de pister nos visiteurs, le SDK (Software Development Kit) qui nous permet d’intégrer les widgets est assez lourd et, à l’heure où j’écris ces lignes, il est pas loin de peser 60 kb Gzippé !
A cela j’ajoute le fait que, par défaut, il n’est pas chargé en asynchrone et donc bloque le rendu de notre page selon que nous le plaçons en début ou en fin de document.

Ces désavantages sont pour moi inacceptables lorsque l’on recherche la qualité et la performance dans ses développements.
Mais qui de nos jours peut encore se passer de cette fonctionnalité pour atteindre un public plus large ?

Le compromis partage social/vie privée

Il existe dans l’API de Facebook un indice pour notre solution : le lien que FB utilise pour le partage via leur boîte de dialogue.

<a href="#" onclick=" window.open(
     'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
     'facebook-share-dialog',
     'width=626,height=436');
   return false;">Share on Facebook</a>

Outre le fait que le onclick soit largement déconseillé, l’url appelée est assez intéressante et nous pourrions l’utiliser en direct plutôt que de passer par la boîte de dialogue !
J’obtiens ainsi un lien qui renvoie vers le "sharer" de Facebook avec en paramètre l’url que je veux partager. Adieu le SDK, le tracking et cet horrible onclick, bienvenue le partage !

Voici un exemple d’url de partage appelée avec avec une page de mon site (remarquez le partage des images)

<a href="https://www.facebook.com/sharer/sharer.php?u=http://jefaisvotresite.com/portfolio/affiche-concert-d-orgue/" title="Partager cette page sur Facebook">Partager sur Facebook</a>

Et voici son résultat une fois cliquée : la fenêtre de dialogue est la même que celle proposée par le SDK.

Désavantage(s)

Si il en est un c’est celui de la "redirection" vers Facebook : le visiteur quitte votre page pour aller sur Facebook.
"Si il en est une" car c’est une action que le visiteur initie lui-même en cliquant sur un lien : dans la représentation de son flux de navigation qu’il se fait, rien n’est cassé et il lui suffira de faire "retour à la page précédente" pour revenir sur votre site.
Et pour les plus sceptiques le lien qu’il vient de partager va s’afficher sur son mur et rien ne l’empêche de cliquer dessus pour rejoindre votre url.

Twitter et Google+

Vous cherchez la même astuce pour Twitter ? Lisez cet article.
La même technique pour Google+ ? Suivez ce lien.