Créer des boutons de partage statiques

Difficile aujourd’hui d’imaginer publier des articles sans proposer à ses lecteurs de les partager. La grande majorité des blogs affichent ainsi des boutons de partage vers les réseaux sociaux, et ceux qui utilisent WordPress ne sont pas en reste. Sur tous les blogs hébergés sur la plateforme WordPress.com, c’est simple : il y a des boutons de partage par défaut et même si on peut les désactiver, on les retrouve en général sur la majorité des blogs. Si vous hébergez votre blog vous-même, vous pouvez activer ces boutons de partage en utilisant le module Jetpack.

Les boutons de partage proposés par défaut sur WordPress.com
Les boutons de partage proposés par défaut sur WordPress.com

Le répertoire des extensions WordPress compte par ailleurs des dizaines et des dizaines de modules qui permettent d’ajouter des boutons de partage au pied (ou en tête) de chaque article. L’avantage de cette solution, c’est qu’elle fonctionne sans travail de votre part : en général, il suffit d’activer l’extension, éventuellement de régler une ou deux options et c’est tout. Autre solution qui reste très simple : récupérer les boutons officiels proposés par chaque réseau, et l’intégrer directement à son thème.

La majorité de ces boutons de partage ont deux inconvénients : ils ajoutent une charge supplémentaire pas forcément indispensable sur le chargement des pages et ils ajoutent en général des cookies. Avant de continuer, rappelons que tous les sites (y compris les blogs) doivent désormais avoir l’accord de leurs visiteurs pour stocker des cookies. Or les boutons officiels et une bonne partie de ceux utilisés par les extensions chargent des ressources sur les serveurs des réseaux sociaux. Et en général, parmi ces ressources, il y a des cookies qui servent à identifier l’utilisateur qui les utilise.

Les boutons officiels de Twitter que l'on peut intégrer avec une ligne de code.
Les boutons officiels de Twitter que l’on peut intégrer avec une ligne de code.

Ces éléments surchargent également le site en multipliant le nombre de requêtes à chaque chargement d’une page. Il y a une raison à cela : si vous voulez savoir le nombre de tweet qui contient un lien, il faut interroger les serveurs de Twitter et obtenir en réponse un chiffre qui sera ensuite affiché sur le site. Malheureusement, le nombre de requêtes chargées ne dépend pas de vous et on s’aperçoit vite qu’il y en a beaucoup, et beaucoup de requêtes inutiles pour vous. Si la vitesse de chargement est votre priorité, ce n’est pas l’idéal.

Boutons de partage manuels : mon exemple

Dans ma quête d’optimisation et parce que j’utilise des hébergeurs mutualités avec peu de ressources, j’ai choisi de créer mes propres boutons de partage sur mon blog personnel. Avant d’expliquer la méthode suivie, précisons d’emblée que ces boutons sont beaucoup plus simples que ceux que l’on trouve habituellement. Ils ne servent qu’à partager l’article en cours, mais ne servent pas de compteur de partages. Si vous voulez afficher le nombre de partages en permanence à côté de votre article, vous devrez choisir une autre solution.

Les boutons de partage sur mon blog. Ici, le bouton de Twitter est survolé.
Les boutons de partage sur mon blog. Ici, le bouton de Twitter est survolé.

Créer ses propres boutons de partage est beaucoup plus simple qu’il n’y paraît. Vous avez besoin d’un petit peu de PHP pour récupérer le lien et le titre de l’article et surtout de HTML et de CSS pour afficher les boutons proprement dits. J’ai choisi de placer l’essentiel du code dans le fichier sidebar.php qui correspond traditionnellement à la barre latérale du site, mais qui est sous les articles sur mon thème.

Voici l’ensemble du code nécessaire, style exclu, avec d’abord le code PHP nécessaire pour récupérer le lien à partager (ligne 2), le titre de l’article (ligne 3) et ensuite créer les liens de partage. J’ai préféré les générer en amont, exclusivement en PHP et d’associer chaque URL créée dans une variable. Pour Facebook, il faut uniquement le lien1, pour Twitter, le lien et le titre qui sera utilisé pour préremplir le tweet et pour le mail, titre et lien également.

<?php
    $lien = get_permalink();
    $titre = strip_tags(get_the_title());
    $facebook_link  = 'https://www.facebook.com/sharer/sharer.php?u=' . $lien ;
    $twitter_link  = 'http://twitter.com/share?url=' . $lien . '&text=' . $titre ;
    $mail_link = 'mailto:?subject=' . $titre . '&body=' . $titre . ' - ' . $lien ;
?>

Une fois ces variables générées, un peu de code HTML pour générer les boutons de partage. J’ai opté pour une solution extrêmement simple : une liste d’éléments, qui seront affichés sur une ligne ou les uns sur les autres en fonction de la largueur de la page. On utilise aussi du PHP pour insérer les variables créées précédemment.

<div class="partage">
<div class="titre">Partager</div>
<ul>
    <li>Mail</li>
</ul>
<ul>
    <li>Twitter</li>
</ul>
<ul>
    <li>Facebook</li>
</ul>
</div>

Enfin, la mise en forme : n’étant pas designer, j’ai choisi quelque chose de simple, mais efficace à mon avis. Une ligne grise avec quatre éléments, un pour afficher « Partager » et trois « boutons » qui sont en fait des éléments avec un fond de couleur. Pour mieux montrer qu’il s’agit d’un bouton, on retire la couleur en passant le curseur de la souris sur chaque élément. Avec des media queries, on passe chaque élément à 100 % en-dessous d’une certaine largeur, pour une utilisation plus simple sur mobile.

.partage{
float: none;
display: block;
clear: both;
color:white;
font-weight: 200;
font-family: "Helvetica Neue",helvetica,serif;
height: 35px;
width: auto;
}

.partage .titre{
padding:5px 0px 5px 0px;
background-color:#5e5e5e;
width: 25%;
width: calc(100% / 4);
float: left;
text-align:center;
font-size:18px;
font-variant: small-caps;
}

.partage ul {
list-style: none;
margin: 0!important;
padding: 0 !important;
margin-top: 0;
}

.partage ul li{
padding:5px 0px 5px 0px;
width: 25%;
width: calc(100% / 4);
display: inline-block;
text-align: center;
font-size: 17px;
background-color:#5e5e5e;
float:left;
}

.partage ul li:hover{
background-color: white;
color:#5e5e5e !important;
}

.partage a{
color:white !important;
}

Naturellement, ce code n’est qu’un exemple à adapter selon votre thème et vos besoins. Rappelons que mon thème est disponible intégralement sur Github, si vous voulez un petit peu plus de contexte. Là encore, piochez, mais adaptez : le code n’est pas du tout adapté pour tous les usages et il y a énormément d’éléments enregistrés en dur et non sous la forme de variable, comme il faudrait le faire pour un thème qui aurait vocation à être réutilisé.

Mise à jour 11 février 2017 : correction du lien de partage Facebook qui n’était plus bon.


  1. Facebook acceptait auparavant d’autres paramètres, comme une image et un résumé. Ce n’est plus le cas : désormais, seul le lien est nécessaire, le réseau social utilise ensuite les métadonnées de votre site pour le reste. Ce qui simplifie considérablement les choses… 
Publicités

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s