Le bouton Google +1 s'affiche partout sur le web depuis quelques semaines. En plus de permettre la diffusion du contenu d'un site au même titre que les boutons de Twitter ou Facebook, le gadget de Google fait miroiter un meilleur positionnement dans le classement des recherches pour les pages largement "+1".

googleplus1.jpg

Le code standard fourni par Google sur cette page pour intégrer ce bouton à nos pages est court et fonctionnel, mais il est possible de l'optimiser, d'une part pour ne pas pénaliser le temps de chargement du site, et d'autre part pour garder la validation W3C.

Chargement asynchrone du script

Le chargement asynchrone est très à la mode ces derniers temps, comme le montre la multiplication des outils comme Require.js, ou encore l'évolution du code de GoogleAnalytics en décembre dernier.%% Alors pour avoir la classe et optimiser la vitesse d'affichage du site, il est préférable d'utiliser le code suivant plutôt que celui de base fourni par Google :

<script type="text/javascript">
    (function() {
        var gp = document.createElement('script');
        gp.type = 'text/javascript';
        gp.async = true;
        gp.src = 'https://apis.google.com/js/plusone.js';
        gp.textContent = "{lang: 'fr'}";
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gp, s);
    })();
</script>

Vous pouvez adapter le lang: 'fr' à la langue de votre site.

Validation W3C (XTHML 1.0 Strict)

On peut rendre l'ajout du bouton valide avec le code suivant, pour l'affichage HTML du bouton :

<div class="g-plusone" id="gplusone"></div>

Et pour le paramétrage :

<script type="text/javascript">
var gplusone = document.getElementById("gplusone");
gplusone.setAttribute("data-size", "standard");
gplusone.setAttribute("data-count", "false");
gplusone.setAttribute("data-href", "{{tpl:EntryURL}}");
</script>

Pensez à remplacer tpl:EntryURL par l'adresse de votre page !

Source : http://desgeeksetdeslettres.com/

Commentaires

1. Le 12 février 2012, 18:11 par Alexandre REIVAX

remplacer div par buttom, sinon ça ne passe pas w3c en XHTML 1.0 Strict :
<button class="g-plusone" id="gplusone"></button>
Merci pour l'astuce qui fonctionne bien après ma modif.
Je cherche la même chose pour facebook !