Liens de partages réseaux sociaux et perfs d'un site

J'utilise ça: https://lipis.github.io/bootstrap-social/

Code:

npm install bootstrap-social

Alternative en SVG: https://github.com/edent/SuperTinyIcons

Avec les href qui vont bien : https://github.com/bradvin/social-share-urls

 

De mon côté, j'utilise jsSocials http://js-socials.com/ (qui exploite aussi FontAwesome, de plus en plus indispensable). J'ai simplifié le code à mes besoins (pas difficile).

 

Perso c'est du dev repris de tuto ici ou là.

HTML:

<ul class="iconepartage">

<li class="fa-stack fa-2x"><a target="_blank" title="Partager sur Facebook" href="https://www.facebook.com/sharer.php?u=votreURL" class="facebook-button" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"> <i class="fa fa-square-o fa-stack-2x facebook" ></i>
  <i class="fa fa-facebook fa-stack-1x facebook"></i></a></li>

<li class="fa-stack fa-2x"><a target="_blank" title="Partager sur Twitter" href="https://twitter.com/share?url=votreURL>&amp;text=votretitre" class="tweet-button" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"> <i class="fa fa-square-o fa-stack-2x twitter"></i>
  <i class="fa fa-twitter fa-stack-1x twitter"></i></a></li>

<li class="fa-stack fa-2x"> <a target="_blank" title="Partager sur Pinterest" href="http://pinterest.com/pin/create/button/?url=votreURL&amp;description=Votretitre" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=700');return false;"> <i class="fa fa-square-o fa-stack-2x pinterest"></i>
    <i class="fa fa-pinterest-p fa-stack-1x pinterest"></i></a></li>

<li class="fa-stack fa-2x"> <a target="_blank" title="Partager sur Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=VotreURL&amp;title=Votretitre" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"> <i class="fa fa-square-o fa-stack-2x linkedin"></i>
  <i class="fa fa-linkedin fa-stack-1x linkedin"></i></a></li>
 
  <li class="fa-stack fa-2x"> <a target="_blank" title="Partager sur Google +" href="https://plus.google.com/share?url=VotreURL" class="google-button" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"> <i class="fa fa-square-o fa-stack-2x googleplus"></i>
  <i class="fa fa-google-plus fa-stack-1x googleplus"></i></a></li>

<li class="fa-stack fa-2x"><a rel="nofollow" href="VotreURLcommentaire"> <i class="fa fa-square-o fa-stack-2x commentaire"></i>
  <i class="fa fa-comments-o fa-stack-1x commentaire"></i></a></li>
</ul>

ça suppose une unique appel côté serveur : la font Awesome qui va ensuite afficher le joli logo qui va bien et qui est parfaitement attaquable en CSS pour en faire ce que l'on veut.
Plus radicale, rapide et obéissant au doigt et à l'oeil via CSS y a pas

J'avais ajouter des compteurs de partage avec mise en cache des valeurs pendanr X heures mais avec le temps ce n'est pas fiable (twiter a arrêté, google+ aussi) et ça doit forcément un peu ralentir.

Ci joint une capture d'écran du résultat.