Comment 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, 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 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

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
  • 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).

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 !


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.

21 commentaires sur “Comment ajouter des boutons de partage sur les réseaux sociaux 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
  • 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
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.