Ajouter des icônes de réseaux sociaux à son blog Blogger


Après vous avoir expliqué comment ajouter un bouton Pin It (Pinterest) ou un Page Plugin Facebook à votre blog Blogger, aujourd’hui nous allons voir comment afficher des icônes menant vers les réseaux sociaux sur le côté de votre blog ou en bas de celui-ci.

Pour y parvenir, il y a plusieurs étapes à franchir :

  • Choisir les icônes dont vous avez besoin.
  • Mettre en ligne ces images quelque part pour les stocker.
  • Demander à Blogger d’afficher les icônes tout en faisant un lien dessus pour qu’elles conduisent vos lecteurs à vos différents comptes sur les réseaux sociaux.

Je vais vous montrer comment faire dans cet article.

Etape 1 : choisir ses icônes de réseaux sociaux

Il existe des icônes de réseaux sociaux de styles très différents. Si vous ne savez pas créer ce type d’icônes vous-mêmes, voici 2 sources qui proposent des icônes gratuites au format circulaire ou carré.

  • Le site Flat Icon – Sur Flat Icon, vous pouvez trouver des dizaines d’icônes de réseaux sociaux gratuites (et payantes). Vous pouvez soit chercher une icône individuellement en entrant le nom d’un réseau social précis, soit télécharger un pack d’icônes parmi tous ceux qui existent.
  • Icônes circulaires créées par Vervex – Le pack peut être téléchargé sur Deviant Art (le lien “Download” se trouve dans la colonne de droite, en haut). Si ces icônes vous paraissent trop petites pour votre blog, vous pouvez à la place télécharger le pack Somacro (grandes icônes) et les redimensionner vous-mêmes à la taille souhaitée.

    Icônes de réseaux sociaux rondes

Après avoir téléchargé le fichier, dézippez-le (avec WinRar sur PC par exemple, avec un double clic dessus sur Mac). Vous allez obtenir une multitude d’icônes au format .png. Si vous y touchez, pour les redimensionner par exemple, pensez à les réenregistrer en .png car ce format est capable de gérer la transparence tandis qu’un format .jpg par exemple vous mettra un fond blanc derrière l’icône, ce qui n’est pas forcément joli selon le design de votre blog.

Choisissez ensuite les icônes dont vous avez besoin. Pour mon exemple, je vais prendre Twitter, Facebook et Instagram. Vos icônes doivent être de la même taille. Pour plus de simplicité, renommez-les avec le nom du réseau social, tout en minuscules et sans espace comme je l’ai fait ici :

Icônes Twitter, Facebook et Instagram
Icônes Twitter, Facebook et Instagram

Etape 2 : mettre en ligne les icônes sur Blogger

Pour stocker nos icônes sur le web, nous allons devoir les mettre en ligne sur votre blog. C’est parti !

Uploader les icônes de réseaux sociaux

1. Cliquez sur le bouton “Nouvel Article” comme si vous vouliez rédiger un nouveau post. Vous pourrez supprimer ce brouillon d’article une fois la procédure terminée.

2. Cliquez sur le bouton “Image” comme lorsque vous insérez une photo sur votre blog.

Insérer une image sur Blogger
Insérer une image sur Blogger

3. Cliquez sur “Choisir les fichiers” et choisissez vos icônes sur votre disque dur. Elles sont alors uploadées sur votre blog, ce qui devrait ressembler à ça :

Importer une image depuis son disque dur sur Blogger
Importer une image depuis son disque dur sur Blogger

4. Sélectionnez les icônes mises en ligne puis cliquez sur le bouton bleu “Ajouter les images sélectionnées”. Vos images devraient apparaître dans votre brouillon d’article comme ci-dessous. Ne cherchez pas à les aligner horizontalement, ce n’est pas important pour le moment.

Icônes dans un article Blogger
Icônes dans un article Blogger

Créer des liens vers les réseaux sociaux

C’est très simple !

1. Sélectionnez la première image et cliquez sur le bouton “Associer” (juste à côté du bouton “Image” sur lequel vous avez cliqué pour insérer les icônes).

Dans le champ “Adresse web”, entrez l’adresse du réseau social correspondant à l’image. Par exemple, dans mon cas, l’icône correspond à Instagram donc je mets l’adresse de mon compte Instagram. Cochez aussi la case “Ouvrir ce lien dans une nouvelle fenêtre”. Ça permettra aux gens de rester sur votre blog même s’ils ouvrent en plus votre page sur les réseaux sociaux.

Ajouter un lien sur une image sur Blogger
Ajouter un lien sur une image sur Blogger

2. Faites la même manipulation pour créer un lien sur chaque icône de réseau social.

Etape 3 : Récupérer le code des icônes de réseaux sociaux

Dans un premier temps, sélectionnez toutes les icônes… et cliquez sur le bouton “Supprimer la mise en forme”. Vos icônes vont normalement se réaligner sur la gauche.

