Implémentation du nouveau bouton +1 de Google et les normes W3C

Introduction

Google a lancé le 1^er juin 2011 le bouton +1. Ce nouveau bouton +1 (prononcer plus one en anglais) permet aux internautes de recommander des pages dans les résultats de recherche Google, un peu comme le bouton "J’aime" de Facebook. Il est disponible pour tous les internautes disposant d’un profil Google public.

Le bouton +1 influencera également fortement le référencement, plus particulièrement sur le positionnement et la mise en valeur des pages dans les moteurs de recherche.

Les données analytiques et statistiques du bouton +1 seront bientôt disponibles à trois endroits pour les webmasters :

Google Webmaster Tools
Google Analytics
Google AdWords

Les données +1 seront aggrégées selon quatre catégories :

Données géographiques.
Données démographiques : âge, sexe et qui a cliqué lorsque cette information est disponible.
Contenu : liens URLs
Impacts : impressions du bouton +1 et clics.

En attendant la mise à disposition des données analytiques, cet article présente la mise en place du bouton +1 de Google avec le strict respect des normes W3C. Les aspects performances sont évoqués ainsi que quelques écueils rencontrés durant l’implémentation.

Implémentation technique et utilisation des APIs

Inclusion du script javascript plusone.js - instanciation d’un objet gapi.plusone

Pour insérer un bouton +1, le script https://apis.google.com/js/plusone.js doit être inclus dans l’entête de la page (entre les balises <head> et </head>) ou avant la fermeture du corps de la page (</body>).

<script type="text/javascript"
    src="https://apis.google.com/js/plusone.js"></script>

Le protocole https est obligatoire ici car les informations personnelles (connexion courante à un compte Google, etc.) sont utilisées.

L’appel de ce script instancie un objet gapi.plusone.

Incorporation du bouton +1 dans une page

Les syntaxes étranges proposées par défaut par Google et incompatibles avec les règles W3C ou les navigateurs

Par défaut, Google propose la syntaxe suivante pour placer le chargement implicite du bouton sur une page, syntaxe qui ne respecte malheureusement pas les règles de validation HTML/XHTML du consortium W3C :

<g:plusone size="standard" count="true"></g:plusone>

Une autre syntaxe HTML 5 est également proposée par Google :

<div class="g-plusone" data-size="standard" data-count="true"></div>

L’attribut class doit être défini sur g-plusone. Le préfixe data- doit être ajouté à tous les attributs (size, count…).

Pour l’heure actuelle la compatibilité HTML5 des navigateurs des internautes ne permet pas d’envisager tout de suite cette syntaxe.

L’affichage explicite (syntaxes compatibles avec les règles W3C ou les navigateurs)

Pour respecter les règles du W3C et assurer une compatibilité avec les navigateurs ne supportant pas encore HTML 5, un affichage explicite est réalisé. Pour désactiver le chargement automatique du bouton +1 dès qu’il rencontre les balises <g:plusone></g:plusone> ou <div class="g-plusone" ...</div>, l’appel du script plusone.js est réalisé avec le paramètre parsetags:'explicit'

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {parsetags:'explicit'}
</script>

Par défaut le paramètre parsetags est à onload (chargement automatique).

Forcer l’affichage explicite permet d’utiliser une syntaxe HTML standard lors de l’appel de la méthode render de l’objet gapi.plusone. Le premier paramètre de la méthode render est l’identifiant du bloc <div></div> qui encapsule le bouton +1 :

<div id="plusone-div" class="plusone"></div>
<script type="text/javascript">
    gapi.plusone.render('plusone-div');
</script>

Modifier la langue du bouton +1

44 langues sont actuellement disponibles pour le bouton +1. Pour passer le bouton en langue française, le paramètre lang:'fr' est donné dans la balise qui appelle le script plusone.js.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang:'fr', parsetags:'explicit'}
</script>

Modifier l’aspect du bouton +1 : taille et compteurs

La modification de l’affichage du bouton +1 (taille, affichage du compteur, etc.) est réalisée dans la méthode render de l’objet gapi.plusone en donnant les paramètres size et count. Exemple :

<div id="plusone-div" class="plusone"></div>
<script type="text/javascript">
    gapi.plusone.render('plusone-div',{"size": "small", "count": "true"});
</script>

Pour le paramètre count qui affiche le nombre de +1 enregistrés : true ou false.
Pour le paramètre size qui définit la taille du bouton +1 : small (petite), medium (moyenne), standard ou tall (grande).

Le bouton +1 et les adresses URL

L’adresse URL du bouton +1 peut être donnée dans la méthode render de l’objet gapi.plusone avec le paramètre href :

<div id="plusone-div" class="plusone"></div>
<script type="text/javascript">
    gapi.plusone.render('plusone-div',
      {
       "size": "small", 
       "count": "true",     
       "href": "http://www.sqlpac.com/articles/sybase/sybase-iq"
    });
