Gagnez en performances avec de nouveaux boutons de partage pour WordPress

Optimiser les performances de WordPress avec de nouveaux boutons de partage

Vous l’avez certainement remarqué, depuis quelques semaines ce blog comporte de nouveaux boutons de partages pour les réseaux sociaux.

Ils sont basés sur la librairie PHP SocialShare de Kévin Dunglas.

Voyons les avantages que ce nouveau mode procure et comment le mettre en œuvre sur votre blog WordPress.

Performance ou fonctionnalité ?

Jusque là j’utilisais les boutons de partage de Jetpack. Ils sont faciles à insérer, pratiques à utiliser, affichent le nombre de partages et sont en partie personnalisables.

Mais, parce que vous vous doutez qu’il y a un mais, chaque bouton fait appel au script du réseau social auquel il correspond.

En clair, chaque bouton fait télécharger son script à vos visiteurs. Du côté des performances, cela fait autant de connexions HTTP supplémentaires. Et bien sûr, comme les scripts ne sont pas sur votre blog, vous n’avez pas la main sur la gestion du cache de ces scripts, ni sur leur compression ou leur minification.
Et je ne parle pas des résolutions DNS supplémentaires à effectuer.

Une autre solution pour ajouter des boutons de partage sur les réseaux sociaux est d’inclure les liens directs vers ceux-ci.
Dans ce cas là, aucun script n’est téléchargé. Un clic sur le bouton ouvre une nouvelle fenêtre, ou une popup, permettant d’effectuer le partage.
Toutefois, il manque une fonctionnalité : l’affichage du nombre de partages n’est pas possible.

Alors afficher le nombre de partages est discutable, certains diront qu’ils ne s’en préoccupent pas, d’autres les cache honteusement, … Je suis sûr que vous avez déjà choisi.
En tout cas, personnellement j’aime bien cette fonctionnalité, même si elle n’apporte rien au blog (et que les chiffres sont souvent très bas).

Bref, ces deux solutions nous demandent de choisir entre performance et fonctionnalité.

Mais c’était sans compter sur la librairie PHP SocialShare.

PHP SocialShare ?

Un développeur français, Kévin Dunglas, a développé une librairie en PHP pour gérer les liens de partage vers les principaux réseaux sociaux, mais aussi pour connaître le nombre de partages.

Et cette librairie, qui fait admirablement bien le travail, est facilement utilisable avec un minimum de connaissances en PHP.

Les principaux réseaux sociaux sont déjà gérés : Facebook, Twitter, Google+, Pinterest, LinkedIn, Scoop.it! et StumbleUpon.
Et s’il en manque, vous pouvez même les implémenter vous-même.

Un inconvénient existe toutefois : tous les réseaux sociaux ne fournissent pas de méthode officielle pour trouver le nombre de partages. Dans ce cas, une technique alternative permet de retrouver ce nombre, mais comme elle n’est pas supportée, elle peut ne plus fonctionner du jour au lendemain sans préavis.

En même temps, je pense que la librairie sera mise à jour en cas de rupture de compatibilité.

Mise en place

L’auteur de la librairie a déjà prévu un tutoriel sur la mise en place de PHP SocialShare sur un site WordPress.

Il consiste en trois étapes :

  • récupérer les sources de la librairie
  • créer des fonctions pour gérer les liens et le nombre de partages en se basant sur la librairie
  • ajout des boutons de partages dans la page correspondante, souvent content.php

Ce tutoriel est très instructif, permet de bien appréhender le fonctionnement de la librairie, et prouve bien que le concept fonctionne : en quelques lignes de PHP (et d’HTML), les boutons de partage sont bien présents, avec le nombre correspondant.

Toutefois, pour afficher le nombre de partages, pour chaque bouton, une requête est effectuée entre votre site et le réseau social. Cette requête n’impacte plus votre visiteur mais ralentit quand même l’affichage de la page.
Un autre inconvénient : si vous utilisez une extension qui met vos pages en cache, le nombre de partages ne sera mis à jour qu’au moment du rechargement du cache. Oui, sur ce blog ce n’est pas très impactant, mais quand même…

Voyons comment résoudre ce problème, en affichant les nombres de partage une fois que la page est chargée.

Affichage asynchrone du nombre de partages

Le fonctionnement est simple : au lieu d’intégrer le nombre de partages pendant la génération de la page par WordPress, on leur attribue un espace près du bouton, et la page, une fois chargée, s’occupe de les récupérer pour les afficher.

Et pour faire cela, nous pouvons utiliser les fonctions offertes par WordPress pour les requêtes AJAX.

