Comment afficher des boutons de partage sur Blogger ?


Sur Blogger, il est possible d’afficher des boutons de partage en bas de chaque article pour permettre à vos visiteurs de les relayer sur Facebook, Twitter, Pinterest et Google +. Dans cet article, je vais vous montrer comment activer cette fonctionnalité mais aussi comment régler le problème quand les boutons de partage ne s’affichent pas !

Afficher les boutons de partage sur Blogger

Blogger propose par défaut une petite barre de boutons de partage sur les réseaux sociaux qui ressemble à ça :

Boutons de partage sur les réseaux sociaux

Elle s’affiche en bas de chaque article et offre différentes possibilités de partage :

  • Partager l’article par e-mail avec des amis.
  • Reposter l’article sur son propre blog Blogger sous forme d’un lien accompagné des premiers mots de l’article en question.
  • Partager l’article sur les réseaux Twitter, Facebook, Pinterest ou Google +.

Pour afficher ces boutons de partage, il suffit d’aller dans le menu Mise en page puis de cliquer sur « Modifier » dans la zone « Articles du blog » qui s’affiche à l’écran.

Modifier les options d'affichage sur Blogger

C’est à cet endroit que vous pouvez modifier certains paramètres d’affichage de vos articles : choisir si vous affichez des mots clés dessous, choisir le mode d’affichage de la date, etc. Il suffit de cocher la case « Afficher les boutons Partager » pour activer l’option qui nous intéresse. Cette case sera grisée dans le cas d’un blog privé.

Afficher des boutons de partage sur Blogger

Un peu plus bas, vous pouvez même modifier l’emplacement où s’affichent les fameux boutons de partage, par un simple glisser-déplacer :

Changer l'emplacement des boutons de partage

En principe, les boutons de partage doivent maintenant s’afficher sous vos articles… mais parfois, vous allez constater que ce n’est pas le cas. Soit parce que vous utilisez un thème qui ne les prend pas en charge, soit parce que vous avez bidouillé votre thème et supprimé une ligne par erreur (je vous vois froncer les sourcils mais si, si, ça arrive à des gens très bien !). Je vais donc maintenant vous expliquer comment faire si les boutons de partage ne s’affichent pas.

Au secours, les boutons de partage ne s’affichent pas !

Sur Blogger, pour ajouter une fonctionnalité (par exemple le partage sur les réseaux sociaux), il faut que deux éléments soient présents : un code commençant par « b:includable » qui précise le contenu de la fonctionnalité en question… et un autre code commençant par « b:include » à l’endroit où on veut afficher cette fonctionnalité.

La plupart du temps, quand vos boutons de partage ne s’affichent pas, ça signifie que l’un ou l’autre de ces éléments – voire les deux – est manquant. Nous allons donc devoir les ajouter à votre design. Vous l’aurez compris, nous avons donc trois cas de figure :

  • Cas n°1 : l’include est présent mais pas l’includable.
  • Cas n°2 : l’includable est présent mais pas l’include.
  • Cas n°3 : Il n’y a ni l’un ni l’autre.

Vous allez me dire : « mais qu’est-ce que j’en sais, moi ? » Pas de panique ! Je vais vous expliquer comment détecter la présence de ces éléments. Mais avant toute chose, sauvegardez votre design. En cas de problème, il vous suffira de remettre en ligne l’ancienne version.

Dans le menu « Modèle » de Blogger, cliquez sur le bouton « Modifier le code HTML ».

Modifier le code HTML sur Blogger

Vous allez ensuite chercher si deux lignes de code sont présentes ou pas. Pour faire une recherche, cliquez une fois avec votre souris dans la zone où est écrit le code puis faites Ctrl + F (sur PC) ou Cmd + F (sur Mac). Vous devriez voir apparaître un petit champ de recherche, comme ici :

Faire une recherche dans un modèle Blogger

  • Cherchez d’abord si la ligne <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/> est présente ou pas. Parfois, elle apparaîtra sous une autre forme : <b:include data='post' name='shareButtons'/>. Si l’une de ces variantes est là, « l’include est présent ».
  • Cherchez ensuite si la ligne <b:includable id='shareButtons' var='post'> est présente ou pas. Si elle est là, « l’includable est présent ».

Cas n°1 : l’include est présent mais pas l’includable

Il faut juste que nous ajoutions la partie « includable » qui est manquante. Cherchez sur la page le code suivant :

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

