L'objet Javascript gPlusoneHandler (Google Plusone Handler) permet de charger dynamiquement, et ceci de manière asynchrone, le script plusone.js de Google afin d'améliorer les performances au chargement des pages Web.
Il permet aussi de bénéficier des widgets bouton +1 tout en restant conforme aux standards définis par le W3C, et ceci, quelque soit le DOCTYPE utilisé.
Et bien entendu, la compatibilité avec les versions les plus récentes des navigateurs (Internet Explorer, Firefox, Opera, Safari, Chrome) est assurée.
Téléchargement
Fichier [ gPlusoneHandler.js ] créé le 05 juillet 2011.
Insertion du code Javascript
Afin de profiter de l'objet Javascript gPlusoneHandler, vous devez placer la ligne suivante dans votre document HTML.
<script type="text/javascript" src="gplusonehandler.js"></script>
Si vous aviez déjà placé la balise script faisant appel au script plusone.js de Google, il vous faudra bien-entendu la remplacer par la ligne ci-dessus.
Que le script plusone.js de Google soit chargé immédiatement ou bien après le chargement de la page Web, la balise script peut être placée n'importe où dans le document HTML, que ce soit dans la section head ou bien dans la section body.
Remarque :
Si vous placez votre code javascript personnel dans un seul et même fichier afin de reduire le nombre de requêtes, sachez qu'il vous est possible d'ajouter le code javascript de l'objet gPlusoneHandler dans votre fichier sans aucun risque de conflit.
Présentation des méthodes
L'objet Javascript gPlusoneHandler dispose de deux méthodes.
gPlusoneHandler.init(now,lng,elt,obj)
La méthode init() permet d'ajouter la balise script faisant appel au script plusone.js de Google (en incluant l'information concernant la langue) dans l'arbre DOM.
Ainsi, avec le code Javascript suivant :
gPlusoneHandler.init();
Nous obtenons dans la section head (après chargement) du document HTML :
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang:"fr",parsetags:"explicit"}
</script>
Ce qui provoque le chargement du script plusone.js de Google.
Une fois ce dernier en mémoire, nous pouvons profiter de l'API Javascript du bouton +1.
Paramètres
-
now (false par défaut)
Permet de choisir le moment où la balise script faisant appel au script plusone.js de Google doit être ajoutée.
Si ce paramètre vaut false, l'ajout de la balise script s'effectuera après le chargement de la page Web. Dans la cas contraire, si ce paramètre vaut true, l'ajout de la balise script s'effectuera immédiatement.
Dans les deux cas, le chargement s'effectue de manière asynchrone afin d'améliorer les performances globales au démarrage.
-
lng ("fr" par défaut)
Cette valeur doit correspondre à l'une des langues acceptées pour le bouton +1.
-
elt et obj
La présence de ces paramètres permet la génération d'un widget de bouton +1 une fois le script plusone.js de Google en mémoire.
elt correspond à la valeur de l'attribut id de l'élement HTML déstiné à reçevoir le widget.
obj contient les paires valeur/clé définies dans la section des Paramètres de la balise +1.
Si vous utilisez les paramètres elt et obj, la présence des paramètres now et lng devient obligatoire.
gPlusoneHandler.render(elt,obj)
Affiche un widget de bouton +1.
Les paramètres ont la même signification que ceux de la méthode init().
Cette méthode appelle tout simplement la méthode de l'API Javascript de Google :
gapi.plusone.render(elt,obj);
Si vous désirez que le script plusone.js de Google soit chargé immédiatement ET afficher un widget bouton +1, prenez soin de placer l'appel à la méthode render() après l'élement HTML déstiné à reçevoir le widget.
Exemples d'utilisation
Deux exemples ci-dessous afin de vous familiariser avec l'objet Javascript gPlusoneHandler.
Widget bouton +1 ajouté une fois le document chargé
Bouton de taille standard avec compteur.
gPlusoneHandler.init(
false,
'fr',
'plusone_btn1',
{ size:'standard',
count:'true',
href:'http://www.example.com/'
}
);
Widget bouton +1 ajouté sur demande
Bouton de taille standard sans compteur.
<span onclick="gPlusoneHandler.render('plusone_btn2',{count:'false',href:'http://www.example.com/'});">
Cliquez pour afficher le bouton +1
</span>