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 == "item"'><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="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");</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: 'Lora',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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1OdbldaL7eh2jiL5Gj5wh2lavVpw1rbP7n0qU3cY1TO7YTiwk-_leX4jN6wEUTtt3wC66iRgD1KJxWvLDKpFd28akXrXiEo59xCRnuI6CnkcW0LPlKbwe0uzOr9O2gTqADkF76F6B3rw/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 == "item"'><div id='SocialShareBar'> <div class='social-heading'> <h5>PARTAGER →</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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' 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!
bonjour,
RépondreSupprimercette méthode me paraît simple... cela fait plus de deux heures que j'essaie (déjà au moins 6 façons différentes de testées) et à chaque fois : pas de bouton "j'aime" sur ma page.
Je désespère. Que faire de plus? (à part abandonner)
Tu peux m'envoer le code de ta template que j'examine d'ou vient l'erreur? dottk@hotmail.fr
SupprimerBonjour et merci
RépondreSupprimerJ'ai fait la manip, je l'ai un peu modifiée et ça marche. Le problème c'est maintenant que ma page est beaucoup plus longue à charger.
y a t il une solution pour éviter ça?
Ce commentaire a été supprimé par l'auteur.
SupprimerBonjour
RépondreSupprimerJe cherche à mettre dans ma barre de bouton à partager blogger le bouton "Pin it", pinterest propose un lien mais qui apparement est à mettre à chq fois, existe t il qq chose d'automatique ??
Merci beaucoup !
Bonsoir valérie,
SupprimerIl est possible de mettre le bouton pin it dans cet article: http://blogger-pourlesnuls.blogspot.com/2012/07/bouton-de-partage-blogger-horizantaux.html
Comme celui existant sur mon blog
Bonjour,
RépondreSupprimersuper simple à installer, merci pour le tuto.
Par contre le bouton "like" n'a pas l'air de fonctionner, comment corriger ca?
http://leschaussettessauvages.blogspot.fr/
Salut!
SupprimerEn effet, après examen de ton blog, j'ai realisé que tu as opté pour les bouton flotants, et le bouton j'aime (like) marche nickel: http://i.imgur.com/cbZjA.png
Le "j'aime " s'affiche en effet mais lorsqu'on clic dessus le compteur ne semble pas fonctionner contrairement à celui de G+.
RépondreSupprimerBonjour,
RépondreSupprimerj'ai essayé de faire cette manip, mais impossible de trouver les codes et dans le code html de mon blog... Sais-tu comment résoudre ce problème? ou bien est-ce que je regarde au mauvais endroit? Voilà l'adresse du blog : http://2soeursenaiguilles.blogspot.fr/
merci.
je parle des codes post-header-line-1 et data:post.body, ils ont été effacés dans mon premier message
SupprimerProblème résolu il fallait cocher "Développer des modèles de gadgets" pour que ça marche... Merci pour ton tuto en tous cas.
RépondreSupprimerRavi que tu as pu trouver le problème par toi même ;)
SupprimerDesolé, j'étais en voyage dans une zone sans internet
Bonjour,
RépondreSupprimerje viens de te poster un fichier XML d'un blog où la manip des boutons share ne marche pas.
Si tu as une idée, je suis preneur.
Je te remercie d'avance.
Alexandre
bonjour, je voudrais supprimer les boutons de partages qui ce sont mis automatiquement sur mon blog ... comment faire ?! Merci !
RépondreSupprimerPour supprimer les boutons de partage de ton blog, tu suis ces étapes:
Supprimer1 - connecte toi à blogger
2 - Choisis ' Mise en page '
3 - Dans le widget nommé ' Message du blog ', tu cliques sur le bouton modifier
4 - Une page apparaît, et tu décoches le bouton, comme sur la photo: http://i.imgur.com/giVT9.jpg
Hello, je ne trouve pas :(
RépondreSupprimerdésolé, je ne trouve pas le code < data:post.body/ >
RépondreSupprimerSalut Gwen!
SupprimerAs tu pensé à cocher ' Développer des modèles gadget ' en haut ?
Bonjour, je suis novice... Je viens d'effectuer la manip ci-dessus mais rien, je ne vois pas de boutons de partage. De plus, dans mes pages supplémentaires, il n'y a pas la fonction "commentaires".
RépondreSupprimerJe sais, ya du boulot! mais merci de m'aider
Bonjour, merci pour le tuto mais comment ajouter "une image" ou un logo sur le wall facebook lié à mon blog blogger ?
RépondreSupprimerBonjour,
RépondreSupprimerComme certains autres bloggers mon bouton like ne fonctionne pas
Une idée du pourquoi ?
Merci.
Voilà le lien de mon blog (en construction)
http://missionwallstreet.blogspot.fr/
Bonjour, j'ai suivi la manip mais aucun bouton de partage n'apparait sous mes articles... Je ne sais pas d'où ça vient.
RépondreSupprimerBonjour je viens de la tester sur mon site http://www.conseildebeaute.net et ca marche . Merci beaucoup
RépondreSupprimerBonjour, je viens de faire la manip, mais je n'ai aucun bouton qui apparait, que ce soit apres le titre de l'article, ou en bas de l'article
RépondreSupprimerBonjour, j'aurais aimé savoir comment faire pour que mes articles soient directement publiés sur ma page Facebook? Merci et bonne soirée
RépondreSupprimerBonjour,
RépondreSupprimerPour ma part le 2e code n'apparaît pas.
Il n'existe pas dan le code, ce qui fait que je ne sais pas où placer le code pour que les boutons apparaissent en haut de l'article.
Merci.
Bonjour, dans mon blog, les personnes ont la possibilité de s'abonner sauf que.....ils ne reçoivent pas les notifications lors de nouveaux articles. J'ai tout essayé.. je suis bloquée ..merci de m'orienter
RépondreSupprimerEnregistrer un commentaire