Supprimer la mise en forme sur Blogger
Supprimer la mise en forme sur Blogger

Ensuite, sur la gauche de votre barre d’outils Blogger, vous devez voir un bouton “HTML”. Cliquez dessus et ne paniquez pas en voyant du code ;)

Voir le HTML sur Blogger

Ce code contient plein d’informations : le lien de vos icônes, le lien de vos réseaux sociaux… et c’est exactement ce dont nous avons besoin !

Code des images sur Blogger
Code des images sur Blogger

Vous allez devoir personnaliser seulement deux choses :

  • Commencez par retirer tous les <br /> que vous voyez dans le code. Ça correspond à des sauts de ligne. Dans notre cas, nous voulons aligner les icônes horizontalement donc nous n’avons pas besoin de ces sauts de ligne.
  • Ensuite, ajoutez ce bout de code, avec le point-virgule : &nbsp; A quel endroit ? Après chaque </a> que vous voyez, sauf le dernier. Ça permet de créer un petit espace entre les icônes, au lieu qu’elles soient toutes collées.

Ça devrait, à l’arrivée, ressembler à quelque chose comme ça (bien sûr, avec vos propres réseaux sociaux et vos propres liens d’images) :

Le code des icônes de réseaux sociaux prêt à l'emploi
Le code des icônes de réseaux sociaux prêt à l’emploi

Vous y êtes presque !

Etape 4 : créer un gadget Blogger avec les icônes

1. Copiez le code… et ouvrez un nouvel onglet, dans lequel vous allez retourner sur Blogger. Cette fois-ci, allez dans la rubrique “Mise en page” du menu (situé dans la colonne de gauche).

2. A l’endroit où vous souhaitez afficher vos icônes, cliquez sur “Ajouter un gadget”. Dans mon exemple, nous allons les afficher sur le côté du blog.

Ajouter un gadget sur Blogger

3. Parmi les options qui s’affichent, choisissez “HTML/Javascript”.

Ajouter un gadget HTML/Javascript à Blogger

4. Vous avez juste à coller dans la partie “Contenu” le code que vous aviez copié et à enregistrer. Vous n’êtes pas obligé de mettre un titre (sauf si vous voulez afficher quelque chose au-dessus de vos icônes, par exemple “Suivez-moi sur les réseaux sociaux”).

Afficher les icônes de réseaux sociaux dans un gadget
Afficher les icônes de réseaux sociaux dans un gadget

Si vous retournez sur votre blog, vous verrez les icônes s’afficher comme ceci :

Icônes Facebook, Twitter et Instagram sur Blogger
Icônes Facebook, Twitter et Instagram sur Blogger

En les survolant avec la souris, vous pourrez cliquer pour accéder au réseau social de votre choix. Vous pouvez bien sûr ajouter d’autres réseaux sociaux une fois que vous avez compris le principe ! J’espère qu’il vous aidera à afficher vos réseaux sociaux sur votre blog. Si vous avez des questions, n’hésitez pas à réagir dans les commentaires !

Vous pouvez aussi consulter mon article sur la police d’icônes Font Awesome, qui vous permet d’ajouter des icônes à l’intérieur de vos articles ou de vos titres pour améliorer la mise en page !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

