Comment ajouter des boutons de partage sociaux... sans plugin ?

bouton de partage sociaux WordPress sans plugin De nombreux plugins vous permettant d'ajouter des boutons de partage sociaux à vos articles sont disponibles, mais alors pourquoi les coder soi-même me demanderez-vous ?

Mes 5 raisons d'utiliser des boutons de partage sociaux home-made :

1 - Les plugins de partage sociaux sont une horreur coté temps de chargement
2 - Ca fait toujours un plugin de moins
3 - Je veux pouvoir changer l'apparence des boutons
4 - Aucun plugin ne propose le bouton de partage Scoop-it
5 - Je ne mange que les cookies fait-maison, sans pub !

Deux de ces raisons ont été suffisantes pour ma part. Sachant que la seule perte est le comptage des cliques, mais que si vous utilisez Google Analytics, un événement sur le lien peut combler les plus férus de statistiques.

Pour commencer, voyons les url de partage des différents réseaux sociaux

Lien de partage pour Facebook

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">

Lien de partage pour Twitter

<a href="http://twitter.com/share" target="blank" data-url="<?php the_permalink() ?>" data-via="<?php bloginfo('name'); ?>" data-text="<?php the_title(); ?>" data-count="horizontal">

Lien de partage pour Scoop-it

<a href="https://www.scoop.it/bookmarklet?url=<?php the_permalink();?>" target="_blank">

Lien de partage pour Linkedin

<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">

Lien de partage pour Google+

<a href="https://plus.google.com/share?url=<?php the_permalink();?>" target="_blank">

Voilà, maintenant, passons à la mise en place concrète des boutons de partage sociaux, sans plugin, en 3 étapes

1. Images de boutons

Vous pouvez télécharger mes images (cf mes liens de partage ci-dessous), et les déposer dans le fichier /images de votre thème.

Vous pouvez aussi bien sûr utiliser des images faites par vous-même ou glanées sur internet. Pensez simplement à changer le nom des images appelées dans le code ci-dessous, ou à renommer vos images à l'identique.

2. Insérer les liens dans vos articles

Rendez-vous dans le fichier single.php de votre thème et insérez ce code après la boucle (end if) :

<div class="bloc-partage">
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/share" target="blank" data-url="<?php the_permalink() ?>" data-via="<?php bloginfo('name'); ?>" data-text="<?php the_title(); ?>" data-count="horizontal">
 <img alt="Partager sur Twitter" src="<?php bloginfo('template_url'); ?>/images/partager-twitter.png" />
</a>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">
 <img alt="Partager sur Facebook" src="<?php bloginfo('template_url'); ?>/images/partager-facebook.png" />
</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">
 <img alt="Partager sur Linkedin" src="<?php bloginfo('template_url'); ?>/images/partager-linkedin.png" />
</a>
<a href="https://www.scoop.it/bookmarklet?url=<?php the_permalink();?>" target="_blank">
 <img alt="Partager sur Scoopit!" src="<?php bloginfo('template_url'); ?>/images/partager-scoopit.png" />
</a>
<a href="https://plus.google.com/share?url=<?php the_permalink();?>" target="_blank">
 <img alt="Partager sur Google+" src="<?php bloginfo('template_url'); ?>/images/partager-googleplus.png" />
</a>
<div class="clear"></div>
</div>

3. Un peu de style

Enfin pour aligner tout ceci, un peu de css à mettre où vous voulez dans le fichier style.css de votre thème :

.bloc-partage {float:right; width:200px; padding-top:0px;}
.bloc-partage a {float:right; margin-left: 7px;}
.clear {display:block;}

Et voilà, le tour est joué, dîtes-moi si ça a marché pour vous !