Comment ajouter des icônes de réseaux sociaux sur WordPress


La plupart des blogs affichent des icônes de réseaux sociaux. Je vais aujourd’hui vous expliquer comment faire sur WordPress. Vous pourrez installer ces icônes dans la sidebar de votre blog (c’est-à-dire la colonne qui se trouve sur le côté de vos articles) ou à un autre endroit si votre thème le permet. C’est parti !

Choisir ses icônes

J’ai déjà donné sur le blog des liens vers des sources d’icônes intéressantes, je vous les redonne ici :

Ces icônes sont toutes gratuites et utilisables sur votre blog. Vous trouverez bien d’autres modèles d’icônes de réseaux sociaux via Google Images mais pensez toujours à vérifier qu’elles sont libres de droits !

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 les modifiez ou que vous les redimensionnez, pensez à garder ce même format .png : il sait gérer les fonds transparents là où un format comme le .jpg vous affichera par défaut un fond blanc, ce qui n’est pas toujours esthétique sur votre blog.

Choisissez les icônes dont vous avez besoin. Je vais vous montrer un exemple en créant des liens vers les réseaux sociaux Twitter, YouTube et Pinterest mais vous pourrez bien sûr ajuster le tuto selon vos besoins ! Vos icônes doivent être de la même taille pour que ce soit joli. Si nécessaire, commencez par les renommer en minuscules et sans espace avec le nom du réseau social :

Installer des boutons de réseaux sociaux sur WordPress

Uploader ses icônes de réseaux sociaux sur WordPress

Maintenant que nos icônes sont prêtes, nous allons les mettre en ligne sur WordPress. Pour les débutants, la méthode la plus simple consiste à créer un nouvel article (menu Articles > Ajouter). Cliquez ensuite sur Ajouter un média puis sur “Sélectionner des fichiers”. Vous pouvez ensuite choisir les icônes de réseaux sociaux que vous avez créées.

Ajouter des images à un article WordPress

Avant de valider, vous devez vous intéresser à la zone située à droite de l’écran. Pour chacune des icônes, vous devez :

  • Compléter à droite les champs “Titre” et “Texte alternatif” : c’est important d’avoir ce réflexe pour le référencement des images mais aussi pour les lecteurs malvoyants (ils utilisent des lecteurs d’écran capables de leur lire cette description). Exemple pour YouTube :

    Compléter la description d'une image sur WordPress

  • Dans la zone “Réglages de l’affichage du fichier attaché”, réglez l’alignement sur “Aucun”, choisissez “Lier à – Lien personnalisé” et entrez le lien de votre compte sur le réseau social concerné. Exemple pour YouTube :

    Faire un lien sur une image dans WordPress

Une fois que c’est fait, cliquez sur “Insérer dans l’article”. Là, vous pouvez réorganiser vos images dans l’ordre souhaité.

Afficher les boutons de réseaux sociaux sur WordPress

Pour afficher ces boutons de réseaux sociaux à l’endroit souhaité, nous devons copier le code qui permet de les afficher. Pas de panique, c’est un simple copier-coller ! Toujours sur la page de rédaction d’un article, vous allez cliquer sur l’onglet “Texte” (à côté de l’onglet “Visuel”).

Wordpress - Afficher le code HTML

Du code s’affiche, pas de panique :) C’est grâce à ce langage mystérieux, le HTML, que l’ordinateur comprend qu’il doit afficher de jolies icônes de réseaux sociaux avec un lien dessus ! Sélectionnez le code et copiez-le.

Ensuite, nous allons nous rendre dans la rubrique Apparence > Widgets du blog. Vous pouvez l’ouvrir dans un nouvel onglet. Avec certains thèmes WordPress, vous n’aurez ici qu’une seule possibilité : mettre vos icônes dans la sidebar du blog. Avec d’autres thèmes, vous aurez parfois plusieurs possibilités : certains thèmes permettent d’installer des widgets dans le footer (= en bas du site), dans le header (= tout en haut du site) ou ailleurs ! A vous de choisir où vous avez envie d’afficher vos icônes. Je vais prendre le cas le plus classique : on a envie d’afficher ses icônes dans la colonne latérale (sidebar) du blog.

Sur la gauche, vous avez une liste des widgets disponibles. Choisissez le widget “Texte” et faites-le glisser vers la zone de droite qui s’appelle “Colonne latérale” ou sidebar.

Créer un widget texte sur WordPress

Ensuite, vous pouvez lui donner un titre ou pas, comme vous voulez ! Copiez dans la zone sous le titre le code que l’on a récupéré à la deuxième étape. Ça devrait ressembler à l’image ci-dessous, avec l’adresse de vos propres réseaux sociaux bien sûr !

Widget réseaux sociaux

