Version finale des Boutons de partage officiels de Blogger [Exclu LeBlogger]

Je vous en avais parlé il y a plusieurs jours de cela (shareButtons - Des boutons de partage par défaut dans Blogger) et ben devinez quoi ? Blogger vient d'activer les shareButtons dans la version draft de Blogspot !
Boutons de partage Blogger
Vous pouvez tester la version finale des boutons sur LeBlogger.com, ils sont affichés au dessus des titres des articles.

Configuration

Pour ajouter les nouveaux boutons de partage, connectez vous à Blogger en allant dans draft.blogger.com (et non pas www.blogger.com) puis allez dans Présentation, Éléments de la page et cliquez sur le bouton Modifier dans le champs Messages du blog.
Vous pouvez ensuite activer les boutons et les placer où que vous voulez dans votre Blogspot très très facilement.

Un problème ? La solution !

Ok vous avez effectué l'étape précédente mais les boutons ne s'affichent pas ??? Pas de problème, on va les afficher de force :)

Pour cela, dans la partie Modifier le code HTML, cochez la case Développer des modèles de gadgets puis, pour placer les boutons juste en dessous des titres des articles, recherchez <div class='post-header-line-1'> (ou <div class='post-header-line-1' />) et juste après ajoutez ce code :
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
Prévisualiser votre blog et normalement vous verrez les nouveaux boutons de partage.

Remarque - Astuce

Une fois que vous avez effectué cette étape, dans votre tableau de bord Blogger (de la version standard et non la Draft) allez dans Présentation, Éléments de la page et cliquez sur le bouton Modifier dans le champs Messages du blog et là, comme par magie, vous allez voir les boutons !
Si vous ne les voyez toujours pas, laissez un commentaire en bas de cet article, vous devrez peut être ajouter un deuxième code ...

Informations sur les Boutons de partage

Faut t-il utiliser ces shareButtons dès maintenant

Oui, bien sûr. Pourquoi ? Parce ce que c'est simple à mettre en place, les boutons sont beaux, c'est une fonctionnalité intégrée à Bogger donc ces boutons sont beaucoup plus rapides et plus fiables que ceux ajoutés manuellement et à partir de plusieurs sources.

En plus comme je vous l'ai dit c'est la version finale des shareButtons que je vous propose ici et qui sera peut être officialisée par Blogger dans quelques jours ou quelques semaines ...

Un raccourcisseur d'url automatique pour Twitter

Eh oui, la bonne nouvelle c'est que le bouton de partage pour Twitter utilise le raccourcisseur d'url de Google (aka goo.gl) pour raccourcir automatiquement les liens vers vos articles avant de les publier sur Twitter, c'était vraiment indispensable.
Comme vous le voyez sur la capture précédente, Blogger a ajouté et le titre du blog et le titre de l'article. Est ce que vous avez remarqué la même erreur ?

Une version Google Buzz amélioré

Le bouton de partage pour Google Buzz a été amélioré puisqu'en cliquant sur l’icône Google buzz le script récupère automatiquement le titre de l'article, le lien, la première image et le résumé qu'on peut modifier dans une fenêtre pop-up avant de le publier/partager.

Boutons de partage par email et par Blogspot !

Le bouton de partage par email est exactement le même que celui dont je vous parlais ici : Bouton pour envoyer les articles de votre Blogspot par email

Le bouton de partage pour Blogspot ne sert absolument à rien (à mon avis) et je vous expliquerais plus tard comment le supprimer et comment replacer les autres boutons ...

Qu'est ce que vous pensez de cette nouveauté ?

