Bouton Google +1 sur son site: Comment l'intégrer à vos pages web

Nous vous en parlions en fin de mois de mars, le bouton +1 Google est désormais disponible à l'intégration sur vos pages web.

Si vous souhaitez en savoir plus sur le concept du bouton Google +1, je vous invite à consulter notre billet de présentation.

Dans ce billet, nous allons voir comment intégrer directement le bouton plus 1 à votre page.

Solution simple: Configurateur de bouton +1 Google

Commençons par la solution la plus simple et classique: Le configurateur officiel de Google.

De la même manière que pour les widgets Facebook "J'aime" ou Twitter, le géant de Mountain View nous met à disposition une solution "en 2 clics" pour générer le code à insérer sur son site web.

Dans un premier temps, rendez-vous sur le configurateur +1 en ligne.

Vous aurez alors la possibilité de choisir plusieurs options:

• La taille du bouton
• Le langage associé (A savoir que pour le moment, tout est en anglais)
• L'affichage ou non du nombre de +1 associés à la page
• A quel moment executer le parser des boutons +1: Soit directement après la fin du chargement de la page avec OnLoad, soit en spécifiant manuellement quand nous souhaitons qu'il parse la page (Explicit)
• Un éventuel callback Javascript à appeler une fois que quelqu'un vote
• L'URL en question qu'il faut +1

Automatiquement, une preview de votre bouton s'affiche ainsi que le code auto généré de ce style:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'fr'}
</script>
<g:plusone size="tall" href="http://www.lafermeduweb.net/"></g:plusone>

Ce code est ensuite à placer à l'endroit où vous souhaitez afficher le bouton. L'appel du javascript peut être inséré dans le head de votre page et le ou les boutons dans le body.

Solution avancée: Intégrer le bouton +1 Google avec l'API Dédiée

Google pense aux développeurs et offre une solution un peu plus manuelle et optimisée pour afficher ses boutons +1.

Commençons déjà par voir quelle est la syntaxe HTML à utiliser pour le bouton. Il y'a en effet 2 manières de coder le bouton +1:

• Une balise dédiée: g:plusone:

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

• Une div avec une classe g-plusone:

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

Les deux fonctionnent et acceptent les mêmes paramètres (le nom du paramètre doit être précédé de data- pour l'affichage en div):

size: La taille du bouton +1parmi l'une des quatre valeurs prédéfinies:

small	medium	standard	tall

count: true ou false, pour définir si l'on affiche ou non le compteur de nombre de +1. A savoir que sur la taille "tall", on est obligé de les afficher.

href: L'URL de la page à +1. Si elle n'est pas spécifiée, Google va chercher s'il existe une balise link avec un rel="canonical" et attribuera cette adresse. S'il y'en a pas non plus, le bouton attribuera en URL le résultat du JS document.location.href.

callback: Une fonction javascript qui sera appelée lorsque quelqu'un aura cliqué sur le bouton. Très intéressant comme paramètre qui laisse des possibilités intéressantes comme remercier son visiteur d'avoir +1 sa page... Attention toutefois à bien respecter les conditions d'utilisation du google +1.

La fonction callback recevra automatiquement un JSON en paramètre de ce type: {"href": "http://www.votesite+1.com/", "state": "on"}.

Une fois que vos balises +1 seront intégrées à vos pages, il va falloir les afficher / parser avec le script Google +1. Nous avons là encore plusieurs choix pour afficher les boutons.

Chargement automatique des boutons +1 après le chargement de la page

Dans le head de la page:

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

Dans le body:

<g:plusone size="tall" href="http://www.lafermeduweb.net/"></g:plusone>

Il s'agit de la méthode classique de chargement. Dès que la page est chargée (onLoad), les boutons sont affichés.

Chargement différé explicite des boutons +1

Dans le head de la page:

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

En précisant le paramètre parsetags en valeur explicit, nous pourrons alors afficher au moment souhaité notre bouton +1:

<div id="socialWidgets">
	<g:plusone size="tall" href="http://www.lafermeduweb.net/"></g:plusone>
</div>


<script ype="text/javascript">
	// ... Actions à faire avant le chargement des boutons ....
	gapi.plusone.go("socialWidgets");

</script>

La commande gapi.plusone.go("socialWidgets"); permet de parser et afficher les boutons contenus dans la div d'id socialWidgets.

Pratique pour gagner en performances web et parser uniquement une fois que tout est réellement chargé par exemple.

Affichage manuel du bouton +1

Dans le head de la page:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'fr', "parsetags": "explicit"}
</script>
<script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("maDivPlus1");
      }
</script>

La dernière méthode permet d'afficher manuellement et à la volée un bouton +1 sur un élément HTML.

Il est par exemple possible d'afficher le bouton +1 lorsque l'on clic sur un lien qui fera appel à la méthode gapi.plusone.render.

Dans le body:

<a href="#" onClick="renderPlusone();">Affichage du bouton +1</a>
<div id="maDivPlus1"></div>

Voilà, vous savez à présent tout sur le bouton +1 et son intégration sur des pages web.

Pour tester le bouton sur la Ferme du Web, vous pouvez +1 la page en cliquant sur le bouton juste en dessous du billet, avant les commentaires.