Introduction
Google a lancé le 1er 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
oufalse
. - Pour le paramètre
size
qui définit la taille du bouton +1 :small
(petite),medium
(moyenne),standard
outall
(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).