Ajouter les boutons des réseaux sociaux sur son site - Tutoriel pour Webmasters  

Accueil > Tutoriels pour Webmasters > Ajouter les boutons des réseaux sociaux sur son site

Ajouter les boutons des réseaux sociaux sur son site

Les réseaux sociaux (Facebook, Twitter, Google+ ...) sont devenu une part importante dans l'apport de trafic d'un site web. Des simples petits boutons permettent de rediffuser l'adresse d'une page web à l'ensemble de son réseau sur un site tel que Facebook. Ce tutoriel explique comment installer facilement les boutons Facebook, Twitter, Google+ et Linkedin sur son site, sans nécessairement avoir des connaissances techniques.


Image d'exemple de boutons de réseaux sociaux

Intérêts des boutons

Il suffit d'un clic sur un bouton pour qu'une page web soit montrée à plusieurs centaines ou plusieurs milliers de personnes (qui eux-même peuvent transférer à nouveau l'information). Dès lors on comprend à quel point un simple petit bouton peu booster le nombre de visiteurs sur un site web.

Par ailleurs, il est judicieux de savoir que les moteurs de recherche peuvent utiliser les statistiques des réseaux sociaux pour savoir si une page est populaire. Cela permet donc d'influencer le classement d'une page dans les résultats de recherche de Google (par exemple) et donc influer une nouvelle fois sur l'apport de trafic d'un site.

Ajouter le bouton Twitter

Twitter possède une page pour ajouter le bouton de Tweet. Mais d'une manière générale vous pouvez simplement copier/coller le script suivant dans le code source de vos pages web:

  1. <a href="http://twitter.com/share" class="twitter-share-button" 

  2.   data-count="vertical" data-via="InfoWebMaster">Tweet</a>

  3. <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Il faut savoir que le texte dans "data-via" (ici: "InfoWebMaster") doit correspondre au nom de votre compte Twitter. De cette façon lorsqu'un visiteur cliquera sur le lien pour lancer un Tweet, le contenu du message du Tweet ressemblera à: "Titre de l'article (le titre dans le haut de la page) http://lien-raccourci @InfoWebMaster". C'est pour cette raison qu'il faut optimiser au mieux le titre en haut des pages.

Ajouter le bouton Facebook

Le célèbre réseau social Facebook possède plusieurs deux grandes sortent de boutons, le bouton "j'aime" ("like" en anglais) et le bouton "share" pour partager un contenu. Il est recommander de privilégier le bouton "j'aime" qui est plus récent et qui permet de savoir combien d'autres personnes aiment la page web. Par ailleurs, le bouton de partage nécessite que l'utilisateur confirme sur Facebook qu'il souhaite partager l'adresse d'une page web à l'ensemble de son réseau. Ça réduit le spam mais c'est trop long et contraignant pour vos visiteurs.

Ajouter le bouton "j'aime"

L'une des façon d'ajouter le bouton "j'aime" de Facebook [en] consiste à copier/coller le code ci-dessous dans les sources de ses pages web.

  1. <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.example.com/page.html&layout=box_count&show_faces=true&width=65&action=like&font=arial&colorscheme=light&height=65" 

  2.   scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:65px; height:65px; margin-top:3px;" allowTransparency="true"></iframe>

Important: ici dans un soucis de clarté du code, des retours à la ligne ont été utilisé. Mais lorsque vous copier/coller ce code, il est possible de tout mettre sur une même ligne. Et il faut aussi modifier l'URL avec la page de votre choix.

Ajouter le bouton de partage (bouton "share")

Il suffit cette fois-ci de copier-coller ce script dans le code de vos pages web:

  1. <a name="fb_share" type="box_count" share_url="http://www.example.com/page.html"></a>

  2. <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Attention: il faut bien penser à inscrire l'URL de la page à partager (remplacer la valeur de l'attribut "share_url").

Pour changer la taille et la version du bouton il faut modifier la valeur de l'attribut "type". Les valeurs possible sont les suivantes:

  • type="icon": toute petite icône carré de quelques pixels de large
  • type="icon_link": la même icône avec le texte "share" à droite
  • type="button": un cadre bleu avec l'icône facebook et le texte "share"
  • type="button_count": le même cadre que précédemment avec le nombre de fois que ce contenu a été partagé
  • type="box_count": un gros bouton avec un compteur du nombre de fois que le contenu a été partagé

Ajouter le bouton Google+

Google à lui aussi une page pour que les webmasters ajoutent un bouton Google+1 sur leur site. Les boutons sont à peu prêts similaires à ceux de Twitter. Pour un affichage similaire au code précédent, il faut effectuer les étapes suivantes.

1) Placer le script suivant en haut du code source des pages web, dans la section <head> du site ou juste avant la balise de fermeture </body> tout en bas des pages web.

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

  2. {lang: 'fr'}

  3. </script>

Astuce : il est recommandé de placer ce code plutôt à la fin des pages. Cela oblige le navigateur à télécharger et afficher tous les autres éléments de la page et donc à afficher la page le plus tôt possible au visiteur. Le bouton peut apparaître quelques centaines de millisecondes plus tard sans trop ralentir l'affichage du reste de la page.

2) Placer le code suivant à l'endroit où il faut afficher le bouton Google+1:

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

Il convient de savoir que lorsque l'ont est pas connecté à son compte Google et qu'on clique sur ce bouton, une petite fenêtre s'ouvre pour demander de se connecter à son compte Google.

Ajouter le bouton Linkedin

Si votre site peut être utile pour des professionnels, alors le réseau social Linkedin peut s'avérer être une bonne plate-forme pour partager l'adresse de vos articles. Sans nécessairement viser à obtenir des centaines de visiteurs, ce réseau peut simplement être utile pour obtenir des contacts professionnels ou des clients potentiels. Tout comme les autre réseaux sociaux, il est possible d'ajouter le bouton Linkedin grâce à un petit script à insérer sur ses pages web:

  1. <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>

  2. <script type="in/share" data-counter="top"></script>

A savoir: pour avoir un bouton plus petit il suffit de remplacer l'attribut "data-counter" avec la valeur "right". Et pour faire un bouton encore plus petit il suffit de supprimer l'attribut "data-counter".

Ajouter le bouton Windows Live

Windows Live possède son propre système de partage. Malheureusement il est moins aboutit et il faut créer soi-même une image qui ressemble aux boutons des autres réseaux sociaux. Une fois que c'est fait, il est possible de copier/coller le code suivant sur ses pages web:

  1. <a href="http://profile.live.com/badge?url=http://www.example.com/page.html" target="blank">

  2. <img src="image/image-partage-windows-live.jpg" alt="Partager sur Messenger" />

  3. </a>

Il faut personnaliser l'adresse à partager et adapter l'URL de l'image selon son emplacement sur votre site web. Mais une fois que c'est fait le code est opérationnel.