02
JUIN

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

Publié le 02/06/11 à 00h59 par DJo

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.

Bouton +1 Google

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.

Configurateur de bouton +1 Google

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.

 

+1 ta page !

 

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:

Bouton Google +1 - Taille petite Bouton Google +1 - Taille moyenne Bouton Google +1 - Taille standart Bouton Google +1 - Taille haute
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.

Baraguiné par hugokant le 02/06/11 à 21h01
hugokant via Twitter
Salut !

y a-t-il un moyen de définir l'icône qu'il va utiliser quand il affichage le lien sur la page 1 du profil google ? je viens d'essayer et il prend une des images de la page au hasard...
Baraguiné par GregLone le 06/06/11 à 16h43
GregLone sur La Ferme du Web
C'est pas possible je dois être branque :D Même après avoir " 1" cet article, je ne vois toujours aucun bouton apparaitre dans mes résultats de recherche sur google.com ou .fr >_< Et pourtant ce 1 apparait bien sur mon profil -_- #LoseMyMind
Bon, en attendant, merci pour l'info :)
Baraguiné par aiel62 le 09/06/11 à 10h50
aiel62 sur La Ferme du Web
Vissiblement il bug sur mon site internet j'ai déja un compte google

j'ai suivi ces instructions


{lang: 'fr'}





en fait il c'est afficher une fois et après plus rien quand jai voulu changer la taille
Baraguiné par le 09/06/11 à 12h24
Le lien donné ne fonctionne pas.
Une autre adresse pour configurer ce bouton?
Baraguiné par DJo le 15/06/11 à 17h01
DJo sur La Ferme du Web
Le lien marche bien chez moi ^^
Baraguiné par le 13/07/11 à 07h58
Bonjour
comment désactiver le google 1
car j'ai un problème sur picasa web depuis que j'ai activer ce bouton !!!
merci
louis
Baraguiné par Lagouere le 26/07/11 à 16h08
Lagouere sur La Ferme du Web
Bonjour,
impossible de definir les style pour la classe "g-plusone" quelqu'un a une idee?
Baraguiné par le 03/09/11 à 10h21
Bonjour,
Merci pour ce post qui m'a bien aidé pour installer ce bouton sur mon site photo. Une petite remarque : selon la version du navigateur utilisé le bouton ne s'affiche pas. Je ne suis pas sûre de l'intérêt de g 1 mais dans le doute je le laisse...
Baraguiné par le 19/09/11 à 22h43
hello
Baraguiné par le 06/01/12 à 20h11
slt ma question est comment desintegrer le bouton google 1 de votre page google veuillez m'apporter une solution dans les plus brefs delai

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web