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
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 !
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.
Merci pour cette astuce! Je débute et j’ai tout de même réussiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii! :-)
Bravo ! :-)
bravo !!!
C’est top. je viens d’essayer. Je ne connaissais pas l’astuce pour récupérer les codes html. Merci
J’adore tes tutos! Tout parait tellement simple! Merci
Merci merci Elsa, c’est vraiment mieux que ce que j’avais fait et en plus je vais pouvoir faire mes propres boutons!
Ton article est vraiment génial ! Trop trop bien, merci !
Bises,
Nicoline Defy.
Merci à toi <3 Gros bisous !
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 ;-)
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.
:)
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 ?
Je vais essayer de faire un tuto là dessus alors :-) Bientôt j’espère !
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 :)
De rien ! C’est vrai que c’est une méthode ultra simple !
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..
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 :-)
Même en mettant un titre ça ne fonctionne pas pour moi…
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 :)
merci mille fois, cet article tombe pile poil – essayé et adopté en 2 minutes
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 :)
Aaaaaah merci beaucoup pour tes conseils ! Enfin un bon tuto :) !
Bises, Sarah.
Merci pour cet article! Cependant, comment faire pour les aligner? :)
Merci beaucoup ! =)
Liahlyne
Super et merci beaucoup :)
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
Super blog, super tutos nous disons chapeau ! A l’occasion passe nous visiter :3 Bonne continuation !
leschatonmarinieres.blogspot.fr
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 !
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.
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 !
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
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 :)
Super, je suis ravie de t’avoir un peu aidé :-)
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
À 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 !
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/
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 :-)
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 :/
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
Tu m’as sauvée!!!!! Merci :D
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! :)
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 !!
Merciiiiiiiiiiii
Merci beaucoup grâce à tes explications je suis enfin arrivée à le faire après maintes tentatives ! ♥
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.
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!
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 :)
Merci merci merci ! ça fait longtemps que je veux savoir le faire et en fait c’est tout simple ! Fallait y penser ^^
Mille mercis !!! je cherchais depuis longtemps ! by the way ton blog est magnifique !
Bonne soirée
Je viens de créer mon gadget mais on ne le voit pas sur le blog! :'(
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?
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 :)
Merci merci
installés les petits boutons sur mon blog… trop chouette.
Bonne soirée !
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!
Le petit souci est que, sous blogger, on ne peut que mettre un widget personnel via une adresse URL.. :/ Je suis perduuuuuue…
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 !
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!!
Merci beaucoup pour ce cadeau, ces boutons sont vraiment jolis !!!
Merci de tout cœur ! Mon blog ressemble à quelque chose maintenant…
Merci pour ce tuto !
Ça m’a beaucoup aidé !
Tout est superbement bien expliqué :)
Gros bisous :)
http://unjournaldefilles.blogpost.fr
Coucou Elsa ! J’aimerais beaucoup un tuto sur comment créer ses boutons de réseaux sociaux ♥
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
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
Merci beaucoup je vais essayer ca :)
Coucou,
Comment faut-il faire pour que les boutons soient alignés et non pas un au dessus de l’autre?
Merci pour cet article !
Merci, merci, merci… depuis le temps que je galère avec ses maudits gadgets!!!
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?
Merci beaucoup Madame !!
1000 merci….
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!!! :-)
Bonjour, merci beaucoup pour cette article, top! 1000merci xx kate
Hey, personnelement je trouve pas le truc pour mettre un gadget HTM il me met que en URL..
Coucou! Merci infiniment pour ce tutoriel :)
Super! Merci. Article intéressant et hyper utile. ^_^
J’ai réussi du premier coup, merci beaucoup!!!
Un ENÔOOOORME merci je cherche depuis des jours et des jours…. bisous
Merci énormément ! Grace à ces informations bien expliquées j’ai pu ajouter mes boutons -ceux que vous m’aviez offerts ;) – sur blogger. C’était très utile
En 2020 ça reste toujours valable. Je débute mon blog et la procédure décrite par Blogger est erronée, ou mal comprise, mais en tous cas, en reprenant la syntaxe de celle-ci , ça fonctionne :)
Merci