Le PHP

Commençons par la partie qui fournit les liens et les nombres de partages, à ajouter dans le fichier function.php de votre thème enfant :

// Namespace et inclusion de PHP SocialShare
use Doctrine\Common\Cache\PhpFileCache;
use SocialShare\SocialShare;
use SocialShare\Provider\Facebook;
use SocialShare\Provider\Twitter;
use SocialShare\Provider\Google;
use SocialShare\Provider\LinkedIn;
use SocialShare\Provider\ScoopIt;
 
require 'vendor/autoload.php';
 
// Initialisation
$cache = new PhpFileCache(sys_get_temp_dir());
$socialShare = new SocialShare($cache);
 
// Déclaration des réseaux sociaux à utiliser
$socialShare->registerProvider(new Facebook());
$socialShare->registerProvider(new Twitter());
$socialShare->registerProvider(new Google());
$socialShare->registerProvider(new LinkedIn());
$socialShare->registerProvider(new ScoopIt());
 
// Raccourci pour accéder aux liens de partage
function social_share_link($providerName, $url, $options = array()) {
  global $socialShare;
  return $socialShare->getLink($providerName, $url, $options);
}
 
// Raccourci pour récupérer le nombre de partages par réseau
function social_share_shares($providerName, $url) {
  global $socialShare;
  return $socialShare->getShares($providerName, $url);
}
 
// Service AJAX pour récupérer le nombre de partages
add_action("wp_ajax_nopriv_getSharesCount", "getSharesCount");
function getSharesCount() {
  ini_set("error_reporting", E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED & ~E_WARNING);
  echo social_share_shares($_POST["provider"], $_POST["url"]);
  die();
}

La seule nouveauté par rapport au code de Kévin Dunglas est le service AJAX : il utilise les deux paramètres provider et url pour utiliser le raccourci social_share_shares qui renvoie le nombre de partages, et le retourne à son tour.

Ici, seuls les boutons pour Facebook, Twitter, Google+, LinkedIn et Scoop.it! sont activés. Comme vous le voyez, vous pouvez en ajouter facilement.

L’HTML

Une fois le service AJAX implémenté, il ne reste plus qu’à écrire l’interface.

Le plus souvent, tout se passe en dessous de l’affichage de l’article, dans content.php :

<h2>Partagez cet article !</h2>
<ul class=social-shares">
  <li>
    <a target="_blank" href="<?php echo social_share_link('facebook', get_permalink()) ?>" rel="nofollow">
      Facebook
      <span data-provider="facebook" class="shares-count">-</span>
    </a>
  </li>
  <li>
    <a target="_blank" href="<?php echo social_share_link('twitter', get_permalink(), array('text' => html_entity_decode(get_the_title()), 'via' => 'partageit')) ?>" rel="nofollow">
      Twitter
      <span data-provider="twitter" class="shares-count">-</span>
    </a>
  </li>
  <li>
    <a target="_blank" href="<?php echo social_share_link('google', get_permalink()) ?>" rel="nofollow">
      Google+
      <span data-provider="google" class="shares-count">-</span>
    </a>
  </li>
  <li>
    <a target="_blank" href="<?php echo social_share_link('linkedin', get_permalink()) ?>" rel="nofollow">
      LinkedIn
      <span data-provider="linkedin" class="shares-count">-</span>
    </a>
  </li>
  <li>
    <a target="_blank" href="<?php echo social_share_link('scoopit', get_permalink()) ?>"  rel="nofollow" data-size="height=600,width=550">
      Scoop.it!
      <span data-provider="scoopit" class="shares-count">-</span>
    </a>
  </li>
</ul>

Ce code HTML permet d’afficher les liens et les nombres de partages.

L’URL du lien est générée grâce à la fonction social_share_link définie dans la partie PHP.

Les boutons sont inclus dans une balise, ici <ul>, avec la classe social-shares.

Le span qui contiendra le nombres de partages :

  • contient le texte ‘-‘ par défaut, le temps de récupérer le nombre depuis AJAX
  • a pour classe shares-count, qui va permettre de reconnaître les champs à mettre à jour dans la partie en JavaScript
  • a un attribut data-provider, qui indique de quel réseau social il s’agit.

Notez que les attributs data-* sont bien pratiques pour ce genre d’utilisation.

Le JavaScript

Voyons maintenant la partie JavaScript, qui va faire le lien entre la présentation en HTML et les données récupérées par AJAX.

Ce code peut être inséré juste après le code HTML précédent dans content.php :

