Aujourd’hui, je décide de partager avec vous comment ajouter le badge de Google+, le bouton « Suivre » de Twitter, le bouton « J’aime » de Facebook et enfin le bouton ‘Follow’ du tout récent Pinterest, au sein de votre site Web ou encore dans votre blog. Ces quatre boutons ont été introduits plus ou moins récemment, vous devez donc tous les connaitre. Dans un premier temps, nous avons vu le bouton de Facebook arriver, puis celui de Twitter, puis Google qui a également rejoins les deux précédents réseaux sociaux et enfin le tout dernier le bouton de Pinterest.
L’idée principale derrière ces intégrations, est de permettre à quiconque de s’abonner instantanément à votre profil, page, etc… De plus, il parait que plus vous avez de followers, autrement dit des adeptes, vous êtes influents et tout le monde vous écoute, alors n’hésitez pas !
Certes, ce n’est pas tout jeune mais j’ai reçu plusieurs demandes par mail pour savoir comment faire, d’où cet article.
De plus, comme je l’ai mentionné dans le précédent article, Google a introduit un nouveau badge pour intégrer un badge de votre propre profil, de quoi vous expliquer comment faire.
Pour Pinterest, le service étant tout récent vous trouverez peu de ressources sur le Web pour l’insérer.
Donc, sans perdre de temps nous allons voir comment installer ces boutons facilement sur votre site.
Intégrer le badge Google+ pour une marque / entreprise
J’ai déjà aborder cette notion dans un précédent article, je vais me contenter de le recopier ici. Voici comment créer et personnaliser votre badge de votre page Google+ :
- 1 – Rendez-vous sur la page suivante afin d’associer votre page Google+ à votre site
- 2 – De là, notez l’identifiant de votre page dans le champ prévu à cet effet (« Lien vers cette page Google+ »)
- 3 – Choisissez le style de votre bouton : Icône, Petit badge ou Badge standard. Veuillez noter que pour le badge Icône vous pouvez personnaliser son nom, et choisir la taille de ce dernier
- 4 – Puis, personnalisez votre badge (non disponible pour un badge Icône) : largeur de votre badge, fond clair ou noir, langue, code HTML5 strict ou non, mode de chargement
- 5 – Enfin, récupérez votre code (Obtenir le code) afin de le copier dans votre site
Note : Dans la suite de cet article, j’ai choisi un badge standard avec une syntaxe HTML5 stricte. Le reste des options étant celles par défauts. Veuillez noter que cela aura un impact sur le code source à coller
Une fois ces étapes terminées, vous allez devoir vous rendre dans le code source de votre site Web, ou blog. Dans les deux cas, vous allez devoir placer cette balise dans la balise <head> de votre document. Pour un blog, vous trouverez généralement cette balise dans le fichier header.php de votre thème.
<!– Placez cette balise dans la section <head> de votre document. –>
<link href="https://plus.google.com/116475369142621368056" rel="author" />
<script type="text/javascript">
window.___gcfg = {lang: ‘fr’};
(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>
[/sourcecode]
Puis de placer cette balise là où vous souhaitez que le badge s’affiche :
<!– Placez cette balise là où vous souhaitez que le badge s’affiche. –>
<div class="g-plus" data-href="https://plus.google.com/103646675522197974610" data-width="300" data-height="131" data-theme="light"></div>
[/sourcecode]
Voici le rendu :
Intégrer le badge Google+ de votre profil
Une fois le badge de votre marque, entreprise intégré vous voudrez peut-être ajouter le badge de votre propre profil. En effet, c’est une nouvelle fonctionnalité apportée par Google la semaine dernière.
L’intégration de celui-ci est identique à la manipulation ci-dessus. Ainsi, vous allez pouvoir créer un badge qui permet aux visiteurs de votre site Web de s’abonner à vos mises à jour afin de les ajouter dans leur flux. Voici comment procéder :
- 1 – Rendez-vous sur la page suivante afin d’associer votre profil Google+ à votre site
- 2 – De là, notez l’identifiant de votre profil dans le champ prévu à cet effet (« Enter a Google+ profile ID ». Le libellé n’est pas traduit pour le moment)
- 3 – Choisissez le style de votre bouton : Icône, Petit badge ou Badge standard. Veuillez noter que pour le badge Icône vous pouvez personnaliser son nom, et choisir la taille de ce dernier
- 4 – Puis, personnalisez votre badge (non disponible pour un badge Icône) : largeur de votre badge, fond clair ou noir, langue, code HTML5 strict ou non, mode de chargement
- 5 – Enfin, récupérez votre code (Obtenir le code) afin de le copier dans votre site
Le principe d’intégration dans votre site Web, ou blog, reste identique à la méthode précédente.
Voici le rendu :
Avec ce bouton, désormais tout le monde peut vous suivre sur le réseau social de Google+
Intégrer le bouton « Suivre » (Follow) de Twitter
Peu après la sortie du bouton « Send » de Facebook, Twitter a décidé de sortir son propre bouton, intitulé « Suivre ». Selon les analystes, ce dernier est très utile car il est supposé diminuer le taux de rebond de votre site et augmenter vos pages vues. Maintenant que je viens de vous dire ceci, vous voulez l’intégrer non ?
Ok, et bien sachez que c’est très facile. Voici la marche à suivre :
- 1 – Rendez-vous sur la page suivante afin d’ajouter le bouton « Suivre » à votre site
- 2 – De là, notez votre nom d’utilisateur dans le champ prévu à cet effet (« Identifiant : @ »)
- 3 – Puis, personnalisez votre bouton : afficher le pseudonyme, bouton large ou encore la langue
- 4 – Enfin, récupérez votre code (Aperçu et code) afin de le copier dans votre site
Pour l’intégrer, il vous suffit de copier et coller le code ci-dessous dans le code HTML de votre site à l’endroit désiré :
<a href="https://twitter.com/Lryo17" class="twitter-follow-button" data-show-count="false" data-lang="fr">Suivre @Lryo17</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
[/sourcecode]
Si vous souhaitez disposer du code tout de suite, c’est-à-dire sans passer par la page développeur de Twitter, insérez le code ci-dessus et remplacer les références à « Lryo17 » avec votre nom de profil.
Voici le rendu :
Note : À noter que Twitter propose également d’autres boutons que vous pouvez ajouter à votre site web pour aider vos lecteurs à partager votre contenu et à vous retrouver sur Twitter
Intégrer le bouton « J’aime » de Facebook
Enfin, le dernier bouton à intégrer sur votre site Web, ou votre blog, est le « J’aime » de Facebook. Il sera également possible d’insérer par la même occasion le bouton « Envoyer ». Ce dernier vous permet d’envoyer votre contenu favori au sein d’un groupe sélectionné, comme un message ou encore un mail. Astucieux, n’est-ce pas ? Utile dès lors que vous voulez partager du contenu à vos amis sans quitter le site !
Le bouton « J’aime » quant-à lui permet aux internautes visitant vote site de déclarer si oui ou non ils aiment votre article et/ou ce dernier.
Techniquement voici comment ça se passe :
- 1 – Rendez-vous sur la page suivante afin d’ajouter le bouton « J’aime » et « Envoyer » à votre site
- 2 – De là, renseignez l’URL de votre page à aimer, dans le champ prévu à cet effet (« URL to Like »)
- 3 – Puis, personnalisez votre bouton les options présentées : afficher oui ou non le bouton « Envoyer », le style de la boîte, la largeur, la couleur, etc…
- 4 – Enfin, récupérez votre code en cliquant sur le bouton (Get Code) afin de le copier dans votre site
Une fois ces étapes terminées, vous allez devoir vous rendre dans le code source de votre site Web, ou blog. Dans les deux cas, vous allez devoir placer cette balise juste après la balise <body> de votre document. Pour un blog, vous trouverez généralement cette balise dans le fichier index.php de votre thème.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=132718406819887";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
[/sourcecode]
Puis de placer cette balise là où vous souhaitez que le badge s’affiche :
<div class="fb-like" data-href="https://www.facebook.com/pages/Blog-des-Nouvelles-Technologies/164415300271975" data-send="true" data-width="450" data-show-faces="true"></div>
[/sourcecode]
Voici le rendu :
Si vous souhaitez disposer du code tout de suite, c’est-à-dire sans passer par la page développeur de Facebook, insérez le code ci-dessus et remplacer le contenu de l’attribut data-href, ici https://www.facebook.com/pages/Blog-des-Nouvelles-Technologies/164415300271975, par l’URL de la page pour laquelle vous souhaitez que le bouton « J’aime » soit associé.
Intégrer le bouton « Follow » de Pinterest
Avez-vous entendu parler de Pinterest ? Sûrement puisque le réseau est en train de prendre une toute autre dimension depuis quelques semaines grimpant quasiment plus vite que Twitter voir Facebook… L’idée de se réseau social, est de trier et ranger facilement tous vos favoris au fur et à mesure de vos ajouts, les partager, épingler (« pin ») sur votre tableau de bord, photos, vidéos, etc… Le côté social vient du fait que vous pouvez marquer votre intérêt pour une photo ou une vidéo (« like »), voire en la repostant (« repin ») pour en faire profiter sa propre communauté
Maintenant si vous voulez vous-même intégrer le bouton « Follow » sur votre site et/ou blog et ainsi participer à la croissance de se service, l’équipe de développement de Pinterest à pensé à vous ! Le principe reste quasiment identique à ce que peut proposer les autres services sociaux. Voici les étapes à suivre :
- 1 – Rendez-vous sur la page suivante afin d’ajouter le bouton « Follow » à votre site
- 2 – De là, allez dans la section « “Follow Button” for Websites »
- 3 – Choisissez le bouton que vous voulez afficher sur votre site
- 4 – Enfin, récupérez le code s’affichant à la droite du bouton afin de le copier dans votre site
Note : Il se peut qu’au moment où vous lisez vous n’ayez pas de compte sur le site. Si c’est le cas vous pouvez vous inscrire ou me demander une invitation dans la partie commentaire ci-dessous
Pour l’intégrer, il vous suffit de copier et coller le code ci-dessous dans le code HTML de votre site à l’endroit désiré :
<a href="http://pinterest.com/lryo/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Follow Me on Pinterest" /></a>
[/sourcecode]
Si vous souhaitez disposer du code tout de suite, c’est-à-dire sans passer par la page développeur de Pinterest, insérez le code ci-dessus et remplacer la référence à « Lryo » avec votre nom de profil.
Voici le rendu :
Conclusion
Maintenant, vous voilà armé pour insérer tous les boutons sur votre site/blog. Votre site devient donc plus social ! Je pense que je ferais un petit article pour insérer cette fois les boutons de partage des réseaux sociaux.
Si vous rencontrez des problèmes n’hésitez pas à me poser des questions dans la partie commentaires ci-dessous, j’y répondrais au plus vite.