Qu'est ce que vous pensez de cette nouveauté et est ce que vous comptez utiliser ces nouveaux boutons ou pas ? N'hésitez pas à en discuter via les commentaires ...
Boutons de partage Blogger
English version of this post : New built-in Blogger sharing Buttons
50 Commentaires
  1. Merci, c'est super ! Mais j'avoue que j'espere que blogger va nous proposer plusieurs mises en forme, et d'autres icones. Parce que je ne suis pas super fan du peu de possibilités.

    En tout cas merci à toi ! =)

    RépondreSupprimer
  2. Peut être que Blogger fera quelque chose dans cette direction lorsqu'ils lanceront ces boutons ...

    RépondreSupprimer
  3. Ah oui PS regard cet article pour utiliser une image en avatar dans les commentaire Blogger : http://www.leblogger.com/2009/09/image-profil-commentateur-commentaire.html

    RépondreSupprimer
  4. Terrible l'infos
    comment faire pour ne pas faire apparaitre les boutons de partage en page d'accueil, mais dans le billet ? Merci pour ton aide

    RépondreSupprimer
  5. Bonjour Soufian, tout d'abord, un grand bravo, tu t'en doutes, j'apprécie ton "nouveau look" !
    Je viens de tenter le placement des boutons et c'est la deuxième méthode qui a fonctionné, sauf qu'ils apparaissent en bas du message. As-tu une astuce pour qu'ils apparaissent après ou juste au-dessus du titre comme chez toi?
    Dans l'élément de page, je l'ai bien placé sous le titre.
    Merci d'avance.

    RépondreSupprimer
  6. ouais, c'est pas mal, mais impossible pour moi de le mettre en abs de message, et pas juste après le titre !

    RépondreSupprimer
  7. Bonjour !
    Le gadget n'a pas fonctionné dans "configurer les messages (dommage ! j'avais également coché la case "afficher les notations en étoiles".
    J'ai donc utilisé la seconde méthode. Super ...
    Toujours aussi performant ..

    RépondreSupprimer
  8. Merci Soufiane. En effet, mon avatar avait disparu, je ne sais aps vraiment pourquoi. Il est de nouveau en place ;) Merci encore pour toutes tes astuces. Ton site est une vraie mine d'or.

    RépondreSupprimer
  9. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  10. @Anonyme
    Il faut ajouter une condition B:if j'en ai parlé dans d'autres articles ...

    RépondreSupprimer
  11. @Michèle Attention à la Terre
    Tu utilises une Template très personnalisée et la plupart des marqueurs Blogger ont été modifié donc c'est impossible de t'indiquer exactement où est ce qu'il faut mettre le code :-(

    Pour la plupart des autres blogs, les boutons sont placés à la bonne place ...

    RépondreSupprimer
  12. @Miss Choco
    @Francine
    @Stéphane Ribeiro

    Merci pour les gentils commentaires °__°

    RépondreSupprimer
  13. Testé et adopté!!! Merci Soufiane!

    RépondreSupprimer
  14. Ok, grand merci pour ta réponse Soufiane, au moins je sais pourquoi maintenant !

    RépondreSupprimer
  15. Trop grisés, ils incitent peu à être utilisé...

    RépondreSupprimer
  16. Merci beaucoup pour cette astuce. J'ai utilise la 2eme facon car la 1ere ne fonctionnai pas. Je suis debutante et j'aimerai aligne la barre a droite, comment faire ?

    Merci d'avance

    RépondreSupprimer
  17. @ anomyme

    Pour ne pas afficher en page accueil, mais uniquement dans les billets encadrer le code donné au dessus par : :

    <b:if cond='data:blog.pageType == "item"'> LE CODE BLABLABLA </b:if>

    RépondreSupprimer
  18. J'aimerais obtenir un widget Htlm (<div...(</)pour MON blog de l'Anglais en Français. Merci

    RépondreSupprimer
  19. @coccxyphil: Grand merci pour l'astuce, ça allège ma page d'accueil. Il me reste à trouver l'astuce pour envoyer ces boutons sous le titre et non sous l'article, mais, comme l'a dit Soufiane, mon template ne suit pas la règle Blogger...Je vais penser à le changer.

    RépondreSupprimer
  20. @coccxyphil
    Merci pour la réponse, il faut mieux utiliser ce code :

    <b:if cond='data:blog.pageType != "index"'> LE CODE BLABLABLA </b:if>

    Qui va afficher les boutons dans et les pages d'articles et les pages statiques ....

    RépondreSupprimer
  21. Fantastique! Merci beaucoup! C'est exactement ce que je recherchais :-)

    RépondreSupprimer
  22. Oh lalala! quel bonheur de vous découvrir!!!

    RépondreSupprimer
  23. Salut Soufiane, ton blog est de plus en plus agréable, bravo pour ton taf ! J'aurais voulu savoir comment placer la barre sur la droite du post-footer

    RépondreSupprimer
  24. @Fox Prime
    Merci, Tu peux agir sur les boutons en ajoutant la class CSS "post-share-buttons", quelque chose de ce genre :

    .post-share-buttons{
    float:right;
    }

    RépondreSupprimer
  25. Super cette fonctionnalité, espérons qu'ils l'améliorent. :)
    Je découvre ton blog et j'avoue qu'il me plaît déjà.

    RépondreSupprimer
  26. J'ai bien suivi les instructions indiqués mais ça ne fonctionne pas sur mon blog donc j'ai remis les boutons de partage Addthis.

    Bug de Blogger ?

    RépondreSupprimer
  27. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  28. :) SUPER , pas de problèmes pour l'installation !

    RépondreSupprimer
  29. Bonjour, je rejoins Fox Prime pour intégrer les boutons sur la droite, ou la gauche? Je ne suis pas un gros pro du code html, alors j'ai essayé diverses façons d'intégrer le code que tu as donné précédemment, mais rien n'y fait ! ou le code n'est pas bon, ou bien rien ne se passe.

    bref, j'implore ton aide

    RépondreSupprimer
  30. Bonjour,
    bravo et merci pour le travail qui doit être vraiment conséquent!
    Je ne sais pas comment integrer la case à cocher sous les articles comme ceci http://i913.photobucket.com/albums/ac338/lydiaa_03/Capture01.jpg sur blogger...J'ai été dans présentation, message du blog, et j'ai mis ce que je devais mettre dans réactions mais ça n'a pas l'air de fonctionner.
    Je ne trouve l'info nulle part! heeeelp
    merci

    RépondreSupprimer
  31. Bonjour Soufiane et merci pour ton astuce qui a bien fonctionné sur mon blog !
    J'ai un autre problème maintenant : le bouton facebook met en lien sur mon profil le premier commentaire posté sous mon post de blog et non le post lui-même...
    Sais-tu comment modifier cela ?
    Merci d'avance pour tes conseils !

    RépondreSupprimer
  32. Comment faire pour que les boutons de partage apparaissent en bas de l'article et non à coté du titre???

    RépondreSupprimer
  33. Bonjour,

    Félicitations pour votre site ! Il m'a beaucoup aidé et c'est une mine d'or ! Bravo!
    J'ai suivi vos instructions car malgré le fait de cocher "afficher les boutons de partage" dans Figurer les messages, les boutons n'apparaissaient pas. Maintenant ils apparaissent bien, mais impossible de les placer en bas du message (ils sont en haut). Vous pouvez m'aider ? Je vous remercie, Sandrine

    RépondreSupprimer
  34. Bonjour Soufiane !
    Dis-moi lorsqu'on utilise le bouton de partage vers Facebook d'un article Blogger, l'article en question n'apparaît pas correctement sur FB : l'image de l'article apparaît mais pas le texte de l'article (au lieu du texte de l'article il y a le texte que je met au dessus de la fenêtre de saisie des commentaires.
    As-tu une idée là-dessus ? Ca te fais ça aussi ?
    Merci à toi.

    RépondreSupprimer
  35. bonjour

    Merci, génial cette aide !!!

    2 remarques tout de même :

    - ca ne s'affiche pas à l'endroit proposé par blogger, mais en dessous du titre. Soit mais je fais remarquer cette bizzarerie technique. A noter que je préfère ;o))

    ca s'affiche en Noir et Blanc, c'est pas joli du tout et je ne sais pas comment y remédier. Cf. http://ericlediemerophile.blogspot.com/

    Merci par avance pour votre aide.
    Cdt Eric

    RépondreSupprimer
  36. Bonjour

    Merci beaucoup pour cette article sur les boutons de partage sur Blogger. Je cherchais une solution pour ça.

    Toutefois, dans un autre contexte, depuis hier , un de mes blogs a disparu de mon tableau de bord Blogger, c'est le blog AGIR-POUR-RÉUSSIR. Donc, je ne peux plus gérer mon blog , qui est toujours en ligne. J'ai l'habitude d'y ajouter un nouvel article presque chaque jour. Mais n'ayant plus accès à ce blog à partir de mon tableau de bord, je ne pourrai plus publier d'article sur ce blog.

    Si quelqu'un pouvait m'aider à réintégrer le blog disparu sur mon tableau de bord de Blogger, j'en serais très heureuse.

    Merci aux personnes qui m'apporteront de l'aide
    Cordialement

    Marie-Micheline

    RépondreSupprimer
  37. Bonsoir,
    J'ai beau passer par l'outil "Configurer les messages" et par l'insertion du code par moi-même pour ajouter les boutons Partager, cela ne marche pas réellement : les boutons sont bien ajoutés mais ne sont pas visibles, comme s'ils étaient transparents. J'ai un grand espace vide à la place et lorsque je passe ma souris, le lien s'affiche dans l'info-bulle. J'ai repéré ce problème sur d'autres blogs que le mien. Avez-vous une solution, car cela fait deux nuits que je cherche à comprendre ce qui se passe...
    http://e-voyagedansletemps.blogspot.com/

    Merci par avance,
    Frédérique

    RépondreSupprimer
  38. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  39. Finalement, j'y suis parvenue à force de tripatouiller le code. Je me demande si ce n'est pas grâce à ce code que j'ai rajouté avant que cela fonctionne :
    .post-share-buttons a
    {
    position: relative;
    display: inline-block;
    }
    ]]>

    En tout cas, ça marche...
    Frédérique

    RépondreSupprimer
  40. Bonjour,

    J'ai appliqué la dernière astuce (celle de frédérique), j'arrive à afficher ces fameuses icônes (sans la notion display, ça ne s'affichent pas sur mon blog...).
    Par contre, impossible de l'afficher au bon endroit (cad DANS l'article, une fois ouvert, au niveau du commentaire)

    Pouvez vous m'aidez svp ?

    Mon blog : http://theblackstout.blogspot.com/

    RépondreSupprimer
  41. Bonjour Soufiane !
    Je souhaitai rajouter tous ces boutons de partage pour me faciliter la vie, mais je crois que mon template pose problème...
    J'ai eu beau regarder dans tous les sens et appliquer tes conseils, je n'y arrive pas.
    Je suis consciente d'avoir fait (pas mal) d'erreurs depuis que j'ai créé mon blog puisque j'ai dû tout apprendre "sur le tas"...
    Pourrais-tu me dire d'où pourrait venir l'erreur s'il te plait ?
    Tu peux voir mon site via mon nom (je n'ai pas pû me connecter via mon compte, encore un bug je présume >____<)

    RépondreSupprimer
  42. Re ^_____^
    J'ai rajouté les lignes données par Frédérique ( sans le ]]) ), un Grand MERCI ! ça fonctionne, mes icônes apparaissent enfin et sont valides : ).
    Désolée pour cette demande qui a finalement trouvé sa solution, et merci pour tous les conseils trouvés encore sur ton blog Soufiane ;) .

    RépondreSupprimer
  43. Bonjour,

    J'ai vu cette astuce sur le net, car moi aussi je trouvais les boutons bien trop peu visibles et grisés!

    http://nawras-univers.blogspot.com/2011/07/colorer-les-boutons-de-partage.html?spref=tw

    Quelques lignes qui mettent en valeur les boutons de partage :)
    Par contre si quelqu'un sait comment par exemple virer le bouton buzz tout en laissant les autres, je suis preneur ! Merci

    RépondreSupprimer
  44. coll merci
    http://ogratuito.webnode.fr/bate-papo/
    mon site en portugais ce link cet pour chat sur le site
    lesse vous comentaire sur le site aussi

    RépondreSupprimer
  45. bonjour soufiane
    jai ajouté des botons de partage mais ils sont trop gris . es tu peu m aider
    merci

    RépondreSupprimer
  46. Bonjour !

    La deuxième solution a bien marché pour moi (afficher les boutons de force sous le titre) mais en les testant, je me rend compte que le bouton Facebook ne fonctionne pas. En cliquant dessus, une nouvelle fenêtre FB s'ouvre avec "publier ce lien sur votre mur", jusque là nickel, mais c'est en cliquant sur "partager" ou il ne se passe rien !!

    Et forcement, rien n'est publié sur mon mur... Auriez-vous une solution ?

    Merci beaucoup à tous !

    RépondreSupprimer
  47. merci toujour Soufian tres utile je peus pas realiser mais quand meme superbe

    RépondreSupprimer
  48. euh...sur mes blogs, pas de raccourcisseur d'URL pour twitter, c'est bien pour ça que je suis obligé de le faire manuellement avec Bitly. Dommage.

    RépondreSupprimer
  49. hé bien je suis perdue dans mon html....
    impossible d'afficher ces fichus boutons de partage !!
    et impossible aussi d'organiser les éléments autour d'un article... :(

    RépondreSupprimer

Copyright 2015 Soufiane.fr