Comment ajouter le bouton Google +1 sur WordPress en 3 étapes

Dans la droite lignée des boutons Twitter, Facebook, Linkedin, et j’en passe, Google sort sa toute dernière nouveauté, le bouton Google +1. Disponible depuis le 1er juin 2011, le bouton +1 introduit un nouveau concept de recherche que je qualifierais de « socialisée ». Voici 3 étapes pour ajouter facilement le bouton Google +1 sur votre blog WordPress.

Comment ajouter le bouton Google +1 sur WordPress en 3 étapes

Le bouton +1 de Google est un widget social de recommandation. En gros, en cliquant sur le bouton +1, vous faites savoir à vos contacts, à vos amis et à d’autres personnes qu’un site, blog ou article vous a plu. Très utiles, vos +1 apparaîtront dans les résultats de recherche (juste à côté du titre). Si vous êtes blogueur, vous y trouverez un intérêt en matière de trafic organique et de référencement (critère de SEO supplémentaire).

Sans plus attendre, le tutoriel de 3 étapes :

1 – Tout d’abord, il vous faut modifier le modèle de thème « En-tête » (header.php).
–> Catégorie Apparence/Editeur/En-tête

Placez le code ci-dessous dans la section <head> et avant la balise de fermeture </body>.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'fr'}
</script>

2 – Ensuite, afin d’ajouter le bouton Google +1 sur vos articles, il vous faut modifier le modèle de thème « loop.php » (loop.php).
–> Catégorie Apparence/Editeur/loop.php

Placez-y l’un des codes ci dessous, en fonction de la taille souhaitée (petit, standard, moyen, grand):


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


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


<g:plusone></g:plusone>
 


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

3 (Optionnel) – Si vous souhaitez « styliser » l’intégration de votre bouton Google +1 (à droite de votre article), vous pouvez placer le code ci-dessous, toujours dans le modèle de thème « loop.php », par exemple après la balise de fermeture </div><!– .entry-meta –> :

 

<div class="plusone">
  <g:plusone size="medium"></g:plusone>
</div>

 

Ensuite, placez le code suivant dans votre « Feuille de style » (style.css) –> Catégorie Apparence/Editeur/Feuille de style

 
.plusone { float: right; }
 

Articles connexes:

  • http://www.facebook.com/people/Visa-Japon/100002501295591 Visa Japon

    Bonjour Julie et merci pour ton superbe site,

    Je n’ai pas de page (loop.php) dans la section indiqué,
    Quelle extension utilisez-vous pour la bar PARTAGER L’ARTICLE ?

    Merci beaucoup.

    • http://apprendreabloguer.com Julie Marianna David

      Bonjour, si tu utilises wordpress, la page loop devrait normalement figurer dans les modèles de thème. Concernant la barre « Partager l’article », il n’y a pas d’extension, cela a été codé manuellement.

  • http://www.debock-informatique.fr Vince

    Coucou, il est également possible pour les novices ou pour ceux qui n’utilisent pas le fichier loop.php d’installer le plugin Google +1 button.