<script type="text/javascript" >
jQuery(document).ready(function($) {
  // La fonction AJAX qui se connecte au service
  function getSharesCount(el) {
    var data = {
      action: "getSharesCount",
      provider: $(el).data("provider"),
      url: '<?php echo get_permalink(); ?>'
    };
    var ajaxurl = '<?php echo admin_url("admin-ajax.php"); ?>';
    $.post(ajaxurl, data, function(response) {
      $(el).text(response);
    });
  }
 
  // Appelle la fonction AJAX pour tous les spans qui doivent contenir le nombre de partages
  $(".social-shares .shares-count").each(function(i, el) { getSharesCount(el); });
 
  // Ouvre le lien de partage dans une popup plutôt qu'une nouvelle fenêtre (ou un nouvel onglet)
  $(".social-shares a").each(function(i, el) {
    el.onclick = function() {
      var shareWindowSize = "height=300,width=550";
      if ($(el).data("size")) shareWindowSize = $(el).data("size");
      window.open(el.href, "share", shareWindowSize + ",resizable=1");
      return false;
    };
  });
});
</script>

La fonction getSharesCount est appliquée à tous les éléments HTML qui doivent contenir le nombre de partages. Elle contacte le service AJAX implémenté plus haut, en lui indiquant quel réseau interroger pour quelle page.

La dernière partie permet d’ouvrir la fenêtre de partage dans une popup plutôt qu’une nouvelle fenêtre. Et, toujours avec le principe des attributs data-*, il est possible de passer en paramètres la taille de cette popup directement dans la balise <a> avec l’attribut data-size, comme c’est le cas pour le lien vers Scoop.it!.

Un peu de décoration

Un autre avantage de cette solution est la possibilité de personnaliser les boutons de partage.
Alors oui, ok, vous allez me dire que c’est normal puisqu’il faut tout faire. Soit. Mais au moins vos boutons seront uniques.

Pour personnaliser les miens, j’ai utilisé trois concepts que j’avais déjà évoqués sur ce blog :

  • Twitter Bootstrap pour gérer les colonnes dont la taille s’adapte automatiquement selon la taille de l’écran, pratique pour avoir un affichage personnalisé sur les tablettes et les smartphones
  • Bootstrap Awesome pour ses jolies icônes. Fonctionne aussi avec Genericons, ou les icônes fournies avec Twitter Bootstrap
  • Les transitions CSS pour avoir un joli effet au passage de la souris

Le résultat :

Optimiser les performances de WordPress avec de nouveaux boutons de partage : les nouveaux boutons
Les nouveaux boutons
Et en responsive sur tablette et smartphone :

Optimiser les performances de WordPress avec de nouveaux boutons de partage : les nouveaux boutons sur smartphones et tablettes
Pareil, sur smartphones et tablettes
Enfin, comme il n’existe pas d’icône pour Scoop.it!, j’ai utilisé une astuce : afficher le mot ‘it!’, avec le vert de Scoop.it!, en Helvetica et en réduisant l’espace entre les lettres.

Le résultat en terme de performance

Pour terminer, voyons le gain en performances, avec Dareboost :

Avant, avec les boutons de partages de Jetpack :

Optimiser les performances de WordPress avec de nouveaux boutons de partage : résultat avec Dareboost, avant
Avant…
Après, en utilisant la librairie PHP SocialShare :

Optimiser les performances de WordPress avec de nouveaux boutons de partage : résultat avec Dareboost, après
… après
Le score a bien augmenté, mais surtout le nombre de requêtes est passé de 50 à 34.

Le temps de chargement a l’air plus long, mais le temps supplémentaire se produit une fois que la page est complétement affichée. Le visiteur peut déjà utiliser la page avant même que les compteurs de partages ne soient à jour.

Et les problèmes de délai de cache et de compression concernant les scripts externes des boutons n’ont plus lieu d’être.

Le mot de la fin

La librairie PHP SocialShare est vraiment simple à utiliser, et avec un peu de connaissances en WordPress, PHP, HTML et CSS, les possibilités sont nombreuses.

Elle permet non seulement de lier la performance et la fonctionnalité, mais permet également d’avoir des boutons de partage vraiment personnalisés.

En tout cas, n’hésitez pas à essayer les boutons ci-dessous pour voir ce que ça donne !

Cet article vous a été utile ? Partage it !

26 réflexions au sujet de « Gagnez en performances avec de nouveaux boutons de partage pour WordPress »

  1. Pfff, ça fait longtemps que j’ai viré les boutons de partage avec javascript externe. C’est juste lourdingue pour le site. Tutu intéressant mais un peu trop long à mettre en place pour moi. Je me contenterai de gros boutons basiques à cliquer.

  2. Bonjour,

    ben moi ça m’intéresse ce système : le système e partage est central pour moi et est un retour direct de l’intérêt du billet.. ça fait toujours plaisir de voir ces chiffres grimper 🙂

    Je bookmarke cette page et dès que j’ai un peu de temps je regarde son implantation dans le détail.

    Grand merci de d’avoir mis ce système en lumière !

      1. Je suis toujours en pleine réflexion. Ma grande interrogation est sur le bouton facebook, le comportement ne semble pas identique au bouton officiel où l’on peut aimer sans partager. Avec ce nouveau procédé, il faut partager à tout prix.. j’ai peur que ce soit moins immédiat.

        Sinon, tes chiffres semblent toujours à 0 (ou tout au moins symbolisé par le « -« ). Ton script marche bien ?

        1. Bonjour Arnaud,
          Pour le like sans partage de Facebook, je n’y avais pas pensé. Le partage seul me convient bien, mais je comprends bien que ce comportement puisse être gênant.

          Pour les compteurs qui restent à ‘-‘, c’est un problème d’HTTPS et de certificat…
          Mon interface d’administration est en HTTPS non certifiée, et faire une requête AJAX depuis HTTP vers un HTTPS non certifié (ou pas encore accepté) pose problème aux navigateurs récents (tant mieux).
          Et bien sûr, j’avais testé sur des navigateurs où je m’étais déjà connecté au moins une fois à l’interface d’administration, et donc où le certificat était accepté.
          Merci de m’avoir prévenu, je corrige rapidement et je modifie l’article dans la foulée.

          David

  3. Salut David,

    Je viens de publier une nouvelle version de la bibliothèque PHP SocialShare. Cette version permet de retarder l’execution des requêtes HTTP vers les réseaux sociaux après l’envoi du code HTML de la page WordPress vers la navigateur du client (et même après que la connection entre le serveur et le client ai été coupée dans si PHP FPM est utilisé).
    Ainsi, même lorsque la cache doit être effacée et les nouveaux nombres de partages rapatriés, le temps de chargement des pages n’est plus affecté.

    J’ai mis à jour mon tutoriel WordPress afin d’expliquer comment tirer parti de cette nouvelle fonctionnalité : http://dunglas.fr/2014/01/using-socialshare-with-wordpress-to-create-custom-social-networks-buttons/

    1. J’oubliais : cette technique permet d’éviter les requêtes AJAX et donc de diminuer (de beaucoup sur les pages de listes par exemple) le nombre de requêtes HTTP émises entre le serveur WordPress et le client.

    2. Bonjour Kévin,
      Excellent 🙂 Je vais essayer la nouvelle version.
      En fait j’étais passé par AJAX d’abord pour résoudre le problème des pages du site mises en cache et qui intègrent un nombre de partage au moment où la page a été créée.
      La nouvelle fonctionnalité que tu as implémentée peut quand même me permettre de réduire le nombre de requêtes, en ne faisant qu’une requête AJAX (au lieu de cinq), beaucoup plus courte, récupérant le nombre de partages de tous les réseaux sociaux, en une fois.
      David

  4. Je profite de cet échange pour savoir, Kévin, si l’on peut retrouver la fonction du bouton « aimer » classique de Facebook où le partage est optionnel , en complément du like ?

    suis toujours en plein doute vis à vis de cette fonction.

    1. Tu fais bien d’en parler, j’avais aussi demandé confirmation à Kévin : a priori, il n’est pas possible de liker hors du script fourni par Facebook, qui ne fournit aucun moyen d’accéder à ce service par librairie tierce…
      Sinon, les compteurs sont bien mis à jour, j’ai corrigé hier, je modifierai bientôt l’article. Encore merci de m’avoir prévenu.
      David

  5. Bonjour David,

    peux tu expliquer l’installation des fichiers.. je n’arrive pas à installer Composer. pas moyen de simplement prendre des fichiers et les mettre dans le thème ?

    1. Bonjour Arnaud,
      Composer est excellent, mais c’est vrai qu’il est déroutant au début.
      Je ferais peut-être un article sur son utilisation de base, en attendant je t’envoies les fichiers par mail.
      David

  6. Recul après un bon mois :

    ça marche nickel et ma foi ça ne diminue pas trop l’envie de partager tant c’est bien utiliser par mon lectorat.

    Niveau performance et surtout intégration aux oignons, c’est hyper génial !!

    Par contre, petit soucis sur google plus qui refuse de partager sans que je comprenne pourquoi : la fenête s’ouvre, tout se remplit bien mais erreur au moment de valider.. bizarre.

    1. En effet, c’est bizarre…
      J’ai vu que tu rencontrais le problème depuis peu seulement, c’est peut-être dû à un changement chez Google+… En plus, la présentation des posts sur une URL a changé.
      Aussi, j’ai essayer de poster un lien de ton site directement chez Google+ et le problème est identique.
      David

      1. c’est assez incompréhensible. sur une sous partie « blog » du site ça marche. Sur une page statique ça marche mais sur mes billets principaux ça ne marche plus d’un coup alors que je n’ai plus taper sur les sources depuis. Je creuse.. je vais faire des essais et essayer de voir le soucis.

        1. Je suis d’accord : c’est incompréhensible…
          Le partage part bien, mais reçoit une réponse avec un statut Bad Request, avec un contenu en JSON bizarre mais qui semble cohérent…
          Je pense de plus en plus que c’est dû au nouveau partage d’articles de blog de Google+.
          Tiens-moi au courant si tu veux bien 🙂
          David

  7. Comment as tu eu ces renseignements et le JSON en particulier ? j’ai beau chercher, je ne comprends pas pourquoi uniquement ma partie billet ne passe pas.
    Je passe parfaitement le test des rich snippet où tout est bien détaillé sans erreur.

    J’ai questionné ici et là, on verra si j’ai des pistes et des réponses.
    Ce n’est pas fondamental mais c’est intellectuellement ennuyeux.

    1. Bonjour Arnaud,
      Comme le problème se produit aussi sur l’interface de Google+, je me suis permis de leur signaler.
      Je vais regarder aussi ce qui est susceptible de bloquer le partage sur tes pages articles.
      David

    2. J’ai pu jeter un oeil au code de quelques uns des articles qui ne peuvent pas être partagés.
      Ils sont truffés de traits d’union conditionnels (http://fr.wikipedia.org/wiki/Trait_d%27union_conditionnel), invisibles sur nos navigateurs, mais bien présents dans le code.

      Par exemple, sur l’article sur le concert de Shaka Ponk :
      ‘C’est tel-le-ment la patau-geoire sur scène qu’un mec vient même épon-ger le sol !’

      Je ne sais pas si c’est la cause, mais je pense que ça vaut le coût d’essayer de les retirer sur un article pour être fixé.
      David

  8. David,
    j’utilise un plugin de typographie. je l’ai enlevé, il ne me servait quasi plus (mais était là depuis quasi l’origine du site).
    Bien entendu, le problème reste entier car après essai ce n’est pas ça !

    j’ai essayé un billet sans la partie social (billet en cours de rédaction mais en ligne sur une partie peu visible du site) et bien ça ne passe pas mieux.

    Je pense faire d’ici quelques jours une grande vague d’essai en supprimant des parties du squelette des billets et voir les conséquences.

    1. Bonjour Arnaud,
      Pour l’instant je n’ai rien vu d’autre qui pourrait poser problème à Google+.
      Si tu veux, tu peux m’envoyer l’adresse de ta page de test par mail.
      David

  9. Salut David,

    Ton tutoriel semble intéressant, tout du moins le gain de performances qu’il permet de réaliser, cependant le simple fait de savoir que les boutons peuvent ne plus fonctionner du jour au lendemain, pour moi c’est rédhibitoire, alors je préfère conserver mes mauvaises performances.
    Sinon, penses-tu que ton ami Arnaud serait ouvert à un partenariat avec mon site d’annonces de concerts et festivals?
    Je te remercie d’avance de bien vouloir lui en toucher deux mots.

    Amicalement,

    Bruno

    1. Bonjour Bruno,
      En effet, c’est un choix à faire.
      Je laisse Arnaud répondre, ou encore mieux : tu pourrais le contacter directement sur son blog, que je te conseille d’ailleurs.
      En même temps, vue ta requête, j’imagine que tu l’as déjà visité 🙂
      David

  10. Bonjour,
    merci pour ce tuto.

    j’ai installé les boutons en dur depuis de mois mais je cherchais comment afficher le nombre de partage par réseaux sociaux.

    J’ai un petit soucis pour li’nstalltion sur mon theme, j’ai un erreur à cause de « require ‘vendor/autoload.php’; »

    Ce fichier n’est pas dans la source Github.

    Merci d’avance pour ton aide

    1. Bonjour Djib’s,
      Je suis de retour de vacances, et depuis tu as peut-être trouvé la solution.
      N’hésite pas si ce n’est pas le cas.
      David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.