Archive Pages Design$type=blogging

Boutons de partage dans vos articles Blogger

Sur le même sujet:

Article mis à jour le 18 janvier 2014. (Nouvelle méthode plus facile).


Vous souhaitez que vos lecteurs partagent votre blog? facilitez leur la tâche en ajoutant des boutons de partage dans vos articles.
Ces partages représentent une source très importante de trafic pour votre blog; il y a même des sites qui vivent principalement du partage de leurs articles comme Buzzfeed, 9gag, etc. Sans oublier qu'un article partagé augmentera la notoriété de votre blog, et vous apportera de nouveaux lecteurs intéressés par le contenu de votre blog.

Pour ajouter ces boutons, c'est très simple, il faut juste suivre ce tutoriel. (Merci à Rafay pour ce tuto).
Par souci de conserver un temps de chargement rapide pour votre blog, j'ai choisi 3 boutons de partage des 3 réseaux sociaux les plus utilisés: Twitter, Facebook et Google+.

Etape 1: Appliquer le CSS

Connectez vous sur Blogger, choisissez votre Blog > Modèle > Modifier le code HTML.
Cherchez " </head> " en cliquant simultanément sur la touche Ctrl et F.
Juste avant, copiez le code ci-dessous.

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>// Twitter(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src=&quot;//platform.twitter.com/widgets.js&quot;;d.parentNode.insertBefore(a, d)}})(document, &quot;script&quot;, &quot;twitter-wjs&quot;);</script><style type='text/css'>/*---- Horizontal Social Buttons Bar By RafayTutorials ---- */#SocialShareBar {float: left;border-top: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;width: 610px;margin-bottom: 20px;margin-left: -10px;margin-top: 10px;position: relative;clear:both;z-index: 9999;}.social-heading h5 {float: left;padding-right: 20px;padding-top: 13px;text-transform: uppercase;font-weight: bold;margin: 0px;padding-left: 10px;font-family: &#39;Lora&#39;,Arial,Helvetica,Geneva,sans-serif;font-size: 15px;color: #555555;}.twitter-tweet, .facebook-like, .google-plus, .comment-counter {float: left;border-left: 1px solid #eaeaea;padding-left: 18px;padding-top: 15px;padding-bottom: 10px;width: auto;height: 22px;}.comment-counter a {text-decoration: none !important;}.share-bubble{background: url(http://4.bp.blogspot.com/-dvG3kQrRsJc/UoKM0HSkjUI/AAAAAAAAAbw/jZnkyNLnS9I/s1600/Comments.png) no-repeat;height: 22px;min-width: 30px;float: left;margin: 4px 5px 0px 5px;}.google-plus {margin-left: 20px;}</style></b:if>

Etape 2: Ajouter les boutons où vous voulez.

Dans cette étape, on copie d'abord le code ci-dessous.
<!-- Horizontal Social Sharing Buttons By RafayTutorials --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='SocialShareBar'> <div class='social-heading'>  <h5>PARTAGER &#8594;</h5> </div> <div class='twitter-tweet'>  <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <div class='facebook-like'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/> </div> <div class='google-plus'>  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>  </div>  <div class='comment-counter'><div class='share-bubble'/> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a> </div>  </div> </b:if>

Maintenant, on a 2 choix: soit faire apparaître la barre contenant les boutons en tête de l'article ou à sa fin.

Choix 1: En tête de l'article, juste en dessous du titre.

On cherche en appuyant simultanément sur 'Ctrl' et 'F', le code: " <post-header-line-1> ", et juste après on ajoute le code qu'on a copié ci-haut. On enregistre le modèle, et c'est bon.

Choix 2: En bas de l'article.

On cherche en appuyant simultanément sur 'Ctrl' et 'F', le code: " <data:post.body/> ", et juste après on ajoute le code qu'on a copié ci-haut. On enregistre le modèle, et c'est bon.

C'est bon!

COMMENTAIRES

BLOGGER : 27
Loading...
Nom

astuces Facebook feature gadget Google Menu news Pages Réseaux Sociaux slider automatique templates Traduction trafic tutoriel
false
ltr
item
Blogger Pour Les Nuls: Boutons de partage dans vos articles Blogger
Boutons de partage dans vos articles Blogger
http://3.bp.blogspot.com/-_mGh3oXVcdQ/UtqeaW0LDDI/AAAAAAAAEHg/rjisOw6lVw0/s1600/Sans+titre+1888.png
http://3.bp.blogspot.com/-_mGh3oXVcdQ/UtqeaW0LDDI/AAAAAAAAEHg/rjisOw6lVw0/s72-c/Sans+titre+1888.png
Blogger Pour Les Nuls
http://blogger-pourlesnuls.blogspot.com/2012/04/boutons-de-partage-dans-vos-articles.html
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/2012/04/boutons-de-partage-dans-vos-articles.html
true
7261274087058654712
UTF-8
Aucun article trouvé VOIR TOUS Lire la suite Répondre Annuler la réponse Supprimer Par Accueil PAGES ARTICLES Voir tous RECOMMANDE POUR VOUS LIBELLE ARCHIVE SEARCH Aucun article ne répond aux critère de votre requête Back Home Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi Dim Lun Mar Mer Jeu Ven Sam Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre Jan Fév Mar Avr Mai Jun Jul Août Sep Oct Nov Déc maintenant il y a une minute Il y a $$1$$ minutes il y a une heure Il y a $$1$$ heures Hier Il y a $$1$$ jours Il y a $$1$$ semaines il y a plus que 5 semaines