vendredi 26 septembre 2014

Blogger - Blogspot : intégrer les boutons Facebook, Twitter, Google + en haut de vos pages



Les boutons Twitter, Facebook (like), Google+, sont parmi les plus demandés par les blogueurs webmasters dans le but de rendre plus visibles leurs publications, et d'améliorer à la fois le trafic, les retours, la convivialité et la souplesse de leurs écrits. Les intégrer à votre blog (ou à toute autre plateforme) est relativement facile. Reste à savoir si vous voulez qu'ils apparaissent partout, ou bien rien que sur vos articles, ou sur votre page d'accueil...

1ère étape, préparation et appels externes

Les codes à fournir sont simples, encore faut-il bien les placer. On va commencer par préparer votre template pour recevoir les boutons, en permettant à votre blog d'appeler les scripts fournis par les sites tiers (Twitter, facebook, Google).

Comme à l'accoutumée, pour avoir accès au code de votre template, cliquez à gauche de votre écran d'admin de blogspot, sur Modèle, puis demander à "modifier le code html".

Pour Google, pas de problèmes, les appels sont déjà pris en charge par Blogger.
Pour twitter, aucun problème non plus, le boutons Twit ne fera appel qu'au moment de se charger, à des ressources externes.
Pour Facebook, par contre, la page doit être préparée. Pour cela, il suffit de copier le code suivant juste après la balise <body>

<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/fr_FR/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

2ème étape : coller le code des boutons

Là encore, c'est très facile et vous pouvez voir un exemple du résultat ici-même, en haut de cette page. Cherchez la section Post de votre template (pour la trouver, dans votre code de template, vous pouvez demander à accéder directement au widget "post". s'il n'y est pas, trouvez la ligne :

<b:includable id='post' var='post'>

Étendez-là si besoin en cliquant sur la flèche noire sur la gauche, vous aurez ainsi accès au code correspondant au traitement de vos corps d'articles. Pour placer les boutons en haut de votre page (comme sur cette page), il vaut mieux chercher l'endroit juste après le titre, et juste avant le corps de l'article : cela correspond à coller votre code de boutons juste avant la balise

<div class='post-body entry-content'>

Ne vous reste qu'à copier le code des boutons et remplir les cases *** avec vos propres informations (en exemple juste après). 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;height:30px;text-align:center;width:60px;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
  {lang: &#39;fr&#39;}
</script>
<g:plusone size='medium'/>
</div>
<div style='float:right;height:30px;text-align:center;width:100px;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='fr' data-related='***' data-via='***' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</div>

<div style='float:right;height:35px;'>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='100' expr:href='data:post.url' style='margin-right: 15px;'/>

</div><br/><br/>
</b:if>

les *** correspondent en fait au nom de votre compte twitter et son identification (@nom-de-compte). Si cela ne vous est pas nécessaire, vous pouvez simplement les enlever (supprimez alors "data-related='***' data-via='***' ". Sinon, remplacez les *** par les informations de votre compte twitter.

Exemple sur ce site

<a class='twitter-share-button' data-count='horizontal' data-lang='fr' data-related='LaMinuteCulture' data-via='LaMinuteCulture' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>

Important : 

Les balises d'ouverture et de fermeture (<b:if cond='data:blog.pageType == &quot;item&quot;'> et </b:if>) correspondent au code conditionnel vous permettant de choisir les pages dans lesquelles vous souhaitez voir apparaître le code. Ici, nous ne voulons afficher le code des boutons que sur les articles, mais pas sur les pages comme la page de contact, ou sur la page d'accueil et celles des catégories. Dans certains cas, il peut y avoir un intérêt à afficher les boutons sur la page d'accueil, comme sur le site www.le-saviez-vous.fr, ou les visiteurs voient directement, alors, les articles les plus appréciés. Vous pouvez donc supprimer ces balises ou les modifier de sorte qu'elles apparaissent à l'endroit que vous souhaitez. Vous pouvez modifier également la place du code pour définir l'endroit sur la page ou vous souhaitez que les boutons apparaissent.

Edit : vous pourriez éventuellement avoir des problèmes de compatibilité en enregistrant sur d'autres plateforme que Blogger - si c'est le cas, essayez de remplacer, dans les codes, les expressions &#39; par un guillemet simple : ' , dans les lignes : 
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>    (1)
{lang: &#39;fr&#39;}   (2)


0 commentaires:

Enregistrer un commentaire