Vos boutons Facebook, Twitter et Google +1 en asynchrone

Vos boutons Facebook, Twitter et Google +1 en asynchrone

Publié le par dans Développement, Javascript et jQuery | 8 commentaires »

Depuis quelques mois, les webmasters ont découvert que l'utilisation des boutons de partage social pouvait s'avérer bien plus intéressante qu'ils le pensaient. Non contents de permettre une diffusion rapide (de type virale) des contenus jugés intéressants ou pertinents, ces derniers constituent un signal d'appel pour les moteurs de recherche (Google pour le moment) qui utilisent les "votes" dans leur algorithme de classement. L'utilisation de ces gadgets ou widgets est ainsi devenue incontournable si on veut bien faire les choses.

Seulement avec la multiplication des services, c'est autant de scripts javascript qui viennent alourdir vos pages. J'ai donc cherché à réduire l'impact de l'utilisation des boutons de partage sur le temps de chargement des pages de Scooter System. Je me suis intéressé aux boutons Facebook J'aime, Tweeter et Google +1, les seuls qui soient vraiment pertinents pour un site 100% francophone. J'aurais pu intégrer également les boutons Wikio ou d'autres plus exotiques comme LinkedIn ou Viadeo, mais leur impact reste très limité...

Les différents services ont mis en ligne des générateurs de boutons permettant de personnaliser l'apparence, la langue ou le type d'appel du bouton. Javascript ou iframe, en synchrone ou asynchrone... Malheureusement , il n'existe aucune cohérence entre ces derniers, si bien qu'on finit par avoir un code lourd et indigeste. J'ai donc cherché à uniformiser le fonctionnement des services Facebook, Twitter et Google en appelant les javascript de façon asynchrone grâce à l'excellent Head.js, que je vous présentais il y a quelques mois.

L'intégration n'a pas été évidente mais j'ai réussi à faire fonctionner le tout comme il faut, sans qu'aucun bug ne soit à signaler, y compris sous les navigateurs les plus anciens. Tous les boutons sont configurés en français. Je vous livre ci-dessous les résultats de mes recherches, à adapter à votre site mais fonctionnel.

À insérer dans le header :

<script src="/path/to/head.js"></script>
<script>
window.___gcfg={lang:'fr'};
</script>
<script>
head.js("http://platform.twitter.com/widgets.js");
head.js("https://apis.google.com/js/plusone.js");
head.js("http://connect.facebook.net/fr_FR/all.js",function(){FB.init({appId:'APP_ID',status:false,cookie:true,xfbml:true});});
</script>

Ce code charge les 3 fichiers javascript en asynchrone, puis invite l'api Facebook à s'initialiser une fois le chargement effectué. Si vous utilisez Jquery ou Google Analytics, vous pouvez les chaîner dans la liste afin qu'ils soient eux aussi chargés en parallèle de la page (regardez le code source de Scooter System ou de la page sur laquelle vous vous trouvez pour plus de détails).

À insérer dans le corps à l'endroit des boutons :

<fb:like href="[votre_url]" send="false" layout="box_count" show_faces="false"></fb:like>
<a href="http://twitter.com/share" data-count="vertical" data-via="[votre_compte]" data-lang="fr">Tweeter</a>
<div class="g-plusone" data-size="tall" data-count="true" data-lang="fr" data-href="[votre_url]"></div>

Nous générons ici le code html qui sera utilisé par les 3 api pour afficher les boutons de partage. Les paramètres sont personnalisables facilement en consultant les aides fournies par Facebook, Twitter et Google. Les seules limites que j'ai rencontrées sont la non prise en charge du balisage de Facebook par html5 (code non valide W3C) et l'impossibilité de sélectionner la langue française pour le bouton Google +1 (solution trouvée et intégrée).

Voilà donc pour la petite astuce javascript du moment. Le tout permet un gain significatif en termes de temps de chargement des pages, et donc en confort de navigation. Vous n'aurez plus à choisir entre outils sociaux et confort pour vos visiteurs ;)



8 commentaires sur “Vos boutons Facebook, Twitter et Google +1 en asynchrone”

  1. 1

    Petite mise à jour du code pour que le bouton +1 prenne en charge la langue française. Il suffit de rajouter la ligne de javascript suivante :

    window.___gcfg={lang:’fr’};

    Le tout était de le savoir ;)

  2. 2

    Merci à toi pour cette solution bien utile ! Je l’ai utilisée sur mon site.
    Par contre, tu dis : « sans qu’aucun bug ne soit à signaler, y compris sous les navigateurs les plus anciens »
    J’ai testé sous Firefox 3.6 et 5 : tout est OK.
    J’ai testé sous IE8 : le bouton facebook ne fonctionne pas.
    J’ai testé sous IE7 : les boutons facebook et google sont absents ! De plus, ma page ne se charge pas certaines fois, cela à l’air assez aléatoire, IE7 m’indique « Internet Explorer ne peut pas ouvrir le site http://www.blablabla.htm. Opération abandonnée
    Pour google sous IE7 je savais mais pour facebook et cette erreur ?
    Y a-t-il des solutions ?

  3. 3

    Les mauvais élèves posent toujours problème. Avec IE il y a en effet certains boutons qui ne se chargent pas sous les anciennes versions, mais je n’ai pas noté de plantage.

    Pour le bouton Facebook c’est le plus capricieux… je testerai pour voir s’il existe une solution alternative mais ce n’est pas garanti :/

  4. 4

    Mon plantage vient bien de l’intégration de ces boutons car seules mes 3 pages (sur 9) où je les ais intégrées plantent sous ie7 une fois sur 2.
    Tu peux essayer ici :
    http://www.chambreshotesjolivet.fr/LesEnvirons.htm
    Je crois que je vais repasser à une version standard et ne conserver que les 2 widgets les plus importants ! Tiens moi au courant quand même.

  5. 5

    Ok pas de souci, à toi de voir. Sache qu’il est possible d’implémenter ces boutons de façon asynchrone, mais avec des scripts différents à chaque fois. Ce sera toujours mieux que via un simple appel ou une iframe.

    Bonne continuation !

  6. 6

    Finalement, le fait que ce code ne fonctionne pas sous ie7 et ie8 m’a fait perdre pas mal de votes, j’ai donc opté pour les solutions de boutons proposées par chaque réseau social.
    Si vous voulez voir le résultat et le temps de chargement :
    http://www.chambreshotesjolivet.fr

    Merci à toi Eroan de nous avoir fait partagé cette astuce, elle sera probablement améliorée puisque tout le monde est en train d’installer un tas de boutons sur toute ses pages alors, il va bien falloir finir par trouver une solution…

    Bonne continuation à toi !

  7. 7

    Pas de souci.

    Le fonctionnement sera certainement amélioré avec la version stable de head.js, car nous en sommes actuellement à la 0.96.

    Je mettrai alors à jour l’article ;)

  8. 8

    Notez que l’exercice est également possible avec jsl.load (je viens de le tester sur ce blog) : http://www.andresvidal.com/jsl

Publiez un commentaire