Intégrer le bouton ‘+1′ de G+, ‘Tweeter’ de Twitter, ‘Partager’ de Facebook et ‘Pin it’ de Pinterest
Il y a quelques jours de cela, je vous avais proposé un article vous permettant d’intégrer différents boutons sur votre site Web, ou votre blog. Ces derniers permettaient à quiconque de s’abonner instantanément à votre profil, page, etc… Pour cela, nous avions vu comment ajouter le badge de Google+ (d’une page ou d’un profil personnel), le bouton « Suivre » de Twitter, le bouton « J’aime » de Facebook et enfin le bouton « Follow » du tout récent Pinterest.
L’intégration de ces derniers se fait en HTML, et on les configure à l’aide des outils que chacun des réseaux proposent sur leur plateforme en ligne.
Suite à cet article, j’ai eu quelques retours sur Twitter ou encore par mail, afin de vous expliquer comment intégrer les autres boutons tout aussi intéressants de ces réseaux. Il s’agit du bouton « +1″ de Google+, le « Tweet » de Twitter, le « J’aime » de Facebook et le « Pin it » de Pinterest. Ces derniers, à défaut de proposer un abonnement, vont vous permettent de recommander des contenus qui valent le détour sur le Web !
Autrement dit, en plus d’incrémenter généralement un petit compteur, vous allez surtout partager sur le réseau social concerné généralement le titre de l’article, ou de la page que vous êtes en train de consulter.
Ces boutons vont être indispensables dès lors que vous souhaitez que vos articles aient un maximum de visibilité. En effet, qui de mieux que vos lecteurs pour relayer l’information à leur propre communauté ?
Sans plus attendre, voici comment installer ces boutons facilement sur votre site. De plus, vous aurez une partie dédiée à l’intégration spécifique dans WordPress.
Intégrer le bouton « +1″ de Google+
Le géant de Mountain View nous met à disposition une solution rapide grâce à son outil en ligne afin de générer le code à insérer sur son site Web du bouton « +1″. Je vous avais déjà présenté un article afin de l’intégrer mais celui-ci a été modifié depuis son lancement.
- 1 – Rendez-vous sur la page suivante afin de doter votre site d’un bouton +1
- 2 – De là, personnalisez votre bouton : taille, annotation, largeur, langue
- 3 – Si vous le souhaitez, sachez que vous pouvez accéder à des options avancées : asynchrone, syntaxe HTML5, moment de l’analyse, etc…
- 4 – Enfin, récupérez votre code (Obtenir le code) afin de le copier dans votre site
Une fois ces étapes terminées, placer cette balise là où vous souhaitez que le bouton s’affiche :
<!-- Placez cette balise là où vous souhaitez positionner le bouton +1. --></pre>
<div class="g-plusone" data-size="tall" data-annotation="inline"></div>
<pre>
<!-- Placez cet appel d'affichage à l'endroit approprié. -->
<script type="text/javascript">// <![CDATA[
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>
Voici le rendu :
Intégrer le bouton « Tweet » de Twitter
Outre le fait de partager une publication sur Google+, le bouton « tweet » de Twitter permet à tout utilisateur qui a aimé une page de votre site, ou encore un article, de partager l’URL sur le flux de Twitter en un seul clic. De plus, le bouton va également permettre de vous retrouver sur Twitter.
Voici la marche à suivre pour l’intégrer :
- 1 – Rendez-vous sur la page suivante afin d’ajouter le bouton « Tweeter » à votre site
- 2 – De là, personnalisez votre bouton :
- Partager l’URL : Vous avez le choix entre « Utiliser l’URL de la page » ou définir votre propre URL. Laissez la première option vous ne vous poserez pas de question…
- Texte du Tweet : Vous pouvez utiliser le titre de la page, ou définir votre propre texte !
- Via : En remplissant ce champ, vous allez pouvoir ajouter le « via @xxx » lors du tweet
- Recommander : Tout comme le « via » le champ « recommander » permet d’ajouter le pseudo d’une personne que vous souhaitez recommander ! Cela s’avèrera pratique pour des pages partielles
- Hashtag : Ce champ permet de définir les hashtags de Twiiter, qui sont un moyen pour ajouter des informations additionnelles aux tweets pour les catégoriser selon un contexte
- 3 – Puis, choisissez la langue de votre bouton
- 4 – Enfin, récupérez votre 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 class="twitter-share-button" href="https://twitter.com/share" data-via="Lryo17" data-lang="fr" data-size="large" data-hashtags="BlogNT">Tweeter</a>
<script type="text/javascript">// <![CDATA[
!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>
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 le data-via avec votre nom de profil, et éventuellement le data-hashtags
Voici le rendu :
Intégrer le bouton « Partager » de Facebook
L’intégration du bouton « Partager » de Facebook est très simple.
Pour l’intégrer, il vous suffit de copier et coller le code à l’endroit désiré. 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.
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Partager</a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Voici le rendu :
Intégrer le bouton « Pin it » de Pinterest
L’ajout du bouton « Pin it » sur vos pages permettra à vos lecteurs de réaliser un « pin » sur Pinterest. Si vous souhaitez ajouter ce bouton voici la démarche à suivre :
- 1 – Rendez-vous sur la page suivante afin d’ajouter le bouton « Pin it » à votre site
- 2 – De là, allez dans la section « Pin It Button for Websites »
- 3 – Choisissez l’URL de page pour lequel vous voulez réaliser un « pin », l’URL de votre image et une description si vous le souhaitez
- 4 – Définissez le type de votre bouton : horizontale / verticale
- 5 – Enfin, récupérez le code s’affichant afin de le copier dans votre site
Pour l’intégrer, il vous suffit de copier et coller le code à l’endroit désiré. 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 les éléments suivants : URL_Webpage et URL_Image.
<a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url=URL_Webpage&media=URL_Image">Pin It</a> <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
Voici le rendu :
Intégration dans WordPress
Maintenant que nous avons vu comment intégrer ces boutons de façon générique sur vos sites, blogs, etc… je vais vous donner le code source afin d’intégrer chacun d’eux sur un blog WordPress. Voici comment procéder :
<!-- Twitter : pensez à remplacer le data-via -->
<a href="http://twitter.com/share" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?> |" class="twitter-share-button" data-count="vertical" data-via="Lryo17" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Facebook -->
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Partager</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<!-- Google+ -->
<g:plusone size="tall"></g:plusone>
<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>
<!-- Pinterest -->
<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo get_post_meta(get_the_ID(), 'Thumbnail', true); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
Conclusion
Entre les boutons permettant à quiconque de s’abonner instantanément à votre profil, page, et ces derniers permettant de partager vos articles, pages, votre site devient donc plus social !
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.
Pour en savoir plus sur l'auteur de cet article... Yohann a fondé le Blog des Nouvelles Technologies en 2010. Autodidacte en matière de développement de sites en PHP, j’ai toujours poussé ma curiosité sur les sujets et les actualités du Web. Je suis actuellement engagé en tant qu'architecte interopérabilité. En savoir plus sur cet auteur...
Follow @Lryo17
Articles similaires
Articles récents
Sasque
OGρ
Angélique Lailler
Dadkill
naahnou
Pingback: A lire | Pearltrees
Pingback: Intégrer le bouton ‘+1′ de G+, ‘Tweeter’ de Twitter, ‘Partager’ de Facebook et ‘Pin it’ de Pinterest « L'info "Autrement" cftc hus
Pingback: Intégrer le bouton ‘+1′ de G+, ‘Tweeter’ de Twitter, ‘Partager’ de Facebook et ‘Pin it’ de Pinterest | Cdfi-Hebergement - Le Fil Infos | Scoop.it