Ajouter un bouton Google +1 à votre blog WordPress

A l’instar de Facebook avec son bouton « J’aime » ou encore de Twitter avec son compteur de re-tweet, votre blog WordPress se doit d’ajouter un bouton Google +1 pour conquérir les médias sociaux. Une technique adoptée sur WordPress Channel dont voici le tutoriel.

Le premier point consiste à générer un bout de code depuis le site officiel de Google +1.

Commencez par définir une taille d’affichage puis la langue de ce dernier. Dans mon cas, j’ai opté pour Français et Grand (60px).

Ne vous souciez pas des options avancées, elles sont pas utiles pour débuter.

Nous devons à présent insérer 2 lignes de codes de façon séparée dans le thème de votre site WordPress. Pour ce faire, 2 solutions existent :

  • Utilisez votre client FTP favori puis localisez le dossier /wp-content/themes/NOM_DU_THEME/ puis éditez le fichier en direct sur votre serveur ;
  • Éditez les fichiers depuis le menu Apparence puis Editeur du back office de WordPress ;

Je vous recommande la première solution qui permet notamment d’annuler une modification en cas d’erreur.

Ouvrez dans un premier temps le fichier header.php puis recherchez la balise </head>. Positionnez la première ligne de code juste avant celle-ci – il faut juste s’assurer que cette ligne soit dans la balise <head> :

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

Il est également possible de placer le script avant la fermeture de la balise <body> dans le footer.php. Bien que cela soit souvent considéré comme un gage de meilleurs temps de chargement de la page, il en résulte parfois des problèmes de compatibilité – pour info, ne placez jamais votre script Google Analytics dans le pied de page.

La seconde étape consiste à insérer la ligne de code suivante à l’emplacement prévu pour notre bouton Google +1 :

<g:plusone></g:plusone>

Typiquement, il convient de l’insérer dans le fichier single.php. Comme cela dépend directement de votre thème, je ne peux vous fournir un exemple concret. Pour positionner le bouton en fin d’article, placez après la balise <?php the_content(); ?>

Néanmoins, vous pouvez prendre exemple sur la zone de partage sociale présente en début d’article sur WordPress Channel en inspectant le code source. Comme d’habitude, je vous recommande d’utiliser l’extension Firebug pour Mozilla Firefox.

Google+1 tarde à décoller mais l’apport prochain des pages entreprises pourrait inverser la tendance. Et puis, il s’agit d’un moyen gratuit d’accroître sa présence sur le Web et d’en améliorer le référencement.

18 commentaires

  1. Medusa

    Merci pour tes explications, j’avais trouvé comment placer le bouton dans un widget mais je ne savais pas pour l’emplacement juste après « content ». Article bien pratique
    Ciao!

  2. Alice

    Merci pour ce tuto….Cependant, j’ai un souci sur mon blog WordPress (actuellement sur une version de dev, en sous-domaine du blog actuel)…Mon bouton +1 ne fonctionne que si je rajoute href= »l’urldemonsite » dans la balise du bouton…sinon, il affiche un point d’exclamation sur un fond rouge…
    Or, j’aimerais qu’il permette de +1 chacune des pages sur lequel il apparait….et donc chacune des url….
    Est-ce que vous avez déjà rencontré ce problème?

      1. Alice

        merci pour ta réponse Aurélien, c’est bien ce que j’ai compris. Mais j’ai découvert que mon problème ne venait pas exactement de là. En fait le bouton +1 est tellement intelligent! Eh oui car, comme je l’ai dit hier, j’ai testé le bouton sur la version dev de mon blog, sur un sous-domaine protégé par un identifiant et mot de passe! Le bouton google l’a repéré et il a bloqué de lui-même le partage de cette URL! En effet, quand je le met sur mon blog en production, le bouton fonctionne très bien. En fait, en me renseignant un peu plus, j’ai découvert que le +1 ne publiait pas n’importe quoi, il repère le duplicate content, il refuse de partager des URL contenant des infos sensibles du type infos de sessions etc….Ah la la! Merci google! je trouve ça super!

          1. Alice

            Ah oui vraiment? car pourtant, sur mon sous-domaine protégé, quand je met un href= »uneurllambdapasprotégée » dans le bouton, il fonctionne…est-ce que cela ne veut pas dire que les robots sont bien là?

  3. Formation internet

    Merci pour ce tuto,

    Il me semble qu’il est aussi possible de placer dans une ou des sidebars…? sans pour autant modifier single.php

Laisser un commentaire