Google+ Platform

Bouton +1

Documentation

Vous pouvez insérer le bouton +1 sur votre site Web et le personnaliser en fonction de vos besoins, par exemple en définissant sa taille et sa technique de chargement. En ajoutant le bouton +1 à votre site Web, vous donnez aux utilisateurs la possibilité de recommander votre contenu à leurs cercles et d'attirer le trafic vers votre site. Le bouton +1 peut également permettre d'accroître le temps passé sur votre site en recommandant d'autres articles aux internautes.

L'utilisation du bouton +1 est régie par les Règles d'utilisation du bouton +1 de Google.

Premiers pas

Un simple bouton

Pour afficher un bouton +1 sur votre page, le plus simple est d'inclure la ressource JavaScript nécessaire et d'ajouter une balise de bouton +1 :

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

Le script doit être chargé à partir du protocole HTTPS et peut être inclus à n'importe quel endroit sur la page. Pour plus d'informations, consultez les questions fréquentes. Vous pouvez également charger le script de manière asynchrone pour obtenir de meilleures performances.

Balise +1

Voici la syntaxe d'une balise +1 standard :

<g:plusone size="tall"></g:plusone>

Vous pouvez également utiliser une balise +1 compatible HTML5 en définissant l'attribut class sur g-plusone et en ajoutant le préfixe data- à chaque attribut du bouton.

<div class="g-plusone" data-size="tall" ... ></div>
  

Par défaut, le script inclus parcourt le DOM et affiche les balises +1 sous forme de boutons. Vous pouvez réduire le temps d'affichage sur les pages volumineuses à l'aide de l'API JavaScript pour ne parcourir qu'un seul élément de la page ou pour afficher un élément spécifique sous forme de bouton +1.

Chargement JavaScript asynchrone

Avec l'intégration asynchrone, la page Web continue de se charger pendant que le navigateur télécharge le fichier JavaScript du bouton +1. En chargeant ces éléments en parallèle, vous garantissez que le chargement du fichier JavaScript du bouton +1 ne rallonge pas le temps de chargement de votre page.

Pour intégrer le code JavaScript du bouton +1 de manière asynchrone, utilisez le code suivant :

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Si vous souhaitez définir les paramètres des balises de script, utilisez la syntaxe suivante :

  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };

Vous trouverez un exemple complet dans la section Exemples.

Configuration

Définition de l'URL cible du bouton +1

L'URL à laquelle le +1 est attribué est déterminée par l'un des éléments suivants, répertoriés par ordre de priorité :

1. Attribut href du bouton
Cet attribut définit explicitement l'URL cible du bouton +1.
2. Balise <link rel="canonical" ... /> de la page
Si l'attribut href du bouton +1 n'est pas fourni, Google utilise l'URL canonique de la page. Pour plus d'informations sur la définition de l'URL canonique d'une page, consultez cet article d'aide.
3. URL fournie par document.location.href (déconseillé)
Si aucune des données précédentes n'est disponible, Google utilise l'URL de la page telle qu'elle apparaît dans le DOM. Toutefois, cette URL est susceptible de contenir des identifiants de session, des ancrages ou d'autres paramètres qui ne font pas partie de l'URL canonique. Par conséquent, nous vous conseillons vivement de définir l'attribut href du bouton +1 ou d'ajouter une balise <link rel="canonical" ...> à votre page.

Paramètres des balises de script

Ces paramètres sont définis dans l'élément <script />. Ils contrôlent les paramètres de langue et de chargement des boutons figurant sur toute la page Web.

Clé Valeur Par défaut Description
lang language code en-US Définit la langue à utiliser pour les boutons +1 sur la page. Pour connaître les valeurs language code disponibles, consultez la liste des codes de langue et un exemple de paramètre lang.
parsetags explicit, onload onload Définit le mécanisme de chargement à utiliser.
onload
Tous les boutons +1 de la page s'affichent automatiquement une fois la page chargée. Voir l'exemple de chargement asynchrone.
explicit
Les boutons +1 s'affichent uniquement si gapi.plusone.go ou gapi.plusone.render est appelée explicitement.

Lorsque vous utilisez le chargement explicit en conjonction avec des appels à go et render pointant vers des conteneurs spécifiques sur votre page, vous empêchez le script de parcourir le DOM complet, ce qui peut améliorer le délai d'affichage du bouton. Voir les exemples gapi.plusone.go et gapi.plusone.render.

