Régulièrement, on me demande comment installer des boutons de réseaux sociaux sur son blog. Et c’est une très bonne question ! En effet, je trouve qu’il est important d’ajouter des boutons de réseaux sociaux sur son blog. Cela permet à vos lecteurs de naviguer facilement d’un réseau à un autre, et éventuellement de s’y abonner. Aussi, je vais vous donner une technique ultra simple, à la portée de tout le monde ! Et en cadeau, je vous offre des boutons de réseaux sociaux, crées par mes soins :-)

Alors, concrètement, on fait comment pour ajouter des icônes de réseaux sociaux à son blog Blogger ? Réponse dans la suite de l’article !

1 – Créer un bouton pour chaque réseau social

Tout d’abord, vous devez créer des images qui vont renvoyer vers vos réseaux sociaux. C’est ce que l’on appel généralement, des “boutons”. Personnellement, je crée mes boutons sous Photoshop, tout simplement. Si vous souhaitez un article détaillé pour savoir comment je procède, dîtes le moi. Sinon, je vous invite à télécharger les boutons ci-dessous (cliquer sur le bouton ci-dessous). Et oui, c’est mon cadeau du jour ! Vous avez le choix entre 4 séries que voici :

2 – Écrire un nouvel article sur Blogger

Ensuite, vous devez faire comme si vous vouliez écrire un nouvel article pour votre blog. En effet, on va se servir de Blogger pour générer le code qui nous servira à installer les boutons sur votre blog !

3 – Charger vos boutons dans l’article

Habituellement, lorsque vous écrivez un article pour votre blog, vous y ajoutez des images. De la même manière, insérez vos boutons un par un dans l’article. Disposez-les de la façon qui vous plaît le plus !

4 – Ajouter les liens de vos réseaux aux boutons

Vous devez alors associer chacun de vos boutons avec son lien correspondant. Exemple avec le bouton “Facebook” : vous cliquez sur l’image et ensuite sur “Associer“. Là, vous entrez le lien exacte de votre réseau social. Et ainsi de suite pour chacun des réseaux !

5 – Copier/coller le code dans un widget HTML

Lorsque toutes vos images seront associées à leurs liens respectifs, votre code sera prêt. Pour le récupérer, rien de plus simple ! Toujours sur la page de rédaction de l’article, cliquez sur “HTML” juste après “Rédiger”. Vous devez alors simplement copier le code qui apparaît, en entier. Ensuite, fermer l’article, sans le publier. Sous Blogger, aller dans Mise en Page, puis ajoutez un gadget HTML. À l’intérieur du gadget, collez le code que vous aviez au préalable copié. Enregistrez, et voilà !

6 – Effacer l’article de votre blog !

