Ajouter des boutons de partage sur les réseaux sociaux sur Blogger


Il est possible d'afficher des boutons de partage sur les réseaux sociaux sur Blogger, en bas de chaque article, pour permettre à vos visiteurs de les relayer sur Facebook, Twitter ou encore Pinterest.

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 des boutons de partage sur les réseaux sociaux, qui s'affichent différemment d'un thème à l'autre et peuvent par exemple ressembler à ça :

Boutons de partage sur les réseaux sociaux
Boutons de partage sur les réseaux sociaux

Ces boutons de partage s'affichent en bas de chaque article et offrent différentes possibilités de partage :

  • Partager l'article par e-mail avec des amis.
  • Obtenir le lien de l'article pour pouvoir le partager.
  • Partager l'article sur les réseaux Twitter, Facebook ou Pinterest.

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
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
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 :

Choisir la position des boutons de partage
Choisir la position 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 sur les réseaux sociaux ne s'affichent pas.

Créer des boutons de partage vers les réseaux sociaux

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 "Thème" de Blogger, cliquez sur le bouton "Modifier le code HTML".

Modifier le code HTML sur Blogger
Modifier le code HTML sur Blogger

Si vous utilisez la nouvelle interface de Blogger, il faut cliquer sur les trois points à côté du nom du thème dans le menu "Thème" puis sur "Modifier le code HTML".

Modifier le code HTML d'un thème Blogger
Modifier le code HTML d'un thème 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 thème Blogger
Faire une recherche dans un thème Blogger

Ou comme ici sur la nouvelle interface de Blogger :

Chercher du code sur Blogger
Chercher du code sur Blogger

Sur l'ancienne interface de 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".

Sur certains thèmes Blogger, notamment ceux accessibles via la nouvelle interface, une seule ligne est nécessaire pour afficher les boutons de partage : <b:includable id='postShareButtons' var='post'>. Vous pouvez donc essayer de chercher juste "shareButtons" pour voir si vous avez une référence quelconque à ces boutons de partage dans le code.

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 + "&;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 + "&;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 + "&;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 + "&;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 + "&;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).

Comme vous pouvez le voir, régler un problème d'affichage exige parfois 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 !

Blogger propose, à l'heure où je mets à jour cet article, deux interfaces différentes (l'ancienne et la nouvelle) qui coexistent. La nouvelle interface, notamment, est associée à des thèmes par défaut qui sont parfois codés différemment.


Poster un commentaire

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

32 commentaires sur “Ajouter des boutons de partage sur les réseaux sociaux sur Blogger
  • SERGE

    bonjour Marlène
    je dois monter un autre blog après en avoir créé un il y a longtemps pour une association de rando. j’ai testé tes codes pour afficher les boutons de partage et çà fonctionne très bien (je ne me suis pas amusé..) . merci beaucoup pour le tuto. par contre je m’aperçois que le bouton partage facebook par exemple me renvoie l’article systématiquement sur mon compte personnel facebook. or je voudrai que le partage se fasse sur le compte facebook de l’association que je vais gérer. le lien entre blogspot et facebook en termes d’adresses se fait à quel endroit ? je suis l’administrateur du blog. merci d’avance de ta réponse. bonne journée serge

    Répondre à SERGE
    • Marlène

      Bonjour Serge, normalement cette partie n’a rien à voir avec le blog lui-même mais avec Facebook. Quand on clique pour partager un article, ça ouvre une fenêtre Facebook où, par défaut, l’option choisie dans le menu déroulant est « Partager sur le fil d’actualité ou dans la story ». On peut modifier ce réglage pour partager sur une page par exemple.

      Répondre à Marlène
    • SERGE

      bonjour Marlène,
      merci pour la réponse rapide. Ma session Facebook devait être restée ouverte lors de mon dernier essai de partage. effectivement on me propose bien la fenêtre de connexion où je suis libre d’indiquer le compte Facebook approprié et souhaité. si je peux me permettre une autre question. le partage sur Facebook d’un article (sans image) renvoie systématiquement de Blogger la première image (tronquée d’ailleurs) trouvée sur le blog qui correspond dans mon cas à la partie Header (bandeau du haut du blog). j’ai lu sur des sites techniques que sur Blogger, pour intervenir sur les métadata et intervenir sur cette image il fallait insérer du code spécifique qui prenne la main sur le all-head-content du thème. tu confirmes qu’il s’agit bien de la seule méthode ? merci d’avance et bonne journée

      Répondre à SERGE
    • Marlène

      Bonjour, effectivement on peut contrôler de manière plus fine ce qui est partagé en ajoutant ou en personnalisant le code Open Graph de Facebook.

      Répondre à Marlène
    • serge

      Bonjour Marlène
      Merci de tes réponses et bravo pour ton site et tes lumières techniques !

      Répondre à serge
  • nelzarine

    Bonjour Marlène, je désirerai diriger mes articles directement sur mes compte des réseaux sociaux lorsque je fais envoyer sur blogger pour chaque publication d’article , afin d’éviter a chaque fois d’aller sur mes comptes pour partager soit FB ou autres. Grand merci pour l’aide

    Répondre à nelzarine
    • Marlène

      Bonjour, pour un partage automatique des articles tu peux utiliser une solution comme IFTTT, dont je parle dans cet article.

      Répondre à Marlène
  • Laura

    Bonjour! Je suis dans une impasse : journalistes, nous avons créé un média en ligne par le biais de Blogger. Je peux twitter les articles mais uniquement les liker sur FB. Donc je cherche un moyen de placer par exemple, un bouton sur la barre de droite pour pouvoir les partager. J’ai bien compris qu’en affichage dynamique on n’avait pas cette option. Une mini-solution? Ou bien on continue à copier/coller les liens? Merci beaucoup pour ces infos en tous cas!

    Répondre à Laura
  • 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
  • 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
  • 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 Thème > Modifier le code HTML et le déplacer à la main à l’endroit où on souhaite le voir apparaître…

      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

    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
    • alain

      Bonjour Marlène, d’abord merci pour toutes ces explications, après avoir cassé et changé mon thème de blog pour qu’il soit responsif, les icônes de partage ne sont pas présente, j’ai l’includable mais je n’arrive pas à ajouter ton code, mon thème blogger est Contempo, merci.

      Répondre à alain
    • Marlène

      Bonjour Alain, malheureusement je ne peux pas faute de temps me pencher sur le code de chaque thème pour résoudre des problèmes individuels, car je gère ce blog sur mon temps libre. Je te conseille de te tourner vers un forum de support de Blogger, par exemple.

      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.