Comment installer des boutons de réseaux sociaux sur son blog ?

reseaux-sociaux-blogger

Comment installer des boutons de réseaux sociaux sur son blog ?

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 ? Réponse dans la suite de l’article !
boutons-re-CC-81seaux-sociaux
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 (clique droit  > enregistrer sous). Et oui, c’est mon cadeau du jour ! Vous avez le choix entre deux séries que voici :
instagram-bouton google-252B-bouton facebook-bouton twitter-bouton
bouton-google- bouton-instagram bouton-facebook bouton-twitter
e-CC-81crire-nouvel-article-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 !
charger-boutons-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
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
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
C’est terminé ! Vous pouvez maintenant effacer l’article, ou le laisser en brouillon :-)
Des questions ? Ça se passe dans les commentaires !
76 Comments
  • m a y o n mayon Mayon.

    13 janvier 2014 at 10:49 Répondre

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

  • Catherine

    13 janvier 2014 at 12:59 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

    13 janvier 2014 at 2:47 Répondre

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

  • cetomontreal

    13 janvier 2014 at 3:29 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

    13 janvier 2014 at 5:42 Répondre

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

    Bises,
    Nicoline Defy.

  • Barbara

    13 janvier 2014 at 7:52 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

    16 janvier 2014 at 7:22 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

    16 janvier 2014 at 6:05 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 ❤

      19 janvier 2014 at 8:38 Répondre

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

  • Snake Leah

    17 janvier 2014 at 8:10 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 ❤

      19 janvier 2014 at 8:36 Répondre

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

  • Benjamin Tomlinson

    18 janvier 2014 at 9:20 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 ❤

      19 janvier 2014 at 8:36 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ë

      30 mars 2014 at 11:01 Répondre

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

  • Elsa Pioupiou

    22 janvier 2014 at 4:24 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

    22 janvier 2014 at 4:34 Répondre

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

  • Lilie In The Cloud

    23 janvier 2014 at 9:03 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

    27 janvier 2014 at 7:23 Répondre

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

    Bises, Sarah.

  • Rose

    29 janvier 2014 at 4:34 Répondre

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

  • Liah Lyne

    31 janvier 2014 at 4:02 Répondre

    Merci beaucoup ! =)
    Liahlyne

  • Charlice Lbt

    9 février 2014 at 9:18 Répondre

    Super et merci beaucoup :)

  • Agathe Emma

    13 février 2014 at 9:36 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

    14 février 2014 at 4:09 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

    25 février 2014 at 10:30 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É

    3 mars 2014 at 12:18 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

    13 mars 2014 at 7:29 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

    17 mars 2014 at 4:36 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

    26 mars 2014 at 9:55 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 :)

    • Elsa ❤

      3 avril 2014 at 1:58 Répondre

      Super, je suis ravie de t’avoir un peu aidé :-)

  • Cloë

    30 mars 2014 at 10:58 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 ❤

      3 avril 2014 at 1:58 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

    3 avril 2014 at 1:54 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 ❤

      3 avril 2014 at 1:57 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

    6 avril 2014 at 9:27 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

    11 avril 2014 at 9:31 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

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

    17 avril 2014 at 11:32 Répondre

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

  • Camomille

    18 avril 2014 at 5:20 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

    10 mai 2014 at 3:10 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

    13 mai 2014 at 10:41 Répondre

    Merciiiiiiiiiiii

  • Bé'

    27 mai 2014 at 3:30 Répondre

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

  • Mlle le Chat

    29 mai 2014 at 10:13 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

    29 mai 2014 at 10:20 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

    11 juin 2014 at 9:43 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

    19 juin 2014 at 1:48 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

    22 juin 2014 at 6:53 Répondre

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

  • Doren Pirecci

    25 juin 2014 at 12:00 Répondre

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

  • LuluuuMakeUp

    30 juin 2014 at 11:01 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

    3 juillet 2014 at 11:51 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

    3 juillet 2014 at 9:03 Répondre

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

  • Stel

    22 juillet 2014 at 12:22 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

    24 juillet 2014 at 5:07 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

    28 juillet 2014 at 1:56 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

    23 août 2014 at 12:51 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

    31 août 2014 at 8:18 Répondre

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

  • Sixtine

    2 septembre 2014 at 3:39 Répondre

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

  • Un journal de filles

    27 octobre 2014 at 8:17 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

    1 novembre 2014 at 2:12 Répondre

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

  • Delinotte

    3 novembre 2014 at 5:18 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

    16 novembre 2014 at 12:10 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

    28 novembre 2014 at 1:35 Répondre

    Merci beaucoup je vais essayer ca :)

  • Abby

    20 décembre 2014 at 7:48 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

    15 janvier 2015 at 11:50 Répondre

    Merci pour cet article !

  • Céline

    29 mai 2015 at 12:13 Répondre

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

  • mehdi

    11 juillet 2015 at 11:55 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

    23 septembre 2015 at 1:18 Répondre

    Merci beaucoup Madame !!

  • beltane.stitch

    30 novembre 2015 at 2:39 Répondre

    1000 merci….

  • priscilla maman double mixte

    22 janvier 2016 at 8:22 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

    29 janvier 2016 at 2:39 Répondre

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

  • Justine

    14 février 2016 at 7:46 Répondre

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

  • Madeinsunnydale

    30 mai 2016 at 9:06 Répondre

    Coucou! Merci infiniment pour ce tutoriel :)

  • Nianga Léna

    17 août 2016 at 2:17 Répondre

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

  • Cocounette

    1 septembre 2016 at 4:37 Répondre

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

Post a Comment