Implémentation du bouton +1 Google en asynchrone avec la méthode Javascript createElement

1- 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.

2- 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> 

edit 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;
}

3- Construction automatique des boutons Google +1 en asynchrone

3-1- 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...

edit afwk_googletools.js

...
// Création d'un objet _obj_gplusone

var _obj_gplusone = _obj_gplusone || [];

3-2- 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 et tall.
• 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.

3-3- 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) :

edit 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); }
        }
}
 ...

3-4- 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 :

edit afwk_googletools.js

...
if (window.addEventListener) {
    window.addEventListener('load', f_processbuttonplusone, false);
}
else if (window.attachEvent) { /** Cas Internet Explorer */
    window.attachEvent('onload', f_processbuttonplusone);
}
 ...

4- 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);
}

Annexe