</script>

Lorsque le paramètre href n’est pas donné dans la méthode render, Google recherche ensuite l’adresse URL dans la valeur du paramètre href de la balise <link rel="canonical"> si cette balise est définie dans l’entête :

<html>
<head>
  ...
  <link rel="canonical" href="http://www.sqlpac.com/articles/sybase/sybase-iq">
  ...
</head>
<body>...

En dernier lieu, si le paramètre href n’est ni donné dans la méthode render, ni dans une balise <link rel="canonical"> en entête, Google appliquera l’adresse URL courante au bouton +1. Si cette adresse URL contient des paramètres GET, ceci peut être très préjudiciable aux futures statistiques.

Si des paramètres existent dans l’adresse URL, appliquer dès que possible la balise <link rel="canonical"> ou donner le paramètre href dans la méthode render.

Plusieurs boutons +1 dans une page

Bien entendu, grâce au chargement explicite, plusieurs boutons +1 peuvent exister sur une même page.

<div id="plusone-div-news292" class="plusone"></div>
<script type="text/javascript">
    gapi.plusone.render('plusone-div-news292',
      {"size": "small", "count": "true","href": "http://www.sqlpac.com/news/262"}
    );
</script>
...
<div id="plusone-div-news293" class="plusone"></div>
<script type="text/javascript">
    gapi.plusone.render('plusone-div-news293',
      {"size": "small", "count": "true","href": "http://www.sqlpac.com/news/263"}
    );
</script>
...

Industrialisation de la méthode render : fgoogle_renderPlusone

Une fonction Javascript plus générique peut être envisagée pour industrialiser la méthode gapi.plusone.render et éviter de coder les objets JSON { } à chaque fois. Cette fonction encapsule les valeurs par défaut pour les paramètres size et count lorsqu’ils ne sont pas donnés :

function fgoogle_renderPlusone(nameDiv, ahref, asize, acount) {
   
   ahref = ahref || null;
   asize = asize || "small";
   acount = acount || "true";

   if (ahref==null) {
      var obj = { "size": asize,
                  "count": acount};
   } else {
      var obj = { "href": ahref,
                  "size": asize,
                  "count": acount};

   }
   if (gapi != "undefined") { gapi.plusone.render(nameDiv,obj); }
}

L’affichage du bouton +1 peut alors être réduit au simple appel fgoogle_renderPlusone

<div id="plusone-div-news292" class="plusone"></div>
<script type="text/javascript">
    fgoogle_renderPlusone('plusone-div-news292',
                            'http://www.sqlpac.com/news/262');
</script>

Les écueils rencontrés

Écueils lors de l’appel du script plusone.js avec createElement

L’appel du script plusone.js en asynchrone avec la méthode Javascript createElement est possible mais des adaptations sont nécessaires. À propos de l’ajout et de la suppression d’éléments dans un arbre DOM : Ajout et suppression d’éléments avec Javascript - Suppression de document.write.

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 8. Pour plus d’informations à propos de la détection de la disponibilité de la méthode Javascript canHaveChildren dans un navigateur : Ajout dynamique de code Javascript, différences entre les navigateurs (canHaveChildren).

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. Un nouvel article propose l’implémentation du bouton +1 Google en asynchrone avec la méthode Javascript createElement : Implémentation du bouton +1 Google en asynchrone avec la méthode Javascript createElement .

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

Les tests n’ont pas encore été réalisés avec Opera et Safari.

Écueils lors de l’utilisation d’un nom de domaine virtuel non réglementaire

Lors de l’implémentation du bouton +1, les développements sont réalisés en local avec un domaine virtuel Apache (www.sqlpac.dev). L’utilisation de noms de domaines virtuels est impossible avec le bouton +1, les premiers tests affichent le bouton +1 en erreur :

Son utilisation n’est possible que sur un domaine réel et connu (.com, .net, .org, etc.).

Performances

L’aspect performances est important et c’est là où le bas blesse. Le surcoût dû à un bouton +1 est loin d’être anodin en temps de chargement et en charge réseau. Un surcoût allant de 900ms à 1 secondes est observé entre une page affichant ou non un bouton +1 (mesures réalisées avec FireBug).

Cette latence d’environ 1 seconde n’est pas spécialement préjudiciable car l’affichage du bouton +1 est réalisé en asynchrone.

Il faut également compter sur le nombre de requêtes Javascript traitées par bouton : 3 requêtes Javascript pour chaque bouton +1 avec une moyenne de 11,4 Kb en transfert réseau par requête.

Visualisation des +1 dans son profil et les résultats de recherche

Les +1 réalisés avec son compte sont répertoriés dans son profil Google (onglet +1) et l’option de suppression d’un +1 est disponible :

Les boutons +1 sont également disponibles sur les pages de recherche Google mais uniquement sur www.google.com (langue anglaise) lors de l’écriture de cet article (Juin 2011).