Vous n’avez plus qu’à cliquer sur “Enregistrer”… et hop, nos boutons de réseaux sociaux sont bien affichés !

Boutons de réseaux sociaux sur WordPress

Vous pouvez ensuite supprimer le brouillon d’article que vous aviez créé pour insérer les icônes. Les icônes ne disparaîtront pas car elles sont sauvegardées dans votre bibliothèque de médias sur WordPress même si vous supprimez l’article.

Ouvrir les liens dans une nouvelle fenêtre

Si vous souhaitez que les liens s’ouvrent dans une nouvelle fenêtre, vous pouvez ajouter target="_blank" dans le code de chaque lien, comme ceci :
<a href="http://www.twitter.com" target="_blank"></a>

Ce tutoriel fonctionne aussi bien sur WordPress (plateforme gratuite) que sur WordPress.org (blog auto-hébergé). J’espère qu’il vous aidera ! N’hésitez pas aussi à regarder mon tutoriel pour installer Font Awesome sur un blog : c’est une police d’icônes qui vous donne accès à une multitude d’icônes que vous pouvez utiliser dans vos contenus ou dans votre design.


Poster un commentaire

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

129 commentaires sur “Comment ajouter des icônes de réseaux sociaux sur WordPress

  • Shaywen

    Mille mercis, votre article m’a été d’une grande aide ! <3

    Répondre à Shaywen
  • clubcoutureMG

    Bonjour Marlène
    Juste pour dire merci, ce tuto est top. Je viens de l’appliquer à mon site et ça fonctionne.

    Répondre à clubcoutureMG
  • Maarkuus

    Bonjour Marlène,
    Je cherche depuis quelques jours l’endroit où est situé le widget dans le code. Je ne trouve pas la ligne de code qui correspond au compteur facebook (plugin simple social buttons). En effet je souhaiterai rajouter mes like perdus lors de mon passage en https…
    Merci pour ton aide!

    Répondre à Maarkuus
    • Marlène

      Bonjour, c’est un problème différent du sujet évoqué dans le tutoriel, il faut te tourner vers le support du plugin ou regarder dans les options s’il y a une fonctionnalité prévue pour ça. Le code du plugin se trouve dans le dossier wp-content > plugins de WordPress mais il ne faut pas y toucher car à la moindre mise à jour les personnalisations disparaîtront.

      Répondre à Marlène
  • Saku

    Super ! Merci pour ces conseils !!!

    Répondre à Saku
  • Esther

    Super article, exactement ce que je voulais. Merci beaucoup !

    Répondre à Esther
  • Kerim Blogueur

    Salut Marlène ! Excellent ton article. Merci de m’avoir aidé. À bientôt.

    Répondre à Kerim
  • Marie

    Bonsoir, je viens de lire ton article, seulement impossible de trouver la zone ” Réglages de l’affichage du fichier attaché”, je ne sais pas si la version de wordpress a été modifiée depuis l’écriture de ton article, mais je ne trouve aucun moyen de relier l’image à un lien personnalisé

    Répondre à Marie
    • Marlène

      Hello Marie, cette partie existe toujours. Si tu utilises WordPress.com, vérifie que tu es bien sur la bonne administration (nom de ton blog suivi de /wp-admin/). Sinon tu as une version très allégée de WordPress, qui, me semble-t-il, n’a pas toutes les options…

      Répondre à Marlène
  • Roberto

    Chère Marlène, un tout grand merci pour ce tuto. Détaillé, didactique, précis, facile. Que demander de mieux ;-)

    Répondre à Roberto
    • Marlène

      Merci Roberto !

      Répondre à Marlène
    • AMINA

      Merci pour cette information très bien expliquée. Je cherche cette information depuis longtemps.
      Merci infiniment, ce tutoriel va m’aider à faire connaître mon site. TNKS A LOT.

      Répondre à AMINA
    • Marlène

      Contente que ça puisse t’aider !

      Répondre à Marlène
  • Cathy

    Salut! Ton tuto est vraiment bien! :) J’ai suivi toutes les étapes mais ça ne fonctionne pas… Je crois que c’est vers la fin qu’il y a un problème: dans mon cas, sur la page des widgets je n’ai pas «colonne latérale» seulement default sidebar et default footer. Je veux que mon icône s’affiche en haut complètement de ma page à droite. Est-ce qu’il me manque une étape?
    Merci à l’avance!

    Répondre à Cathy
    • Marlène

      Hello Cathy, chaque thème est conçu différemment. Chez toi, la sidebar s’appelle sans doute “default sidebar” donc il suffit de mettre le widget à cet endroit. Si tu souhaites mettre le widget ailleurs et que ce n’est pas prévu par ton thème, il faut créer un nouvel emplacement de widget mais ça implique de mettre les mains dans le code.

      Répondre à Marlène
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.