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


La plupart des blogs affichent des icônes de réseaux sociaux pour promouvoir leurs profils 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 des icônes de réseaux sociaux

Si vous vous sentez l’âme d’un graphiste, vous pouvez bien sûr créer vos propres icônes… mais si ce n’est pas le cas, il existe une solution beaucoup plus facile : télécharger des icônes existantes !

Voici quelques liens vers des sources d’icônes intéressantes :

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

Si vous utilisez la plateforme WordPress.com et que vous ne voyez pas la partie « Détails du fichier attaché » ou « Réglages de l’affichage du fichier attaché », vérifiez que vous utilisez l’administration complète de votre blog, accessible en tapant /wp-admin/ à la fin de l’adresse du blog.

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 « HTML Personnalisé » et faites-le glisser vers la zone de droite qui s’appelle « Colonne latérale » ou sidebar.

Créer un widget HTML personnalisé sur WordPress
Créer un widget HTML personnalisé 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
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 *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

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

  • Martin

    Bonjour,
    Merci beaucoup pour votre article. J’ai suivi le pas à pas et j’ai réussi à installer les icônes :-)
    Maintenant, je souhaite afficher les boutons de partage pour chaque article. Savez-vous m’aider ? j’utilise le thème « Lucienne ». Merci par avance.

    Répondre à Martin
  • Guillaume

    Merci pour ce tutoriel ! Néanmoins, j’ai des soucis pour intégrer la ligne de code target= »_blank ». En effet, je n’arrive pas à la positionner correctement.

    Répondre à Guillaume
    • Marlène

      Quel est le problème exact ? Car je donne un exemple dans l’article.

      Répondre à Marlène
    • Guillaume

      Je vous ai répondu, mais commentaire n’apparaît pas. Désolé pour ce nouveau message, il s’agit d’un test, afin de vérifier si je ne me suis pas précédemment trompé.

      Répondre à Guillaume
    • Guillaume

      Mon message n’a donc pas été pris en compte. -_-
      Je vais vous réexpliquer mon problème : quand je rentre le code, j’ai un / avant le > <a / rel= »nofollow »> que vous n’avez pas dans votre exemple. Quand je le place entre le / et le >, j’ai un message d’erreur et quand je le place avant le /, il ne se passe rien.

      Répondre à Guillaume
    • Marlène

      Bonjour Guillaume, le code est filtré dans les commentaires ;)

      Ce n’est pas normal qu’il y ait un slash dans la partie « a href ». Vous confondez peut-être en essayant de copier le target= »_blank » dans la partie « img src » qui, elle, se termine par /> ?

      Répondre à Marlène
    • Guillaume

      En effet, j’avais inclus la ligne de code dans celle de l’image, quelle nouille ! xD Merci beaucoup pour votre aide.

      Répondre à Guillaume
  • Céline

    Bonjour,
    Merci beaucoup pour votre aide
    J’ai enfin réussi à mettre tous les icônes que je voulais
    super facile bien expliqué

    Répondre à Céline
  • marie-danielle

    Merci beaucoup pour cette aide.
    J’ai réussi à mettre l’ icone dans la première page de mon site.
    Tout est clair avec des copies d’écrans: le Top ! Bravo
    Merci encore

    Répondre à marie-danielle
    • Marlène

      Merci Marie-Danielle, contente d’avoir pu donner un coup de pouce ;)

      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.