Comment afficher les boutons des réseaux sociaux sur votre site ?

Publié le 08 janvier 2015 par Cibleweb

Les réseaux sociaux sont réellement importants dans votre stratégie online. C’est grâce à ces plateformes que vous allez gagner en trafic sur votre site e-commerce puisque par définition, les réseaux sociaux permettent le partage de contenus. Ces derniers ne sont pas à laisser de côté ! Bien que vous ne puissiez pas voir aux premiers abords quel est le ROI des réseaux sociaux, vous ne devez pas négliger votre présence sur ces supports.

Evidemment ce n’est pas sur Facebook, sur Twitter, Google Plus ou Linked In que vous allez pouvoir vendre vos produits de manière directe, mais ces outils vont contribuer à votre réussite. Vous allez pouvoir tisser une certaine relation avec vos clients ce qui est actuellement la pierre angulaire du marketing. Le relationnel, les communautés attachées à la marque, la fidélité client… vous connaissez ? 

Afin d’être vu, vous devez donc être présent sur les réseaux sociaux mais vous devez également permettre aux internautes de partager votre contenu : cela afin de créer du buzz autour de votre marque ou de votre entreprise. Dans le but de faire partager votre contenu, vous devez ajouter les boutons des différents réseaux sociaux sur votre site. Notez également, que Google utilise les statistiques des réseaux sociaux afin de savoir si votre contenu est populaire auprès des internautes ou pas. Du contenu largement partagé vous permettra de remonter plus facilement dans les SERPs Google.

Nous allons aujourd’hui vous guider afin de mettre en place sur votre site e-commerce ces boutons de partage. Ne vous inquiétez pas, ce n’est pas si compliqué. En effet, seulement quelques manipulations vous permettent de les afficher et chose très intéressante : vous n’avez pas besoin d’être très calé niveau technique

Mise en place du bouton Facebook

Si vous souhaitez mettre en place un bouton Facebook, notez bien que pour ce réseau social il existe différents boutons. Il y a le bouton « j’aime » et le bouton « share » qui permet de partager un contenu.

En pratique, c’est le bouton « j’aime » qui est mis en place à la fin d’un article de blog ou sur une page produit d’un site e-commerce. Ce dernier vous permet de savoir combien de personnes ont aimé votre contenu ou votre produit. Le bouton de partage est également intéressant mais il est plus contraignant pour l’internaute.

Source de l’image

Afin d’ajouter le bouton « j’aime », il suffit de copier et de coller ce code dans les sources des 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>

Notez que dans ce code, il vous faut remplacer l’URL avec la page de votre choix. Dans un deuxième temps, si vous souhaitez changer la taille et la version du bouton il faut modifier la valeur de l’attribut « type ». Vous pouvez alors remplacer cette valeur par celles citées ci-dessous :

  • type= »button »: (cadre bleu avec l’icône facebook et le texte « share »)
  • type= »button_count »: (même cadre mais avec le nombre de fois que ce contenu a été partagé)
  • type= »box_count »: (gros bouton avec un compteur du nombre de fois que le contenu a été partagé)
  • type= »icon » (petit icône carré de quelques pixels de large)
  • type= »icon_link »: (même icône mais avec le texte « share » à droite)

Mise en place du bouton Twitter

Si vous souhaitez ajouter le bouton twitter, vous pouvez directement aller sur la page twitterhttps://about.twitter.com/fr/resources/buttons#undefined qui vous permettra de choisir quel type de bouton vous souhaitez afficher. Twitter vous génère alors directement le code que vous allez devoir intégrer.

Mise en place du bouton Google Plus

Google Plus, comme Twitter, a une page dédiée afin que vous puissiez ajouter le bouton Google+1. La marche à suivre pour ajouter le bouton Google+1 est simple. Vous devez inscrire ce script en haut du code source des pages web, dans la section <head> du site ou 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>

Ensuite, il s’agit de placer le code ci-dessous à l’endroit où vous souhaitez afficher le bouton Google+1:

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

Mise en place du bouton Linked In

Il s’avère parfois que votre contenu soit réellement pertinent pour les réseaux sociaux professionnels. Il s’agit alors de proposer un outil de partage de votre article sur Linked In. Afin d’insérer le bouton de partage Linked In sur votre site, vous devez intégrer le code ci-dessous :

  1. <script type= »text/javascript » src= »http://platform.linkedin.com/in.js »></script>
  2. <script type= »in/share » data-counter= »top »></script>

Ainsi donc, même si vous n’avez aucune connaissance en code HMTL, vous pouvez par vous-même intégrer les boutons des réseaux sociaux sur votre site. Un simple copier-coller suffit ! Notez aussi que si vous travaillez avec des outils comme WordPress par exemple, des extensions existent et sont téléchargeables gratuitement. Elles vous permettent d’afficher directement toute une « barre sociale » à la fin de votre page web. Vous n’avez alors pas de code à intégrer. C’est encore plus simple !