C’est terminé ! Vous pouvez maintenant effacer l’article, ou le laisser en brouillon :-)
Dans le même style
77 commentaires
  • m a y o n mayon Mayon.
    Répondre

    Merci pour cette astuce! Je débute et j’ai tout de même réussiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii! :-)

  • Catherine
    Répondre

    C’est top. je viens d’essayer. Je ne connaissais pas l’astuce pour récupérer les codes html. Merci

  • Curiosités à NY
    Répondre

    J’adore tes tutos! Tout parait tellement simple! Merci

  • cetomontreal
    Répondre

    Merci merci Elsa, c’est vraiment mieux que ce que j’avais fait et en plus je vais pouvoir faire mes propres boutons!

  • Nicoline Defy
    Répondre

    Ton article est vraiment génial ! Trop trop bien, merci !

    Bises,
    Nicoline Defy.

  • Barbara
    Répondre

    super merci pour ce tuto
    et je suis preneuse de celui pour créer les boutons sur photoshop à l’occasion…
    parce que je bidouille pour créer les miens alors un peu de professionnalisme serait le bien venu ;-)

  • Suzette
    Répondre

    GENIAL !!!!
    Je me demandais bien comment faire pour que ce soit petit joli sur une seule ligne comme ça sans passer par un logiciel de code.
    :)

  • Ollie
    Répondre

    Je connaissais l’astuce mais j’aurais surtout besoin du tuto pour créer de jolis boutons sous photoshop, je suis loin d’être un pro et je manque de créativité en graphisme, ton blog est inspirant, un tuto pour bientôt ?

    • Elsa ❤
      Répondre

      Je vais essayer de faire un tuto là dessus alors :-) Bientôt j’espère !

  • Snake Leah
    Répondre

    Rah je venais de trouver une solution pour le faire mais ça m’a pris des heures !! J’aurais dû passer sur ton blog plus tôt, merci beaucoup pour tes tutoriels :)

    • Elsa ❤
      Répondre

      De rien ! C’est vrai que c’est une méthode ultra simple !

  • Benjamin Tomlinson
    Répondre

    Salut,salut :)
    J’ai tout suivit, seulement quand je vais sur ‘Mise en page’ et dans ‘Ajouter un gadget: HTML/Javasprit’ je colle mon lien et ça ne veux rien faire..

    • Elsa ❤
      Répondre

      Il me semble qu’il faut saisir un titre dans les gadgets HTML. C’est peut-être pour ça que ça ne fonctionne pas. Fais le même processus en ajoutant un titre au gadget donc :-)

    • Cloë
      Répondre

      Même en mettant un titre ça ne fonctionne pas pour moi…

  • Elsa Pioupiou
    Répondre

    Ben tu vois, je viens de découvrir ton blog et rien que pour cet article génialissime tu es ajoutée à mon blogroll !
    Enfin pas que pour ça :) J’ai parcouru une bonne partie des articles précédents et j’adore ton univers, tes articles sont super agréables à lire, tout es super beau…
    D’ailleurs tes design sont magnifiques, je ferais bien appel à tes services ! :)
    Voilà voilà, bonne continuation, bisous :)

  • Barbara
    Répondre

    merci mille fois, cet article tombe pile poil – essayé et adopté en 2 minutes

  • Lilie In The Cloud
    Répondre

    Merci beaucoup pour tes conseils ;) en tous cas, je suis vivement intéressée par le tuto sur la création de boutons de réseaux sociaux :)

  • Sarah
    Répondre

    Aaaaaah merci beaucoup pour tes conseils ! Enfin un bon tuto :) !

    Bises, Sarah.

  • Rose
    Répondre

    Merci pour cet article! Cependant, comment faire pour les aligner? :)

  • Liah Lyne
    Répondre

    Merci beaucoup ! =)
    Liahlyne

  • Charlice Lbt
    Répondre

    Super et merci beaucoup :)

  • Agathe Emma
    Répondre

    Salut !
    Très bon article ! J’aimerais beaucoup que tu fasses un billet sur comment tu fais pour créer des boutons de réseaux sociaux, car depuis quelques temps, j’aimerais changer les miens sur mon blog mais je ne sais pas comment en créer d’autres.

    Merci ! Et si tu pouvais jeter un oeil à mon blog, ça me ferait très plaisir ! :)
    Emma
    emmagathe.blogspot.fr

  • Chatons Marinières
    Répondre

    Super blog, super tutos nous disons chapeau ! A l’occasion passe nous visiter :3 Bonne continuation !
    leschatonmarinieres.blogspot.fr

  • Mes instants de gourmandise
    Répondre

    Je te remercie beaucoup pour toutes ces astuces présentes sur ton blog, merci à toi de partager tout ça avec nous ! :) Par contre, quand j’ajoute le gadget, il ne s’affiche pas malgré son enregistrement… Peux tu m’indiquer ce qui cloche ? Je précise que j’ai l’affichage dynamique de Blogger… :) Un grand merci à toi !

  • P JÉJÉ
    Répondre

    AAAAH mais c est trop bien : D `
    Je savais pas qu on pouvait même créer nos propres boutons !!!! TROP COOL.
    Je m y met bientôt c est sûr ; ) En attendant, je vais continuer la lecture de ton blog et je suis sûre que je vais encore trouver pleins de bonnes astuces !!!!

    J.

  • Samia
    Répondre

    Salut Elsa ! Merci pour ce tuto génial ! Je me sers actuellement de tes boutons mais j’espère que lorsque tu répondras à mon mail, j’aurai de nouveaux boutons et une mise en page au top ! A très vite !

  • Jumelle Ln
    Répondre

    Bonjour, bonjour :)
    Je viens de découvrir ton blog grâce à Clementine de Paris Grenoble et je suis plus que ravis! Avec ma soeur nous tenons un blog mode et nous sommes des quiches en informatique et tes conseils sont précieux :)
    Mais j’ai une question: comment fait on sur blogger pour enlever le cadre blanc autour des photos? Je trouve que ça fait blog bâclé…
    Merci d’avance et bonne journée!
    Bises alice Ln

  • Jade from Paris
    Répondre

    Hello !
    Merci pour cette astuce, je viens d’installer les petites icônes sur mon blog ! Ca fait des semaines que je cherche comment faire, you made my day :)

  • Cloë
    Répondre

    Bonjour, l’article est super mais c’est la 3e fois que je rentre un code java html dans un gadget et que cela ne fonctionne pas… Quelqu’un peut m’aider ? Je suis bien tout à la lettre pourtant !

    Merci !

    http://le-gouter-chez-claudine.blogspot.fr

    • Elsa ❤
      Répondre

      À quel moment cela te mets qu’il y a une erreur ? Car normalement, il n’y a aucune raison pour que ça ne fonctionne pas… Je pense que c’est le code qui doit y avoir un soucis !

  • Marander
    Répondre

    Bonjour !

    Super article, sauf qu’il m’est impossible de trouver ou coller mes boutons ? Quand je clique sur mise en page/ajouter un gadget, je n’ai le choix qu’entre « général », « plus de gadget » ou « ajouter votre gadget » mais ils demandent un lien URL … Si quelqu’un pouvait m’aider merci :) !

    Delphine
    http://rosieandtheblackhearts.blogspot.fr/

    • Elsa ❤
      Répondre

      C’est simple, il faut faire : Mise en page > Ajouter un gadget > Dans général trouver HTML/Javascript et là seulement coller le code :-)

  • Beautin
    Répondre

    tout dabord merci pour cet article mais j’ai un problème j’ai tout suivi à la lettre est ça marche mes boutons sont à la bonne place etc .. mais en dessous des boutons il ya le lien associer qui apparait et ce n’est pas vraiment joli je n’arrive pas a les enlever :/

  • Kate B
    Répondre

    Bonjour autant te dire que ton article semble aider beaucoup de monde car je ne sais pour quelles raisons blogger a compliqué son interface alors que tout le monde veut installer leurs réseaux sociaux sur leurs blogs!! bref ca fait deux jours que je passe de forum en forum pour comprendre comment installer les réseaux sociaux, deezer, un traducteur, mettre un carré de photo instagram et rien ne marche… Ton tuto marche enfin par contre même question comment faire en sorte que le lien ne s’affiche pas et comment est ce possible de les aligner à l’horizontale? Merci beaucoup

  • Répondre

    Merci beaucoup pour le tuto! Ça fait un moment que j’essaye de mettre mes boutons mais je n’y arrivais pas.

    Bisou

  • Emilie R.
    Répondre

    Tu m’as sauvée!!!!! Merci :D

  • Camomille
    Répondre

    Merci pour ton article, je ne savais pas comment faire alors ça m’a beaucoup aidée! Je découvre ton blog par la même occasion, je vais donc y faire un tour! :)

  • Tadam NAA
    Répondre

    Bravo pour cet article (très) clair, et merci !! Tu as réussi à expliquer simplement ce que je trouvais jusqu’à maintenant trop compliqué, ça m’a été d’une grande aide :)
    Je vais de ce pas continuer à me balader sur ton blog, merci encore ;)
    Des bisous !!

  • Franklin T
    Répondre

    Merciiiiiiiiiiii

  • Bé'
    Répondre

    Merci beaucoup grâce à tes explications je suis enfin arrivée à le faire après maintes tentatives ! ♥

  • Mlle le Chat
    Répondre

    Merci, merci, merci! Je viens d’installer les boutons violets (assortis à mon blog!) à l’instant et ça a été simple grâce à ton explication qui est très claire. Par contre ils ne sont pas alignés à l’horizontale, mais à la verticale… Ça fait un style ;) En tout cas super article, grâce auquel je découvre ton blog d’ailleurs.

  • Mlle le Chat
    Répondre

    Merci, merci, merci! Je viens d’installer à l’instant les boutons violets, qui sont assortis à mon blog d’ailleurs. L’article est très clair et l’installation à été simple malgré mon niveau 0. Par contre les bouton sont alignés à la verticale et non à l’horizontale, mais ça fait un style ^^ Encore merci à toi pour cet article, grâce auquel je découvre ton blog!

  • Audrey Castel
    Répondre

    Coucou !!!
    Tout d’abord, je tiens à te remercier grandement parce que depuis 2 mois que j’ai mon blog, je bataille pour réussir à faire ça !!!! Donc mille million de MERCI ! ;)
    Par contre, j’aurais un petit service à te demander qui, je pense, pourrait en aider quelques autres : est ce que tu pourrais créer un bouton « galaxie » pour le réseau social Hellocoton ?
    Parce que j’ai pas photoshop, je sais pas m’en servir et c’est le seul qui manque à ma petite collection !

    Encore merci, et viens me rendre visite http://www.modebeauteandco.blogspot.com
    Bisous :)

  • Delphine
    Répondre

    Merci merci merci ! ça fait longtemps que je veux savoir le faire et en fait c’est tout simple ! Fallait y penser ^^

  • Com' tu es belle
    Répondre

    Mille mercis !!! je cherchais depuis longtemps ! by the way ton blog est magnifique !
    Bonne soirée

  • Doren Pirecci
    Répondre

    Je viens de créer mon gadget mais on ne le voit pas sur le blog! :'(

  • LuluuuMakeUp
    Répondre

    J’ai un petit probleme, j’ai bien associé les liens aux boutons mais quand je clique dessus le lien ne s’ouvre pas il y a juste l’image qui s’affiche. Et aussi mes boutons ne sont pas à l’horizontale comment faire?

  • Ma-vie-en-roose Leblog
    Répondre

    Rhoo ! Super astuce ! Moi qui galérais depuis longtemps à taper le code ! Merci mille fois tu me sauves presque la vie !

    Du coup , je t’ajoute ! Merci à Google de m’avoir envoyé sur ton blog !

    http://ma-vie-en-roose.blogspot.fr

    Viens voir tes superbes boutons ! hihi :)

  • Pascaline
    Répondre

    Merci merci
    installés les petits boutons sur mon blog… trop chouette.
    Bonne soirée !

  • Stel
    Répondre

    Coucou! J’ai essayé ta méthode.. 2 fois! Je fais tout comme tu l’as écris… Mais rien ne s’affiche sur mon blog …
    :(
    Besoin de ton aide!

  • Ecumier
    Répondre

    Le petit souci est que, sous blogger, on ne peut que mettre un widget personnel via une adresse URL.. :/ Je suis perduuuuuue…

  • Sacha S
    Répondre

    Hey :)
    Super tuto ! Merci beaucoup pour ton aide…j’ai utilisé tes boutons, seulement j’aimerais personnaliser mon blog jusqu’au et pouvoir créer mes propres boutons…pourrais-tu faire un tuto sur ça ? S’il te plait !

  • Cécile
    Répondre

    Chouette enfin quelqu’un qui explique bien, je vais faire mes brochettes de fruits et j’essaye immédiatement!
    Je débute juste en temps que bloggeuse et pour le moment je n’en suis qu’au design du blog!!!!
    Bisous ♥♥♥
    Cécile! <3!!

  • Théodora
    Répondre

    Merci beaucoup pour ce cadeau, ces boutons sont vraiment jolis !!!

  • Sixtine
    Répondre

    Merci de tout cœur ! Mon blog ressemble à quelque chose maintenant…

  • Un journal de filles
    Répondre

    Merci pour ce tuto !
    Ça m’a beaucoup aidé !
    Tout est superbement bien expliqué :)

    Gros bisous :)
    http://unjournaldefilles.blogpost.fr

  • Leelou's World
    Répondre

    Coucou Elsa ! J’aimerais beaucoup un tuto sur comment créer ses boutons de réseaux sociaux ♥

  • Delinotte
    Répondre

    Bonjour ^^
    Ton site est génial ! Je suis en train d’appliquer tes astuces pour améliorer l’interface de mon blog et le truc des boutons est super !

    J’ai une question : serais-tu comment faire pour installer des boutons sociaux personnalisés avec un compteur d’abonné ? J’ai beau cherché partout, je ne trouve pas la réponse pour blogger

  • Elodie
    Répondre

    Je voulais juste te dire merci pour ton blog, tes tuto etc… et te signaler que j’avais utilisé les boutons que tu as gracieusement offert pour mon blog :)

    Elodie

  • Marine Rimmel
    Répondre

    Merci beaucoup je vais essayer ca :)

  • Abby
    Répondre

    Coucou,
    Comment faut-il faire pour que les boutons soient alignés et non pas un au dessus de l’autre?

  • Léopoldine Cannibale
    Répondre

    Merci pour cet article !

  • Céline
    Répondre

    Merci, merci, merci… depuis le temps que je galère avec ses maudits gadgets!!!

  • mehdi
    Répondre

    Bonjour, j’ai fait ce que tu a dit dans les explication mais sa ne marche pas est j’ai tout essaye j’ai change alors le modèle de mon Blog et la sa a marche et le modèle de mon Blog et affichage dynamique est sa ne marche pas comment faire?

  • Céline
    Répondre

    Merci beaucoup Madame !!

  • beltane.stitch
    Répondre

    1000 merci….

  • Répondre

    Je découvre ton blog ce soir (via le blog de la Mum Bolo dont tu as fait le design)
    Et qu’est ce que je m’enrichis en astuces!!! Si j’avais connu celle la avant pour trouver le code html….
    Merci pour tout en tout cas, je sens que je vais devenir addict!!! :-)

  • Kate
    Répondre

    Bonjour, merci beaucoup pour cette article, top! 1000merci xx kate

  • Justine
    Répondre

    Hey, personnelement je trouve pas le truc pour mettre un gadget HTM il me met que en URL..

  • Madeinsunnydale
    Répondre

    Coucou! Merci infiniment pour ce tutoriel :)

  • Nianga Léna
    Répondre

    Super! Merci. Article intéressant et hyper utile. ^_^

  • Cocounette
    Répondre

    J’ai réussi du premier coup, merci beaucoup!!!

  • Melily
    Répondre

    Un ENÔOOOORME merci je cherche depuis des jours et des jours…. bisous

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Contact

Besoin d’un design de blog personnalisé et à votre image ?

Tapez votre recherche puis appuyez sur la touche Entrée