Attributs des balises +1

Ces attributs définissent les paramètres de chaque bouton. Vous pouvez définir ces paramètres sous forme de paires attribut-valeur dans les balises de bouton +1 ou de paires key:value JavaScript dans un appel à gapi.plusone.render.

Cette fonctionnalité est actuellement accessible dans la plate-forme d'aperçu des nouveautés Google+.
Attribut Valeur Par défaut Description
href URL to +1 current page URL Indique l'URL à laquelle attribuer +1. Définissez cet attribut si vous placez un bouton +1 à côté de la description d'un élément d'une autre page, afin que le bouton permette d'attribuer +1 à la page référencée (et non à la page actuelle). Si vous définissez cet attribut à l'aide de gapi.plus.render, n'ajoutez pas de caractères d'échappement à l'URL.
size
  • small
  • medium
  • standard
  • tall
standard Définit la taille d'affichage du bouton +1. Pour plus d'informations, voir la section Tailles de bouton.
annotation
  • none
  • bubble
  • inline
bubble Définit l'annotation à afficher à côté du bouton.
none
Aucune annotation supplémentaire ne s'affiche.
bubble
Affiche le nombre d'utilisateurs ayant attribué +1 à la page dans un élément graphique situé à côté du bouton.
inline

Affiche la photo de profil des utilisateurs connectés qui ont attribué +1 à la page et le nombre d'internautes ayant attribué +1 à la page.

width int Si annotation est définit sur "inline", ce paramètre indique la largeur en pixels occupée par le bouton et son annotation intégrée. Si vous omettez la largeur, le bouton et son annotation intégrée occupent 450 px.

Vous trouverez des exemples des différents paramètres de largeur d'affichage dans la section Largeurs de l'annotation intégrée.

align
  • left
  • right
left Définit l'alignement horizontal des éléments du bouton dans son cadre.
expandTo comma-separated list of
  • top
  • right
  • bottom
  • left
empty list

Définit la position relative des info-bulles de survol et de confirmation par rapport au bouton. Définissez ce paramètre si votre page contient certains éléments qui pourraient interférer dans l'affichage des info-bulles (par exemple, des objets Flash).

Par exemple, top permet d'afficher les info-bulles de survol et de confirmation au-dessus du bouton.

Si vous omettez ce paramètre, la logique d'affichage tente de déterminer la position adéquate, qui est généralement en dessous du bouton avec la valeur bottom.

callback function(jsonParam) Si vous la spécifiez, cette fonction est appelée après que l'utilisateur a cliqué sur le bouton +1. La fonction de rappel doit se trouver dans l'espace de noms global et n'accepter qu'un seul paramètre, à savoir un objet JSON dont la structure est la suivante :
{
  "href": target URL,
  "state": "on"|"off"
}

La propriété state prend la valeur "on" pour l'attribution d'un +1 et la valeur "off" pour le retrait d'un +1.

onstartinteraction function(jsonParam)

Si vous la spécifiez, cette fonction est appelée soit par l'affichage d'une info-bulle de survol (passage de la souris sur le bouton +1), soit par l'affichage d'une info-bulle de confirmation (attribution du +1 à la page). Vous pouvez utiliser cette fonction de rappel pour modifier votre page, par exemple pour mettre une vidéo en pause lorsque l'info-bulle apparaît.

Cette fonction doit se trouver dans l'espace de noms global et n'accepter qu'un seul paramètre, à savoir un objet JSON dont la structure est la suivante :

{
  "id": target URL,
  "type": hover|confirm
}
onendinteraction function(jsonParam)

Si vous la spécifiez, cette fonction est appelée quand l'info-bulle de survol ou de confirmation disparaît. Vous pouvez utiliser cette fonction de rappel pour modifier votre page, par exemple pour reprendre la lecture d'une vidéo lorsque l'info-bulle se ferme.

Cette fonction n'accepte qu'un seul paramètre, dont la structure est identique à celle du paramètre passé à onstartinteraction.

recommendations true, false true Pour désactiver l'affichage des recommandations dans l'info-bulle du bouton +1, définissez recommendations sur false.
count true, false true Obsolète : Pour désactiver l'affichage du compteur, utilisez annotation="none".

Tailles de bouton

Si vous spécifiez une hauteur inférieure à la hauteur minimale, le bouton aura la hauteur minimale. Sinon, le plus grand bouton disponible qui tienne dans cet espace sera sélectionné et centré verticalement. Si vous disposez d'une largeur suffisante, le petit bouton et le bouton standard indiquent le nombre total de +1 de la page.

