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

bouton de partage sociaux WordPress sans pluginDe 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 !

Poursuivre votre lecture

10 commentaires : Comment ajouter des boutons de partage sociaux... sans plugin ?

  1. Arpenoo

    19 février 2015

    Bonjour,

    Dites moi comment avoir le bouton Pin it au lieu de Scoop it et avoir un compteur pour chaque bouton. Merci pour le tuto il est excellent.

  2. Laurent

    19 février 2015

    Bonjour Arpenoo,

    pour Pinterest, il semblerait que le lien soit de cette forme, par exemple pour passer la thunbnail :

    <a href="pinterest.com/pin/create/button/?url=<?php the_permalink();?>&media=<?php the_post_thumbnail(); ?>&description=<?php echo get_post(get_post_thumbnail_id())->post_content; ?>">

    Pour le comptage du nombre de partage, vous pouvez utiliser le get push de Google afin de remonter l'info dans les événements de GA, du type :

    onclick="_gaq.push(['_trackEvent', 'name', value]);"
  3. Schekler Eric

    19 mars 2016

    Je viens d’utiliser ce code sur mon site, ça fonctionne très bien !
    De plus, ça permet de ne pas ajouter de plug-in supplémentaire.
    Merci d'avoir partagé ces infos.
    Bien cordialement, Eric

  4. ELU

    22 juin 2016

    je me demande s'il ne faut rien changer dans ce code par exemple URL de ma page et celle de ma page facebook ? merci

  5. Laurent

    22 juin 2016

    Bonjour ELU,
    non, l'idée de ce code est d'afficher des boutons qui permettent à vos visiteurs de partager simplement l'article qu'ils lisent avec leur communauté, sur leurs comptes sociaux à eux.

  6. fred creusot

    7 novembre 2016

    bonjour,
    oû dois je exactement coller le code php dans la page? je l'ai mis après endif et maintenant mes page ne se voient plus car erreur (j'avais fait une copie de php single et je l'ai mise dans le theme enfant et là j'ai collé le code)
    merci de ton aide

  7. fred creusot

    7 novembre 2016

    pardon, je l'ai replacé et il n'y a plus d'erreur, la page apparait mais je ne vois pas les boutons ? bouhhhhh!

  8. Laurent

    8 novembre 2016

    Bonjour Fred,
    tu as bien téléchargé les images et les as placé dans le répertoire /images de ton thème ?

  9. fred creusot

    8 novembre 2016

    oui

  10. Laurent

    9 novembre 2016

    Difficile à dire d'où vient le problème sans voir, le code est assez simple. Tu peux tester en remplaçant une image par un texte, sinon c'est que le code n'est pas placé au bon endroit.

Laisser un commentaire

Si vous insérez du code, merci d'utiliser les balises [php] en début et [/php] en fin, ou [html] et [/html]...