130 commentaires sur “Ajouter des icônes de réseaux sociaux à son blog Blogger

  • Sophie

    Hello Marlène, pas facile de se remettre au petit blog familial. Heureusement, tu es là! merci !!!!

    Répondre à Sophie
    • Marlène

      Merci Sophie ! Progresser à petits pas, c’est bien aussi, surtout pour un blog “loisir” ;)

      Répondre à Marlène
  • christophe plc

    Bonjour, merci beaucoup pour les explications, suivies à la lettre !
    Un problème cependant , je n’arrive pas a rendre plus petits mes icônes , et à les séparer (ils sont collés) ..je les veux plus petits , plus discrets , merci encore !

    Répondre à christophe
    • Marlène

      Bonjour Christophe, pour avoir des icônes de petite taille il faut mettre en ligne des icônes de petite taille, ça ne se passe pas dans le code mais en amont, il faut juste redimensionner les icônes au format souhaité avant de les mettre en ligne (via Photoshop, Photofiltre ou autre logiciel d’image). Pour les séparer, on peut soit forcer un espace en mettant le code   entre chaque image, soit mettre du code de mise en forme… mais comme je ne vois pas les icônes sur le blog, je ne sais pas à quoi ressemble le code actuel.

      Répondre à Marlène
  • Claire

    Bonjour !
    J’ai beau réduire la taille de mes images, elles sont toujours énormes une fois que je les mets, c’est bizarre… Du coup tant pis ^^ mais merci quand même pour cet article :)

    Répondre à Claire
    • Marlène

      Hello, comment procèdes-tu pour les redimensionner ? Tes images font quel format ?

      Répondre à Marlène
  • Manolie

    Bonjour Marlène,
    Je profite de ce message pour te remercier pour ce site et tous tes conseils.Je viens de créer mon blog et tu m’as aidé pour pas mal de choses même si je pars de très très loin et que je ne comprends pas tout, j’ai réussi certaines choses.
    En ce moment je piétine pour mes icônes de réseaux sociaux.Je viens de lire ton article et çà me parait clair mais j’ai une problématique un peu différente, mes icônes sont déjà apparentes sur mon thème et j’aimerai bien les utiliser et non pas en installer d’autres.
    J’aimerai donc relier mes icônes à mes propres liens et non ceux formatés par le thème.Je ne sais pas si je suis claire et si oui, si c’est possible?
    Je te remercie sincèrement par avance si tu as le temps de me répondre car je piétine et commence à me décourager!
    Belle journée.

    Répondre à Manolie
    • Marlène

      Merci de ton commentaire ! Concrètement, il faut à mon avis que tu ailles voir dans Thème > Modifier le code HTML et que tu cherches la partie du code qui correspond aux icônes. Je vois dans ton code que c’est une partie qui commence par <!--Social Icons-->.

      Il y a des lignes avec <a href="#">. A la place du #, il faut indiquer le lien du réseau social correspondant.

      Répondre à Marlène
    • Manolie

      Super!ça marche!Merci beaucoup Marlène, j’ai un peu ramé à le trouver mais c’est fait!
      C’est intéressant en plus, j’aimerai bien savoir faire plus de choses mais petit à petit ..
      Je te souhaite une belle journée.A bientôt!

      Répondre à Manolie
    • Manolie

      Bonjour Marlène,
      Suite à la réponse que tu m’avais envoyée il y a 1 mois pour les icônes de réseaux sociaux sur mon blog, tout allait très bien, j’avais mes icônes et lorsque je cliquais dessus j’arrivais sur mes comptes; et là patatras depuis aujourd’hui mes icônes twitter et insta n’apparaissent plus sur le blog alors que je n’ai touché à rien !
      Ces lignes apparaissent toujours dans mon thème :

      J’avoue je craque, j’ai déja tellement de mal à personnaliser mon blog avec mes petites connaissances , si en plus les choses qui marches disparaissent !
      Est ce que tu peux m’aider s’il te plait ?
      Désolée pour le message de sos :)

      Répondre à Manolie
    • Marlène

      Hello, je pense qu’il y a des bouts de code qui ont sauté car je ne vois plus les balises <ul> et </ul>. Tu as aussi une balise “style” vide qui se balade dans ta balise body… et surtout, tu as écrit : relF='stylesheet' au lieu de rel='stylesheet' sur la ligne qui concerne tes icônes Font Awesome. Je pense que c’est pour ça qu’elles n’apparaissent plus.

      Répondre à Marlène
    • Manolie

      Un GRAND MERCI Marlène, je ne sais pas comment ce fichu F s’est glissé là par hasard mais j’ai retrouvé mes icônes !
      Si seulement je pouvais avoir le quart de tes connaissances pour gérer mon blog . :) frustration quand tu nous tiens !
      Merci merci de prendre de ton temps pour nous aider et pour la rapidité de ta réponse, je vais aller me coucher sereinement :)

      Répondre à Manolie
    • Marlène

      Ca viendra, moi aussi à mes débuts je galérais pendant des après-midis entières sur 3 lignes de code ^^ C’est en faisant ça qu’on apprend !

      Répondre à Marlène
  • Johanne Dagenais

    Help!!! SOS!! Hier j’ai réussi à installer les icônes d’Instagram et Facebook… tout était correct. Puis j’ai eu un moment d’hésitation et j’ai supprimé les “codes” transcrit dans JavaScript me disant que je recommencerais aujourd’hui en y ajoutant aussi Pinterest. Mais là plus rien ne va: quand je mets l’icône d’Instagram et que je clique sur “associer” apparaît un rectangle qui demande de choisir l’alignement et la taille de l’image…je choisis et clique. Un code apparaît…et je ne peux plus suivre les étapes suivantes que vous écrivez! Je crois que j’ai fait une gaffe hier en supprimant tout…Que dois-je faire maintenant? Merci

    Répondre à Johanne
    • Marlène

      Hello Johanne, je ne vois pas vraiment de problème ;) Le code qui apparaît doit correspondre au code de l’icône d’Instagram… Il faudrait donc suivre la même manip pour afficher le code des autres icônes, puis copier le tout dans un gadget Blogger.

      Répondre à Marlène
    • Johanne Dagenais

      Merci! J’ai finalement trouvé l’erreur que je faisais et j’ai réussi!

      Répondre à Johanne
  • Adrien

    Salut, j’ai coché la case “Ouvrir le lien dans une nouvelle fenêtre” mais sa marche pas, quand je clique sa redirige le site sur le réseaux sociaux

    Répondre à Adrien
    • Marlène

      Hello Adrien, je vois que le problème a été résolu ! Sur Blogger il y a souvent des histoires de cache, la “vieille” version de la page est conservée en mémoire et il faut vider le cache pour que les modifications que l’on fait soient visibles sur le blog.

      Répondre à Marlène
  • Nathan

    Salut j’ai adorer ton article car il m’a vachement aidé.

    Cela fait un moment que je te suis et si tu veux tu pourrais venir visiter mon blog.

    Sinon je voulais te demander sur quel plate-forme es tu pour le blog.

    Répondre à Nathan
    • Marlène

      Hello Nathan, contente de t’avoir aidé (j’ai supprimé le lien dans ton commentaire car il apparaît déjà sur ton nom) ! Tu devrais ajouter une page “A propos” sur ton blog, histoire qu’on en sache un peu plus sur toi ;)

      Pour ma part je suis sur WordPress.org.

      Répondre à Marlène
  • Jone

    Merci pour ces super explications !

    Répondre à Jone
  • Cinthia

    Bonjour, je suis désolé j’ai essayer de faire toutes les étapes que tu as marquer mais je n’ai que les icônes qui sont apparus mais c’est pas mes comptes “instagram et facebook” qui apparaissent quand je clique dessus. Merci si vous pouvez m’aider.

    Répondre à Cinthia
    • Marlène

      Bonjour Cinthia, si tu as mis l’adresse de mes comptes, c’est normal que ce soient mes comptes qui apparaissent sur ton blog ;) Tu as juste recopié mon code sans lire l’explication, il faut le personnaliser avec tes propres liens.

      Répondre à Marlène
    • Cinthia

      J’ai vraiment tout essayer mais je n’ai absolument pas compris ce qu’il fallait remplacer et par quoi. Je suis désole mais je n’ai pas compris l’explication du code…

      Répondre à Cinthia
    • Marlène

      A la place du lien de mes comptes, tu mets le lien de tes comptes. Au lieu d’écrire http://www.instagram.com/notuxedo, tu mets l’adresse de ton compte à toi par exemple. Et il faut mettre les images sur ton propre blog comme expliqué dans le tuto, là tu as juste recopié mes images, avec le lien de mon blog…

      Relis ça à tête reposée, étape par étape ;)

      Répondre à Marlène
    • Cinthia

      Génial! Merci beaucoup !

      Répondre à Cinthia
  • Van Haegen Gisèle

    Je tenais à vous remercier pour vos explications très claires. Je débute dans la blogosphère et ne savais pas du tout comment insérer l’icône Facebook sur mon blog. Grâce à vous l’insurmontable est devenu réalisable. Merci.

    Répondre à Van
  • Sophie

    Je suis en train de créer et configurer mon blog et autant te dire que ton site est une mine d’infos génial, merci.
    Sophie

    Répondre à Sophie
  • Céline

    Merci! Bouclé en 10 min! Votre blog est une vraie mine d’informations, je le consulte dès que j’ai besoin de modifier mon blog ;)

    Répondre à Céline
    • Céline

      J’ai centré les icônes réseaux en suivant vos instructions dans les commentaires.
      Pouvez-vous m’aider pour justifier le texte du gadget “bienvenue”?
      Merci d’avance!

      Répondre à Céline
    • Marlène

      Bonjour Céline, vous pouvez ajouter ce code à votre thème, au niveau de la partie “style” :
      div#Text1.widget.Text {text-align:justify}

      Répondre à Marlène
  • LePlacardDeDelph

    Bonsoir et un grand merci pour ce tuto, j’ai suivi à la lettre vos conseils et ça s’est bien affiché du premier coup. Ça a quand même plus de classe que des blocs HTML séparés pour chaque réseau ! Blogger offre moins de possibilités que WordPress, mais quand on a commencé par ça, migrer ensuite semble compliqué sans perdre ses articles. Alors découvrir ces tutos pour améliorer les choses, c’est un vrai plus :-)

    Répondre à LePlacardDeDelph
  • Sébastien Lorgnier

    Merci Marlène, 5 minutes passées sur ton site et un avis déjà plus que concluant lorsque tes explications ci-dessus nous auront permis d’atteindre notre but en quelques minutes.
    Au delà d’être efficace ! Du coup on va fouiller encore bien davantage parmi tes articles, mon petit doigt me dit que je vais faire de sublimes découvertes.
    Bonne soirée,

    Répondre à Sébastien
  • Shizcake

    Bonjour !

    Merci beaucoup pour cet article ! Je débute mon blog et il m’a aidé !
    Je vais le recommander ! :)

    Bonne journée !

    Répondre à Shizcake
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.