Google – Ajouter le bouton +1 de Google

Il est facile de trouver de l’aide sur internet concernant la question du « Comment ajouter le bouton +1 de Google ?« . Cependant, on me pose encore la question et je vais donc faire un petit article sur comment intégrer ce bouton à vos pages web.

google-button

En fait, il suffit juste de vous rendre sur ce lien.

Toutes les manip, sont décrites, mais je vais tout de même les exposer ici aussi :

1 / Insérez ce code, dans le head de votre site web :

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

2 / Ensuite, il suffit d’insérer les balises suivantes à l’endroit ou vous souhaitez votre bouton :
pour une version petite :

<div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 70px; height: 15px;" id="___plusone_0"><iframe ng-non-bindable="" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 70px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 15px;" tabindex="0" vspace="0" id="I0_1487939053323" name="I0_1487939053323" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&size=small&origin=http%3A%2F%2Fblog.ludikreation.com&url=http%3A%2F%2Fblog.ludikreation.com%2Fgoogle-ajouter-le-bouton-1%2F&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.fr.G3iKCWefhzA.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPMJsstv_doF6VbbEygLQ39mO8imw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1487939053323&parent=http%3A%2F%2Fblog.ludikreation.com&pfname=&rpctoken=19627966" data-gapiattached="true" title="+1" width="100%" frameborder="0"></iframe></div>

pour une version standard :

<div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 106px; height: 24px;" id="___plusone_1"><iframe ng-non-bindable="" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 106px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" id="I1_1487939053333" name="I1_1487939053333" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&origin=http%3A%2F%2Fblog.ludikreation.com&url=http%3A%2F%2Fblog.ludikreation.com%2Fgoogle-ajouter-le-bouton-1%2F&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.fr.G3iKCWefhzA.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPMJsstv_doF6VbbEygLQ39mO8imw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I1_1487939053333&parent=http%3A%2F%2Fblog.ludikreation.com&pfname=&rpctoken=17651324" data-gapiattached="true" title="+1" width="100%" frameborder="0"></iframe></div>

pour une version moyenne :

<div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px;" id="___plusone_2"><iframe ng-non-bindable="" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" id="I2_1487939053340" name="I2_1487939053340" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&size=medium&origin=http%3A%2F%2Fblog.ludikreation.com&url=http%3A%2F%2Fblog.ludikreation.com%2Fgoogle-ajouter-le-bouton-1%2F&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.fr.G3iKCWefhzA.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPMJsstv_doF6VbbEygLQ39mO8imw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I2_1487939053340&parent=http%3A%2F%2Fblog.ludikreation.com&pfname=&rpctoken=36375011" data-gapiattached="true" title="+1" width="100%" frameborder="0"></iframe></div>

pour une version grande :

<div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 50px; height: 60px;" id="___plusone_3"><iframe ng-non-bindable="" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" tabindex="0" vspace="0" id="I3_1487939053346" name="I3_1487939053346" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&size=tall&origin=http%3A%2F%2Fblog.ludikreation.com&url=http%3A%2F%2Fblog.ludikreation.com%2Fgoogle-ajouter-le-bouton-1%2F&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.fr.G3iKCWefhzA.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPMJsstv_doF6VbbEygLQ39mO8imw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I3_1487939053346&parent=http%3A%2F%2Fblog.ludikreation.com&pfname=&rpctoken=13808289" data-gapiattached="true" title="+1" width="100%" frameborder="0"></iframe></div>

Et vous avez votre bouton +1 de google 🙂

Si vous aimez les articles du blog, n’hésitez pas à l’utiliser ce bouton +1 de google, il se trouve sur le menu latéral de droite du blog 😀

Bon code à tous !!!

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

12 Comments

  1. Effectivement, on peut dire que c’est une bonne synthèse !

    Post a Reply
  2. Merci pour cette revue…

    Par contre, est-ce que le fait d’intégrer ce +1 à son site permet à GG de collecter des infos sur le site en question, ou juste un nombre de clics sur le bouton ?

    Post a Reply
  3. Comme souvent avec google, il est évident qu’il collecte des info sur le site en question. (est-ce une mauvaise chose ? pas à mon avis)

    En tout cas, si tu utilises l’analytic’s de google, la question ne se pose plus, car le +1 ne récoltera jamais plus d’information que l’analytic’s de google 😉

    Post a Reply
  4. En revanche, ce inclus, qui permet au site de rassembler des informations sur le site DD, ou tout simplement en cliquant sur le bouton?

    Post a Reply
  5. Par contre, il est de l’inclure pour le site permet GG recueillir des informations sur le site, ou juste un clic de bouton?

    Post a Reply
  6. L’outil même est censé donner simplement des informations liées à un clic réalisé par un visiteur. Mais il est logique et je ne vois pas d’autres choix, que Google récupère des informations sur la page en question.

    Post a Reply
  7. Pile poil ce que je cherchais, merci pour le bout de code !

    Post a Reply
  8. En tout cas, si tu utilises l’analytic’s de google, la question ne se pose plus, car le +1 ne récoltera jamais plus d’information que l’analytic’s de google

    Post a Reply

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *