Ajouter le bouton Google +1 sur son blog

Publié le 16 juillet 2011 par Delphine Dietrich 9 commentaires »

Le bouton Google +1 est déjà plus répandu que celui de Twitter ! Pour le mettre en place c’est très simple, il n’est vraiment pas nécessaire de partir à la recherche d’un plugin Wordpress qui le fasse pour vous. Cela se fait en deux étapes :

1. Appeler le script JavaScript

Tour d’abord, pour ajouter le bouton Google +1 sur une page, il est nécessaire de copier ce tag avant la balise </body> :

<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>

Pour un blog Wordpress

Si vous avez un blog édité par Wordpress, connectez-vous à votre ftp et allez chercher le fichier footer.php qui se trouve dans le dossier wp-content/themes/nom-de-votre-theme. Editez-le pour ajouter le code ci-dessus avant la balise </body>.

2. Ajouter le bouton +1

Vous pouvez maintenant ajouter le bouton +1 où vous le souhaitez sur une page. Il suffit d’ajouter le code suivant à l’endroit où le bouton doit apparaitre :

<g:plusone></g:plusone>
Paramètres

Vous pouvez définir les paramètres suivants pour :
Taille du bouton google +1

  • Choisir la taille du bouton
  • Paramètre : size
    Valeur : small, medium, standard ou tall
    La valeur par défaut est standard.

  • Afficher le compteur de +1 ou non
  • Paramètre : count
    Valeur : true ou false
    La valeur par défaut est true.

  • Choisir à quelle page attribuer le +1
  • Paramètre : href
    Valeur : l’url de la page à laquelle s’applique le +1
    La valeur par défaut est l’url de la page sur laquelle le bouton se trouve.

Voici un exemple avec tous ces paramètres définis :

<g:plusone size="medium" count="false" href="url de la page"></g:plusone>

Pour un blog Wordpress

Sur la home

Pour ajouter un bouton pour chaque article sur la home de votre blog, le code du bouton +1 est à insérer dans le fichier index.php qui se trouve dans le dossier wp-content/themes/nom-de-votre-theme.

Pour que le +1 s’applique à l’article et non à la home du blog, indiquez comme valeur du paramètre href le code suivant : <?php the_permalink() ?>. C’est l’url de la page de l’article.

<g:plusone href="<?php the_permalink() ?>"></g:plusone>
Sur la page de l’article

Ajoutez le code du bouton +1 dans le fichier single.php qui se trouve également dans le dossier wp-content/themes/nom-de-votre-theme.

Article modifié le 27 juillet pour proposer la nouvelle version du tag JavaScript mise à disposition par Google pour un chargement plus rapide (version asynchrone, actuellement disponible uniquement sur la version US de l’outil de configuration du bouton +1).

Articles liés
Publicité

9 commentaires

  1. Je suis assez réticent à fournir ce genre d’info à Google pour le moment.. Mais si la plateforme Google + devient aussi incontournable que FaceBook, je me plierai à la loi du nombre :)

  2. Bisbis dit :

    Ne fonctionne pas sur ie7 (sur mes sites mais aussi sur celui ci).
    Une parade?

  3. Delphine dit :

    Ah non Bisbis je ne sais pas, j’ai ie8 et cela fonctionne…
    Google propose sinon le code suivant pour ajouter le bouton +1 (syntaxe HTML5) :
    <div class="g-plusone"></div>
    Vous pouvez tester si cela fonctionne mieux.

  4. Bisbis dit :

    Déjà testé, ne fonctionne pas non plus…
    J’ai vu un peu partout que ce bug existait mais aucune parade.

  5. Si même Google se met à ne plus avoir la patiente de développer des choses qui fonctionnent sur toutes les versions d’IE… ;)

  6. Apparemment le bug serait résolu (testé ce matin).

    Sinon pour répondre à Robin, on est tous réticent à donner des info à l’ogre qu’est google.
    Cependant vu le nombre d’inscrit en quelques jours et vu aussi que les +1 influencent les résultats de recherche (pour ceux qui sont loggé) il est plus qu’intéressant de l’utiliser.

  7. app android dit :

    G+ est made in Google et est présenté comme un service d’accroissement de visibilité dans les résultats… Quand on sait ce que rapporte le moteur de recherches aux sites en terme de trafic…

  8. Merci pour toutes ces explications bien précises sur l’installation de G+, je pense justement l’intégrer très prochainement sur mon blog ! Je bookmark ton article :)

  9. Laurence dit :

    Je t’aime