Type de bouton (annotation) Exemple Largeur (px) Largeur max. (px) Hauteur (px)
Petit (sans info-bulle) 24 15
Petit (avec info-bulle) 70 15
Moyen (sans info-bulle) 32 20
Moyen (avec info-bulle) 90 20
Standard (sans info-bulle) 38 24
Standard (avec info-bulle) 106 24
Grand (sans info-bulle) 50 20
Grand (avec info-bulle) 50 60

Largeurs de l'annotation intégrée

L'affichage des annotations intégrées varie selon la valeur du paramètre width.

  • Si le paramètre de largeur n'est pas défini, le bouton +1 et son annotation intégrée occupent un espace de 450 pixels de large.
  • Pour s'afficher, l'annotation intégrée doit disposer d'un espace d'au moins 120 pixels. Toute valeur inférieure est redimensionnée automatiquement. Nous conseillons de définir une largeur d'au moins 250 pixels.
  • Dans les autres cas, l'affichage des photos de profil et du texte varie selon la largeur définie, comme indiqué dans les exemples ci-dessous.
Largeur Bouton +1 (www.google.com)
250 px
300 px
350 px
non spécifiée (450 px)

Contenu de l'extrait Google+

Après avoir attribué +1 à une page, les internautes ont la possibilité de partager cette dernière sur Google+ par l'intermédiaire d'une info-bulle de partage. Cette info-bulle (ainsi que le message d'activité Google+ qui en résulte) contient un aperçu (extrait Google+)indiquant le titre de la page, une brève description de celle-ci et une vignette. Ces données sont extraites du contenu de l'URL cible et elles peuvent être définies aisément par l'éditeur du contenu.

Vous trouverez davantage d'informations et des instructions pour personnaliser votre extrait dans la documentation relative aux extraits.

API JavaScript

Le code JavaScript du bouton +1 définit deux fonctions d'affichage de bouton sous l'espace de noms gapi.plusone. Vous devez appeler l'une de ces fonctions si vous désactivez l'affichage automatique en attribuant la valeur "explicit" au paramètre parsetags.

Méthode Description
gapi.plusone.render(
container,
parameters
)
Affiche le conteneur spécifié sous forme de widget de bouton +1.
container
Conteneur qui s'affiche sous forme de bouton +1. Spécifiez l'identifiant du conteneur (chaîne) ou l'élément DOM lui-même.
parameters
Objet contenant des attributs de balise +1 sous forme de paires clé-valeur (par exemple, {"size": "tall", "callback": myCallbackFunction}).
gapi.plusone.go(
opt_container
)
Affiche toutes les classes et balises +1 dans le conteneur indiqué. Cette fonction ne doit être utilisée que si la valeur explicit est attribuée au paramètre parsetags (en vue d'améliorer les performances, par exemple).
opt_container
Conteneur dans lequel se trouvent les balises du bouton +1 à afficher. Spécifiez l'identifiant du conteneur (chaîne) ou l'élément DOM lui-même. Si le paramètre opt_container est omis, tous les boutons +1 de la page sont affichés.

Exemples

Page standard

<html>
  <head>
    <title>+1 demo: Basic page</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <g:plusone></g:plusone>
  </body>
</html>

Chargement explicite

<html>
  <head>
    <title>+1 demo: Explicit load</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
  </head>
  <body>
    <div id="content">
      <g:plusone></g:plusone>
    </div>
    <script type="text/javascript">
      gapi.plusone.go("content");
    </script>
  </body>
</html>

Affichage explicite

<html>
  <head>
    <title>+1 Demo: Explicit render</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderPlusone();">Render the +1 button</a>
    <div id="plusone-div"></div>
  </body>
</html>

Chargement asynchrone

<html>
  <head>
    <title>+1 Demo: Async load</title>
    <link rel="canonical" href="http://www.example.com" />
  </head>
  <body>
    <g:plusone></g:plusone>

    <script type="text/javascript">
      window.___gcfg = {
        lang: 'en-US'
      };

      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
  </body>
</html>

Questions fréquentes

Les questions fréquentes ci-après répondent à des questions d'ordre technique et de mise en œuvre. Vous trouverez davantage de ressources dans les FAQ générales et le forum de discussion de la plate-forme Google+.

Puis-je placer sur une même page plusieurs boutons servant à attribuer +1 à des URL différentes ?
Oui. Indiquez l'URL à associer à chaque bouton +1 à l'aide de l'attribut href (voir les paramètres des balises +1).
Où dois-je placer le bouton +1 sur mes pages ?
Qui mieux que vous connaît votre page et votre audience ? Nous vous recommandons par conséquent de placer le bouton là où vous pensez qu'il sera le plus efficace. Les emplacements situés au-dessus de la ligne de flottaison, à côté du titre de la page et à côté des liens de partage sont assez indiqués. Il est également recommandé de placer le bouton +1 à la fois au début et à la fin d'un article.
L'emplacement de la balise <script> sur la page a-t-il un impact sur la latence ?
Non. L'emplacement de la balise <script> n'a pas d'impact significatif sur la latence. Cependant, vous pouvez accélérer le chargement de la page en plaçant la balise en bas du document, juste avant la balise "body" de fermeture.
La balise <script> doit-elle figurer avant la balise +1 ?
Non, la balise <script> peut figurer n'importe où sur la page.
La balise <script> doit-elle être intégrée avant un appel de méthode par une autre balise <script> dans la section associée à l'API JavaScript ?
Oui. Si vous utilisez une méthode de l'API JavaScript, celle-ci doit être placée après la balise <script>.
Que se passe-t-il si j'attribue +1 à une URL privée ?
Le bouton ne fonctionnera pas. La fonction +1 ne s'applique qu'aux URL publiques.
Dois-je utiliser l'attribut href ?
L'attribut href n'est pas obligatoire. Pour plus d'informations, voir la section Définition de l'URL cible du bouton +1.
Toutes mes pages doivent-elles contenir une balise rel="canonical" ?
Non, bien que cela soit recommandé. Si l'attribut href n'est pas défini, Google recherche la balise rel="canonical" sur la page. Si cette balise est introuvable, Google utilise la valeur document.location.href. Cette dernière peut prêter à confusion, car il n'est pas rare que l'URL conserve des variables d'état. La balise rel="canonical" peut donc vous permettre de spécifier l'URL exacte à associer au bouton +1.
Certains de mes utilisateurs reçoivent un avertissement de sécurité lorsqu'ils accèdent à des pages avec un bouton +1. Que puis-je faire pour y remédier ?
Le code du bouton +1 nécessite un script des serveurs Google. Il se peut que vous receviez cette erreur après avoir ajouté le script via http:// sur une page chargée via https://. Nous vous conseillons d'utiliser https:// pour ajouter le script :
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Si votre page Web utilise https://, mais contient des éléments appelés via http://, il se peut que certains navigateurs et outils de validation affichent un message d'erreur. Si votre site renvoie des pages via https://, assurez-vous que le code du bouton +1 placé sur ces pages utilise également https://. D'ailleurs, vous pouvez parfaitement utiliser https:// dans le code du bouton pour toutes vos pages, même celles qui ne sont renvoyées que via http://.
Puis-je effectuer le suivi des interactions avec un bouton +1 à l'aide de Google Analytics ?
Oui, la dernière version de Google Analytics effectue le suivi automatique des interactions avec tous les boutons +1 sans modifier votre code de suivi. Pour consulter les statistiques et les rapports relatifs aux réseaux sociaux, cliquez sur Visiteurs > Réseaux sociaux. Pour en savoir plus, consultez la page À propos des rapports "Analyse du plug-in Réseaux sociaux" du centre d'aide.
Pourquoi l'info-bulle de survol est-elle coupée par le contenu Adobe Flash ?

Par défaut, le contenu Flash s'affiche par dessus tous les autres contenus HTML, y compris par dessus les info-bulles de survol et tout autre contenu qui s'affiche par l'intermédiaire du bouton +1. Il se peut donc que certains contenus affichés par l'intermédiaire du bouton +1 soient coupés par les éléments Adobe Flash de la page.

La solution dépend de votre situation. Si vous pouvez modifier le code HTML source de l'objet Flash sur votre page, il vous suffit d'ajouter une propriété dans l'élément de cet objet. Cependant, si l'élément Flash est ajouté à votre page par un script (comme c'est généralement le cas pour les annonces), vous devrez recourir à une solution plus sophistiquée.

Tout d'abord, si vous avez accès au code HTML source de l'objet Flash sur votre page, vous devez attribuer la valeur 'transparent' au paramètre wmode. Pour cela, vous pouvez ajouter un paramètre à l'élément de l'objet Flash :

<object ... >
<param name="wmode" value="transparent">
... </object>

Dans les autres cas où l'élément Flash est ajouté par un script, vous pouvez tout de même résoudre le problème. Vous pouvez ajouter le paramètre décrit ci-dessus par programmation à l'aide de JavaScript. FlashHeed est un exemple de cette technique. Cette méthode ne fonctionne que si le code Flash n'est pas intégré dans un cadre iFrame. Si l'élément Flash est intégré dans un cadre iFrame, vous devez repositionner soit le contenu Flash, soit le bouton +1 de manière à éviter tout chevauchement.

J'ai placé le code de mon bouton +1 dans un cadre iFrame. Pourquoi la boîte de dialogue de partage est-elle coupée dans certains navigateurs ?

Lorsque vous cliquez sur le bouton +1, nous affichons une boîte de dialogue de partage. Or, celle-ci est bien plus large que le bouton +1. C'est pourquoi, si vous placez le code du bouton +1 dans un cadre iFrame qui est plus petit que la boîte de dialogue de partage, une partie de cette dernière peut être rognée et devenir inaccessible à vos utilisateurs.

Pour remédier à ce problème, le plus simple est d'intégrer le code source du bouton +1 directement dans vos pages. Si vous devez utiliser un cadre iFrame englobant le bouton +1, réservez-lui un espace suffisant pour afficher la boîte de dialogue de partage.

J'ai défini la valeur d'alignement right pour mon bouton. Or, celui-ci n'est pas aligné à droite sur la page.
Lorsque vous définissez align="right", Google aligne à droite les éléments du bouton à l'intérieur du cadre de celui-ci. Vous devez donc définir l'alignement du conteneur du bouton de sorte qu'il soit aligné à droite sur la page. Par exemple :
<div style="float: right">
  <g:plusone align="right"></g:plusone>
</div>
Les recommandations affichées dans l'info-bulle de survol du bouton +1 ne conviennent pas pour mon site Web. Comment puis-je les désactiver ?
Veuillez nous indiquer pourquoi les recommandations ne sont pas adaptées à votre site Web afin que nous puissions améliorer notre produit et son intégration dans votre site Web. Si vous devez désactiver les recommandations, définissez l'attribut de recommandation sur false dans la balise +1.
Quels sont les navigateurs compatibles ?
Les navigateurs compatibles avec l'interface Web de Google+ le sont également avec tous les plug-ins Google+ :
  • Windows : Google Chrome, Firefox 3.6 et versions ultérieures, Internet Explorer 8 et versions ultérieures
  • Linux : Google Chrome, Firefox 3.6 et versions ultérieures
  • Mac : Google Chrome, Firefox 3.6 et versions ultérieures, Safari 4 et versions ultérieures

Codes de langue

Langue Valeur
Afrikaans af
Amharique am
Arabe ar
Basque eu
Bengali bn
Bulgare bg
Catalan ca
Chinois (Hong Kong) zh-HK
Chinois (simplifié) zh-CN
Chinois (traditionnel) zh-TW
Croate hr
Tchèque cs
Danois da
Néerlandais nl
Anglais (Royaume-Uni) en-GB
Anglais (États-Unis) en-US
Estonien et
Philippin fil
Finnois fi
Français fr
Français (canadien) fr-CA
Langue Valeur
Galicien gl
Allemand de
Grec el
Gujarati gu
Hébreu iw
Hindi hi
Hongrois hu
Islandais is
Indonésien id
Italien it
Japonais ja
Kannada kn
Coréen ko
Letton lv
Lithuanien lt
Malais ms
Malayalam ml
Marathi mr
Norvégien no
Perse fa
Polonais pl
Langue Valeur
Portugais (Brésil) pt-BR
Portugais (Portugal) pt-PT
Roumain ro
Russe ru
Serbe sr
Slovaque sk
Slovène sl
Espagnol es
Espagnol (Amérique latine) es-419
Swahili sw
Suédois sv
Tamoul ta
Télougou te
Thaï th
Turc tr
Ukrainien uk
Ourdou ur
Vietnamien vi
Zoulou zu

Authentification requise

Vous devez être connecté à Google+ pour effectuer cette opération.

Connexion en cours…

Le site Google pour les développeurs a besoin de votre autorisation pour effectuer cette opération.