share-button.jpg

Vous utilisez les boutons de partage Facebook, Twitter et Google+ sur votre site Internet ?

Vous trouvez que ces boutons sont trop gourmands en ressources et qu'ils alourdissent votre site Internet malgré les chargements "asynchrones" des fichiers Javascript ?
Cet article présente une solution pour charger les scripts des boutons de partage sociaux seulement lorsque cela est nécessaire.

Après une petite analyse sur ce blog, le chargement des 3 boutons de partage Facebook, Twitter et Google+ requièrent 33 requêtes et 1.50s de temps de traitement par le navigateur.

network-stats.jpg

Voici une solution faite maison et basée sur un "popover" du framework Twitter Bootstrap pour charger les scripts seulement lorsque l'utilisateur souhaite partager le contenu.

popover-share-button-bootstrap.jpg

Le code HTML du lien permettant de déclencher le popover Twitter Bootstrap est très simple à mettre en place, il faut juste faire attention aux attributs data-url et data-text , ce sont des données importantes qui seront ensuite fournies aux boutons de partage sur les réseaux sociaux.

<button class="btn share-button" data-url="http://www.monarticle.com" data-text="Le titre de mon article">
          Partager cet article
</button>


Enfin, voici la fonction Javascript permettant d'initialiser les boutons de partage et l'intercepteur JQuery permettant de détecter le clic sur le bouton déclaré précédemment.
Au premier clic sur le bouton, une popover s'affiche avec les différents boutons. Les librairies Javascript externes sont alors chargées, elles sont ensuite réutilisées à chaque nouvelle demande de partage sur la même page.

// On document ready ...
$( document ).ready( function() {

function initShareButton(){
        //Chargement de Twitter
        if (typeof (twttr) != 'undefined') {
                twttr.widgets.load();
        } else {
                Modernizr.load('//platform.twitter.com/widgets.js');
        }

        //Chargement de Google+
        if (typeof (gapi) != 'undefined') {
                $(".g-plusone").each(function () {
                        gapi.plusone.render($(this).get(0));
                });
        } else {
                 Modernizr.load('//apis.google.com/js/plusone.js');
        }
        //Chargement de Facebook
        if (typeof (FB) != 'undefined') {
                FB.init({ status: true, cookie: true, xfbml: true });
        } else {
                Modernizr.load({
                load:'http://connect.facebook.net/en_US/all.js#xfbml=1',
                complete: function(){
                        FB.init({ status: true, cookie: true, xfbml: true });
                }});
        }
}

$(".share-button").popover({
        html:true,
        placement:"bottom",
        title:"Partagez cet article",
        trigger:"click",
        content:    function(){
        var url = $(this).attr("data-url");
        var text = $(this).attr("data-text");
        return 'Sur Twitter : <a href="https://twitter.com/share" class="twitter-share-button" data-url="'+url+'" data-text="'+text+'" data-via="ltoinel" data-lang="fr" data-dnt="true">Tweeter</a><br/>Sur Google+ : <div class="g-plusone" data-size="medium" data-href="'+url+'"></div><br/>Sur Facebook : <div class="fb-like" data-href="'+url+'" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>';
    }
});

$(".share-button").click(function(){
        initShareButton();
});
}

L'énorme avantage de ce hack est que vos pages sont beaucoup plus légères à charger. Vous faites économiser aux navigateurs de vos visiteurs de nombreuses requêtes HTTP qui ne sont pas forcement utiles. Enfin, le design de votre site n'est pas pollué par les boutons de partage multicolores

L'inconvénient majeur de la solution est que le visuel du bouton de partage est différent du visuel habituel connu par vos visiteurs et qu'il est nécessaire de réaliser un clic supplémentaire pour permettre à vos visiteurs de partager du contenu ... On ne peut pas tout avoir ;-)

1. Le dimanche 3 février 2013, 11:59 par aalex57
6154e2d6089d209b7b312d09713d22de

Merci beaucoup pour ton astuce !

C'est clair que ça alourdi fort une page les boutons de partage :/

2. Le lundi 4 février 2013, 10:54 par kaloskagatos
ab52b8ea0f2632e8bc8aeca1ec19f3ef

Par contre pour info le popup n'apparaît pas si on a l'extension Adblock Plus activé (je suis sous Chrome)...

3. Le mardi 5 février 2013, 10:16 par PH
3673345d98b61aeb4dc656cba148eaf1

Sympa l'astuce ! C'est vrai que les boutons sociaux mettent souvent du temps à se charger. Par contre si tu fais un call que sur un événement tu ne pourra pas afficher les info comme le nombre de tweet, like, etc. sans trigger.

4. Le mardi 5 février 2013, 23:18 par Ludovic
9ab09dd3e305f924f8930e20e1a35843

@aalex57 : Oui ;-(

@kaloskagatos : C'est étrange, je viens de tester avec Adblock Plus et je ne constate pas le problème. Peux-tu m'indiquer si tu vois une erreur dans la console d'erreur ? Outils -> Outils de développement -> console

@PH: Oui, c'est un autre inconvénient ...

5. Le samedi 9 février 2013, 11:12 par Atlasseo
f9a977aa283954fc51157c2fcafa33d3

Merci pour l'astuce. ;-)

6. Le mercredi 27 février 2013, 11:41 par kaloskagatos
ab52b8ea0f2632e8bc8aeca1ec19f3ef

Ha bein maintenant ça fonctionne !

7. Le mercredi 9 avril 2014, 16:51 par Leonidas
c4ef72138d17fa63bc358657a3ec40af

Bonjour,

merci pour cet article. Comment connaitre le temps de chargement de mon site web?
J'ai entendu dire qu'au delà d'un délais de 5 secondes cela pouvait jouer négativement sur le référencement??

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.