Une fois que vous l’avez trouvé, repérez la première ligne </b:includable> que vous trouvez plus bas dans le code. Juste dessous, copiez ces lignes :

<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&amp;target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if>
<b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&amp;target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if>
<b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if>
<b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&amp;target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if>
<b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&amp;target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if>
<b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</b:includable>

A l’arrivée, ça devrait ressembler à ça :

Ajouter des boutons de partage sur Blogger

Vous n’avez plus qu’à enregistrer !

Cas n°2 : l’includable est présent mais pas l’include

Cherchez sur la page le code <div class='post-footer'>. Je ne sais pas si c’est le cas dans tous les thèmes Blogger mais la plupart du temps, ce code est présent deux fois et c’est après le deuxième qu’il faudra ajouter les lignes ci-dessous :

<b:if cond='data:post.sharePostUrl'><div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/></div></b:if>

Ça devrait ressembler à ça par exemple :

Ajouter des boutons de partage sur Blogger

Cas n°3 : il n’y a ni l’include, ni l’includable

Pas de chance, hein ;) La solution est simple : vous devez tout simplement suivre les deux étapes (celle du cas n°1 et celle du cas n°2).

Conclusion

Comme vous pouvez le voir, régler un problème d’affichage exige de mettre un peu les mains dans le cambouis. J’espère vous avoir donné une solution facile mais bien entendu, je ne peux pas prévoir toutes les situations et si vous utilisez un thème Blogger personnalisé, il peut être codé différemment.

Quand vous copiez des lignes de code, vérifiez bien que vous n’effacez rien d’important par mégarde et que vous n’avez pas oublié une ligne. Si ça ne fonctionne pas, il suffit d’effacer ce que vous venez d’ajouter et de réenregistrer votre modèle Blogger… ou de remettre en ligne la sauvegarde que vous aviez faite !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

