Introduction
Un précédent article paru en juin 2011 présente l’implémentation classique du bouton +1 de Google avec l’objectif de respecter les normes et standards du consortium W3C grâce à l’affichage explicite : Implémentation du nouveau bouton +1 de Google et les normes W3C.
Dans l’article de Juin 2011, l’implémentation est classique, l’appel du
script plusone.js
est codé en dur :
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang:'fr', parsetags:'explicit'}
</script>
À présent cet article se focalise sur l’incorporation du script plusone.js
du bouton Google +1 en mode asynchrone avec la méthode javascript createElement
et l’industrialisation de l’affichage explicite des boutons Google +1 après le
chargement d’une page grâce à une fonction générique.
Incorporation en asynchrone du script plusone.js avec la méthode Javascript createElement
L’appel du script plusone.js
en asynchrone avec la méthode Javascript
createElement
est possible mais des adaptations sont nécessaires. Les
adaptations consistent à vérifier si la méthode Javascript canHaveChildren
est
disponible dans le navigateur client pour ajouter le code Javascript de
l’affichage explicite du bouton +1 {lang:'fr', parsetags:'explicit'}
, en effet
cette méthode n’est pas disponible avec Internet Explorer et l’attribut text
de
l’objet script
doit être utilisé pour ce navigateur.
Voici un exemple d’appel du script plusone.js
en asynchrone avec la méthode
Javascript createElement
et compatible pour les navigateurs Firefox, Internet
Explorer 8 et Chrome.
<script type="text/javascript"
src="/fwork/v3.1.5/js/afwk_googletools.js"></script>
afwk_googletools.js
// Appel du script plusone.js en asynchrone
v_head = document.getElementsByTagName("head")[0];
v_script_plusone = document.createElement ("script");
v_script_plusone.setAttribute("type","text/javascript");
v_script_plusone.setAttribute("async","true");
v_script_plusone.setAttribute("src","https://apis.google.com/js/plusone.js");
v_head.appendChild(v_script_plusone);
v_parms = '{lang:"fr", parsetags:"explicit"}';
if (v_script_plusone.canHaveChildren == null
|| v_script_plusone.canHaveChildren)
{
/* Firefox, Chrome */
v_script_plusone.appendChild(document.createTextNode(v_parms));
}
else {
/* Internet Explorer */
v_script_plusone.text = v_parms;
}
Construction automatique des boutons Google +1 en asynchrone
Préparation d’un objet _obj_plusone
Un objet Javascript _obj_plusone
est ensuite préparé après l’appel du script
plusone.js
. Cet objet contiendra tous les paramètres sous forme de tableau pour
chaque bouton +1 à construire : nom du bloc div
, URL, taille, affichage du
compteurs, etc.
afwk_googletools.js
...
// Création d’un objet _obj_gplusone
var _obj_gplusone = _obj_gplusone || [];
Définition des blocs div des boutons +1 et création des entrées dans l’objet _obj_gplusone avec la méthode push
Dans le code HTML de la page, chaque bloc div
qui incorporera un bouton +1
est suivi d’un fragment de code Javascript qui insère une nouvelle entrée dans
l’objet javascript _obj_gplusone
avec la méthode push
:
<div id="plusone-div-292" class="plusone"></div> <script type="text/javascript">
_obj_gplusone.push(['plusone-div-292','http://www.sqlpac.dev/news/292']);
</script>
L’entrée créée dans l’objet _obj_gplusone
avec la méthode push
a la
structure suivante :
['id du bloc div','url','taille','compteur']
- L’identifiant du bloc
div
du bouton +1 est obligatoire. - Le paramètre url correspond à une adresse URL éventuellement forcée par programmation sinon la valeur
null
est donnée pour indiquer qu’il s’agit de l’adresse URL de la page courante. - Le paramètre taille est un paramètre optionnel et définit la taille du bouton +1, les valeurs possibles sont :
small, medium, standard
ettall
. - Le paramètre compteur est également un paramètre optionnel et indique si le compteur du bouton +1 doit être affiché, les valeurs possibles sont "
true
" ou "false
".
Voici d’autres exemples de création d’entrées dans l’objet _obj_plusone
avec
la méthode push
:
<script type="text/javascript">
_obj_gplusone.push(['plusone-div']);
</script> <script type="text/javascript">
_obj_gplusone.push(['plusone-div-1',null,'tall']);
</script> <script type="text/javascript">
_obj_gplusone.push(['plusone-div-293','http://www.sqlpac.dev/news/293','small','false']);
</script>
Dans l’implémentation technique de cet article, les paramètres taille et
compteur ont pour valeurs par défaut small
et false
.
Fonction d’affichage explicite des boutons +1 : f_processbuttonplusone
Une fonction, appelée ici f_processbuttonplusone
, est créée pour traiter
toutes les entrées de l’objet _obj_gplusone
une par une. Après chaque entrée du
tableau _obj_gplusone
analysée, la méthode render
le l’objet Javascript
gapi.plusone
qui affiche explicitement le bouton +1 dans le bloc div
correspondant est appelée avec les paramètres adéquats (id
du bloc div
, URL,
taille, affichage du compteur) :
afwk_googletools.js
...
// Fonction de traitement des blocs div des boutons +1
// à partir de toutes les entrées de l’objet _obj_gplusone.
f_processbuttonplusone = function() {
for(var i=0; i< _obj_gplusone.length ; i++)
{
// Si la 2ème entrée du tableau est non définie, URL=null
if (typeof(_obj_gplusone[i][1]) == "undefined") {_obj_gplusone[i][1] = null;}
// Si la 3ème entrée du tableau est non définie, taille="small"
if (typeof(_obj_gplusone[i][2]) == "undefined") {_obj_gplusone[i][2] = "small";}
// Si la 4ème entrée du tableau est non définie, compteur="true"
if (typeof(_obj_gplusone[i][3]) == "undefined") {_obj_gplusone[i][3] = "true";}
if (_obj_gplusone[i][1] == null) {
var obj = { "size": _obj_gplusone[i][2],
"count": _obj_gplusone[i][3]};
} else {
var obj = { "href": _obj_gplusone[i][1],
"size": _obj_gplusone[i][2],
"count": _obj_gplusone[i][3]};
}
// Appel de l’affichage du bouton +1 grâce à la méthode render de l’objet gapi.plusone
// avec en premier paramètre l’ID du bloc DIV
// et l’objet des paramètres : URL "href", taille "size", compteur "count".
if (gapi != "undefined") { gapi.plusone.render(_obj_gplusone[i][0],obj); }
}
}
...
Appel automatique de la fonction f_processbuttonplusone après chargement de la page
La fonction f_processbuttonplusone
est ensuite automatiquement appelée après
le chargement de la page grâce aux méthodes addEventListener
ou attachEvent
si
il s’agit de Microsoft Internet Explorer :
afwk_googletools.js
...
if (window.addEventListener) {
window.addEventListener('load', f_processbuttonplusone, false);
}
else if (window.attachEvent) { /** Cas Internet Explorer */
window.attachEvent('onload', f_processbuttonplusone);
}
...
Code source complet du script afwk_googletools.js
/**
Inclusion de Google Plus One
*/
v_head = document.getElementsByTagName("head")[0];
v_script_plusone = document.createElement ("script");
v_script_plusone.setAttribute("type","text/javascript");
v_script_plusone.setAttribute("async","true");
v_script_plusone.setAttribute("src","https://apis.google.com/js/plusone.js");
v_head.appendChild(v_script_plusone);
v_parms = '{lang:"fr", parsetags:"explicit"}';
if (v_script_plusone.canHaveChildren == null
|| v_script_plusone.canHaveChildren)
{
/* Firefox, Chrome */
v_script_plusone.appendChild(document.createTextNode(v_parms));
}
else {
/* Internet Explorer */
v_script_plusone.text = v_parms;
}
var _obj_gplusone = _obj_gplusone || [];
// Fonction de traitement des blocs div des boutons +1
// à partir de toutes les entrées de l’objet _obj_gplusone.
f_processbuttonplusone = function() {
for(var i=0; i< _obj_gplusone.length ; i++)
{
// Si la 2ème entrée du tableau est non définie, URL=null
if (typeof(_obj_gplusone[i][1]) == "undefined") {_obj_gplusone[i][1] = null;}
// Si la 3ème entrée du tableau est non définie, taille="small"
if (typeof(_obj_gplusone[i][2]) == "undefined") {_obj_gplusone[i][2] = "small";}
// Si la 4ème entrée du tableau est non définie, compteur="true"
if (typeof(_obj_gplusone[i][3]) == "undefined") {_obj_gplusone[i][3] = "true";}
if (_obj_gplusone[i][1] == null) {
var obj = { "size": _obj_gplusone[i][2],
"count": _obj_gplusone[i][3]};
} else {
var obj = { "href": _obj_gplusone[i][1],
"size": _obj_gplusone[i][2],
"count": _obj_gplusone[i][3]};
}
// Appel de l’affichage du bouton +1 grâce à la méthode render de l’objet gapi.plusone
// avec en premier paramètre l’ID du bloc DIV
// et l’objet des paramètres : URL "href", taille "size", compteur "count".
if (gapi != "undefined") { gapi.plusone.render(_obj_gplusone[i][0],obj); }
}
}
if (window.addEventListener) {
window.addEventListener('load', f_processbuttonplusone, false);
}
else if (window.attachEvent) { /** Cas Internet Explorer */
window.attachEvent('onload', f_processbuttonplusone);
}