34 commentaires sur “Comment afficher des boutons de partage sur Blogger ?

  • Manolie

    Bonjour Marlène, j’ai suivi ton tuto pour installer mes boutons de partage, çà a marché.
    Je cherche maintenant à les rendre un peu plus jolis que ceux prévus par Blogger, j’ai regardé parmis tes articles et je n’en ai pas vu à propos de çà.
    Je pense qu’il faut que je personnalise les codes CSS ?
    Si oui sais tu ou je peux en trouver en exemples ?
    Si c’est une problématique trop personnalisée, pas de soucis…
    Merci encore pour ton travail et ton aide!

    Répondre à Manolie
    • Marlène

      Hello, personnaliser les boutons de partage est possible mais exige de coder car chaque réseau à son propre système pour « transmettre » l’URL de ton article au réseau. Il faut donc entièrement recoder les boutons à la main pour les personnaliser (si tu jettes un oeil sur Grafikart, ils expliquent comment faire mais tu vas constater que ça n’a rien de simple ;)).

      Répondre à Marlène
    • Manolie

      Ah oui d’accord ..autant j’ai appris quelques rudiments de codage pour changer certaines choses sur mon site mais là clairement je ne comprends pas ce qu’il veut dire par « détecter le clic ».
      Tant pis…
      Merci, belle journée.

      Répondre à Manolie
  • Christine

    Bonjour
    Merci pour votre aide. Malheureusement je suis dans le cas n°3, et je n’ai aucune idée de l’endroit où je dois ajouter les lignes de code pour l’include et l’includable. Pouvez-vous m’aider ? Merci d’avance

    Répondre à Christine
    • Marlène

      Bonjour, la façon de faire est expliquée dans l’article ;) Il faut donc simplement suivre les étapes indiquées.

      Répondre à Marlène
  • Jason

    Bonjour,

    J’ai attentivement lu ton article, j’ai trouvé ce qu’il y avait a trouver et j’ai ajouté ce qui devait être ajouté mais malheureusement, j’en suis toujours au même point: le mot « partage » s’affiche mais par les icônes de réseaux sociaux, j’aurai bien besoin d’aide, j’ai récemment décidé de refaire toute la structure du blog et je suis vraiment perdu …

    Merci d’avance,

    Jason

    Répondre à Jason
    • Marlène

      Hello, quand on clique sur le bouton « Partager » sur ton blog on a accès à toutes les icônes… donc je suppose que c’est le thème choisi qui définit déjà des paramètres.

      Répondre à Marlène
  • dumilie

    Bonjour,
    et merci pour l’astuce ;-) mais ça ne fonctionne pas pour moi… je pense avoir « par mégarde » personnalisé le modèle et je n’arrive plus à revenir en arrière :-/ j’ai bien le bouton « like » de FB mais ce sont les boutons de partage dont j’ai besoin !!

    Répondre à dumilie
    • Marlène

      Bonjour, je ne peux malheureusement pas deviner ce qui a été changé dans le code donc le mieux est de restaurer une sauvegarde pour repartir sur un blog « clean ». Le tuto explique comment ajouter des boutons de partage et le code concerne exclusivement des boutons de partage… donc le bouton « like » doit venir d’ailleurs :-/

      Répondre à Marlène
  • Faïk Christelle

    Bonjour et merci pour votre travail.

    malgré plus de 2h de recherche, impossible de trouver les lignes dont vous parlez pour insérer les codes HTML. Je commence à désespérer…Pensez-vous pouvoir m’aider si je vous transmets le code HTML de mon blog?
    Merci pour votre réponse.
    Christelle

    Répondre à Faïk
    • Marlène

      Bonjour Christelle, vous utilisez un modèle dynamique sur Blogger et ça restreint considérablement les possibilités car vous n’avez pas d’emplacement type « widget » où insérer du code. Vous ne pourrez donc pas suivre ce tutoriel.

      Répondre à Marlène
    • Christelle

      Merci Marlène. Lorsque je vous ai écrit, j’avais fait basculer mon blog en modèle classique car il y avait un gros bug avec les vues dynamiques (j’ai eu chaud !). Mon problème a désormais changé : les boutons de partages sont là MAIS inactifs via mon iBook ! Si vous pouviez tester un Like facebook via votre pc et me dire si cela fonctionne, je serais ravie :-) mais déjà merci pour le reste. Christelle

      Répondre à Christelle
  • Elsa

    Coucou Marlène !

    J’avais réussi à installer la barre de partages la semaine dernière, mais je viens de m’apercevoir qu’elle avait mystérieusement disparue… Je n’ai pas réussi à en trouver la cause, pourrais-tu m’aider ?

    Merci d’avance,
    Elsa :)

    Répondre à Elsa
    • Marlène

      Hello, pour ma part je vois bien des boutons de partage sur ton blog.

      Répondre à Marlène
  • la gazette d'un gazelle

    De nouveau merci !! Il me manquait l’includable ! Qui l’aurait cru ?

    Répondre à la
  • mamadou kone

    comment touver des bon templates de site web pour son blog en francais

    Répondre à mamadou
    • Marlène

      Peu de thèmes sont bien traduits en français en totalité. Il y avait les thèmes de « Thèmes de France » qui ne sont plus vendus mais restent accessibles sur le web. Sinon, il faut prendre un thème qui comporte un fichier de traduction et faire le travail soi-même. Jetez aussi un oeil sur Theme Forest, il y a peut-être certains thèmes déjà traduits, au moins en partie.

      Répondre à Marlène
  • mamadou kone

    j’ai changé le templates de mon blog sur blogger par le template ritmo mais je n’arrive pas a changer les photos par défaut du templates verifier l’adresse du site par ici http://www.aproposdedroit.ml et aidez moi a les changer et a bien maquiller mon blog aussi s’il vous plait.

    Répondre à mamadou
    • Marlène

      Bonjour, il faut poser la question au créateur du template, les commentaires de cet article sont consacrés aux boutons de partage sur les réseaux sociaux mais il n’est pas possible de traiter des problèmes ultra personnalisés ici ;-)

      Répondre à Marlène
  • Marie-Charlotte

    Bonjour !

    Merci pour ton article, j’ai juste un petit souci : je voudrais que les boutons de partage s’affichent avant le corps de l’article, et même en déplaçant l’option comme tu le montres, les boutons restent en bas… Une idée du problème ? :/ Merci d’avance !

    Répondre à Marie-Charlotte
    • Marlène

      Bonjour, c’est malheureusement difficile pour moi de te répondre sans connaître le code de ton blog. Si le système par défaut ne fonctionne pas, ça peut vouloir dire que ton design est conçu autrement et n’en tient pas compte. Dans ce cas, il faut trouver le « bout de code » récalcitrant via le menu Modèle > Modifier le code HTML et le déplacer à la main à l’endroit où on souhaite le voir apparaître…

      Répondre à Marlène
  • Abir

    Hello ! Tout d’abord un grand merci, c’est grâce à tes tutos que j’ai pu amélioré mon blog, moi, qui n’y connais absolument rien. Ceci dit j’ai un petit problème qui me dérange : J’ai une phrase (undefined undefined,undefined by Boulegroune Abir) qui apparaît sur les boutons de partage. Alors, saurais-tu d’où ça pourrait venir? Merci

    Répondre à Abir
    • Marlène

      Merci Abir pour le commentaire ! Je ne vois pas la phrase en question apparaître sur le blog, le problème est résolu ? Sinon, peut-être qu’elle ne s’affiche que lorsque tu es connecté au blog.

      Répondre à Marlène
    • Abir

      Problème résolu ! Fallait juste choisir le bon format de la date. Merci ! <3

      Répondre à Abir
  • padubs

    Merci pour l’astuce ! J’ai essayé et ça marche nickel !

    Par contre j’ai toujours un souci d’affichage :
    Toutes les options sous l’article ne s’affichent pas. En fait seul l’icone « partager par mail » et edition rapide s’affichent sous les l’article. Et maintenant grace à ton astuce, les boutons de partage :)
    Mais je n’arrive toujours pas a trouver comment remettre le lien pour les commentaires.
    Si tu as des idées je suis preneur !

    Répondre à padubs
    • Marlène

      Hello, c’est un sujet très différent du sujet de l’article donc je ne peux pas te répondre dans les détails. La démarche est la même (include/includable) mais le code est complètement différent. L’affichage du nombre de commentaires (avec un lien dessus qui mène à la page de l’article) est liée à l’intitulé « comment_count_picker ». Peut-être que tu peux récupérer les bons codes à partir d’un thème Blogger « de base » et les rapatrier dans ton thème personnalisé…

      Répondre à Marlène
    • padubs

      Hello et merci pour ta réponse !
      Autant pour moi, j’avais l’impression que c’était plus ou moins le même sujet.

      J’ai trouvé ma solution en supprimant cette ligne :

      Blogger la regénère automatiquement par la dernière version.
      Je ne suis pas assez doué en html pour avoir trouvé ça tout seul : http://bloggercode-blogconnexion.blogspot.fr/2012/02/dompter-les-options-des-messages.html#fil03

      Sinon par acquit de conscience, j’ai essayé aussi « rétablir les paramètres par défaut des modèles de gadget », en ne sélectionnant que Blog1. J’avais modifié le html mais pour le header. Et bien ça marche aussi comme ça :)

      Répondre à padubs
    • Marlène

      Ça s’affiche au même endroit mais c’est un code complètement différent qui gère tout ça, d’où ma remarque :) Tant mieux si tu as pu régler le problème, l’article que tu donnes sur le sujet a l’air bien complet !

      Répondre à Marlène
  • Emilie

    Je vais garder ton article précieusement de côté car je suis en train de créer un 2nd blog sur Blogger et ce n’est pas toujours facile …

    Répondre à Emilie
    • Marlène

      Ah ça ne m’étonne pas, surtout quand on l’habitude de WordPress ! Blogger a vraiment son langage et sa logique à part :)

      Répondre à Marlène
  • kaylacos

    ah ok, j’avais compris autrement pour le bouton Blogger.
    Merci bien.

    Répondre à kaylacos
  • kaylacos

    Merci pour l’article, je ne m’attendais pas à ce que ce soit si rapide. Il me manquait effectivement l’include, en tout cas le code qui s’était présenté il n’apparaissait pas « share button ». J’ai compris qu’il n’était pas complet ou pas le bon.
    En tout cas les boutons s’affichent tous au bas des articles. :)

    Peut on en supprimer un par exemple même si c’est pas gênant, et à quoi consiste exactement le bonton Blogger, est ce pour les blogueur qui souhaitent transférer l’article à sur son blog ?

    Répondre à kaylacos
    • Marlène

      Je l’ai expliqué dans l’article :) Ca permet aux lecteurs de reposter sur leur propre blog sous forme de post la première phrase de l’article avec un lien vers ton blog (ça me fait un peu penser au « Reblog » de Tumblr si tu connais cette plateforme). Oui, tu peux supprimer un bouton, il suffit d’enlever la ligne correspondante dans le « includable ».

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.