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 e-mail ne sera pas publiée.

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.

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

  • Une Fille à l'West

    Bonjour, je ne sais pas comment ça se fait mais je suis bloquée à l’étape « Réglages de l’affichage du fichier attaché », je en trouve pas où cela se trouve. Est-ce au moment de téléverser l’image ou dans les paramètres du bloc dans le corps de l’article ?

    Répondre à Une
    • Marlène

      Bonjour, sur l’éditeur Gutenberg il faut d’abord insérer l’image, puis la survoler avec la souris ce qui fait apparaître le symbole du lien (une « chaîne »), puis entrer le lien de son choix en cochant « Ouvrir dans un nouvel onglet ».

      Répondre à Marlène
  • Chloé

    Un million de fois merci !!

    Répondre à Chloé
  • Menthine

    Bonjour Marlène,

    Je suis bloquée dès le début du tuto… En effet, vous spécifiez qu’il faut garder les images sous format PNG (ce que je fais) cependant quand je créé un article pour y ajouter les icônes un message apparaît « Désolé ce type de fichier n’est pas autorisé pour des raisons de sécurité ». Cela vient-il de mon thème ? J’utilise Kale.

    Merci beaucoup,

    Clémentine

    Répondre à Menthine
    • Marlène

      Hello Clémentine, les PNG ne posent pas de problème de sécurité et font partie des formats autorisés par défaut sur WordPress. Je te conseille donc de vérifier s’il n’y a pas d’erreur dans l’extension du fichier et, si le fichier est bien en « png », de contacter ton hébergeur pour voir pourquoi ça bloque.

      Répondre à Marlène
  • Abdelilah

    Bonjour,
    Tout d’abord, merci beaucoup pour ce tuto détaillé.
    J’ai suivi les étapes et j’ai réussi a faire afficher les icones sur chacun des articles. Mon souci est que les icônes renvoient vers les réseaux sociaux, mais sans partager l’article.. ca m’ouvre Facebook ou autre réseau, mai spas de proposition pour partager..
    Auriez-vous une idée SVP ?
    Merci par avance.

    Répondre à Abdelilah
    • Marlène

      Hello, c’est normal, ce tuto permet d’afficher des icônes, pas des boutons de partage ;) Pour les boutons de partage, il existe plein de plugins pour ajouter cette fonctionnalité, j’utilise Kiwi Social Share pour ma part.

      Répondre à Marlène
  • Axelle

    Bonjour !

    Super article, je n’ai eu aucun mal à créer ce widget !
    J’essaie de mettre des icônes pour le menu des liens sociaux (tout tout en haut de la page), mais pour une raison que j’ignore, seul l’icône d’instagram s’affiche (de manière automatique d’ailleurs)… auriez-vous une idée de comment régler le problème ?

    Merci !

    Répondre à Axelle
    • Marlène

      Hello Axelle, tu as l’air d’utiliser FontAwesome pour afficher les icônes, c’est ce que je vois dans le code du blog. Soit les icônes sont manquantes dans la librairie FontAwesome que tu charges, soit le code que tu mets dans ta feuille de style n’est pas le bon et ne correspond pas à la bonne icône.

      Répondre à Marlène
    • Axelle

      Bonsoir,

      Oui j’ai installé FontAwesome. Ce que je ne comprend pas, c’est que l’icône Pinterest apparaît sans soucis dans la boîte de présentation de l’auteur, mais pas dans le menu des liens… et encore, c’est comme si l’icône y était, mais qu’elle était invisible (espace à côté de l’icône Instagram) :/

      Répondre à Axelle
    • Axelle

      Bonsoir !

      Juste pour annoncer que j’ai finalement réussi à mettre les icônes !
      Je ne suis pas totalement sûre comment j’ai fait parce que j’ai testé pas mal de trucs, mais bon, c’est le résultat final qui compte XD

      Merci encore pour cet article et pour tes conseils !

      Répondre à Axelle
  • Nathalie

    Enfin… ça faisait plus qu’un an que je devais faire cette tâche dans mon to-do-list au boulot. C’est finalement réglé.
    Check!!

    Répondre à Nathalie
    • Marlène

      Bien joué ;) Parfois, ce type de tâche n’est pas très long mais on procrastine un peu !

      Répondre à Marlène
  • Buste

    Merci, merci pour ce tuto très clair, instructif, efficace !

    Répondre à Buste
  • 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
  • Angelilie

    Merci pour le plugin. J’ai créé mes propres boutons de réseaux sociaux et j’aimerais les mettre dans le html de mon thème. Qu’ils apparaissent sur le côté gauche. Mais je ne sais pas où les placer dans le code. Est-ce que c’est possible? J’ai pas envie de tout casser.

    Répondre à Angelilie
    • Marlène

      Hello, j’explique comment faire dans l’article :) Tu peux tout à fait suivre le tuto en utilisant les boutons que tu as créés.

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

    Je voudrais savoir où se trouve la zone « réglages de l’affichage du fichier partagé ». Merci pour ce magnifique tuto.

    Répondre à Faty
    • Marlène

      Elle est juste sous l’endroit où on entre la description de l’image (sous la partie « Détails du fichier attaché »).

      Répondre à Marlène
    • Faty

      Oui j ai trouvé merci beaucoup, j ai réussi toutes les étapes… Bonne continuation et encore merci pour ce partage.

      Répondre à Faty
  • mistigriffe

    Hello Marlène,
    Dans le cas d’un bouton de flux RSS (au lieu d’une icone de réseau social), quel est le lien à mettre dans les « réglages du fichier joint/ lien personnalisé » ? Tu me diras sans doute : celui de ton flux RSS. Mais lorsque j’ai tapé le nom de site/feed/, je tombe sur une extension de Chrome : chrome-extension://nlbjncdgjeocebhnmkbbbdekmmmcbfjd/subscribe.html?http%3A%2F%2Ftropgentillefille.com%2Ffeed%2F et je doute qu’il s’agisse de ce vers où je doive rediriger les lecteurs.
    Je ne sais pas si c’est très clair. Merci pour ta réponse, en tous cas.

    Répondre à mistigriffe
    • Marlène

      Hello, quand je vais sur tropgentille.com/feed/ je vois bien ton flux RSS pour ma part, que ce soit sur Chrome ou sur Firefox :)

      Répondre à Marlène
  • Bourget Emmanuelle

    Bonjour et mrci pour ce tuto. J’ai suivi toute la marche à suivre, pour mon précédent site cela fonctionnait parfaitement mais là, bien que le bouton s’affiche dans la zone centrale de mon footer comme je le souhaitais, lorsque je clique dessus ça rame indéfiniment, en revanche si je fais « ouvrir le lien dans un nouvel onglet » cela fonctionne. Auriez-vous une idée de l’erreur que j’ai pu commettre ? Merci par avance et bonne année !

    Répondre à Bourget
    • Marlène

      Bonjour Emmanuelle, je ne vois pas d’explication logique car si le lien est fonctionnel dans un nouvel onglet, il n’y a aucune raison pour qu’il ne le soit pas dans le même onglet. En tout cas, je doute que le problème vienne du code lui-même. Souvent c’est plutôt l’inverse qui se produit (navigateur qui rame un peu à ouvrir un nouvel onglet).

      Répondre à Marlène
  • Maelle

    Coucou ! Merci pour cet article très intéressant. J’ai essayé de faire la démarche mais il y a eu récemment une maj de wordpress et maintenant il est impossible de changer l’adresse web d’une photo donc la méthode ne fonctionne pas :/ Sauriez-vous comment je pourrais faire ? Merci d’avance :)

    Répondre à Maelle
    • Marlène

      Bonjour Maelle, je ne comprends pas ta question car à aucun moment du tuto il ne faut changer l’adresse web d’une photo :-/ Tu peux m’en dire plus ?

      Répondre à Marlène
    • Maelle

      Après avoir modifier le titre et le texte alternatif, il faut gérer l’alignement puis mettre un lien personnalisé qui est à mon avis le lien vers notre réseau social. Cependant avec la maj wordpress ce n’est plus possible gérer l’alignement ou d’ajouter un lien personnalisé donc avec mon lien html je pourrais seulement avoir les icônes d’affichés mais on ne pourra pas accéder à mes réseaux sociaux en cliquant dessus :/

      Répondre à Maelle
    • Marlène

      Bonjour Maëlle, je viens d’aller voir sur WordPress.com et l’option est toujours disponible donc tu ne dois pas être au même endroit que dans mon tutoriel. Est-ce que tu écris ton article en passant par le tableau de bord complet de WordPress (en entrant /wp-admin/ après le nom de ton blog pour accéder à l’administration) ? Est-ce que tu ajoutes une image en cliquant sur le bouton « Ajouter un média » (et pas « Mettre une image à la Une », auquel cas il est normal que l’option n’apparaisse pas) ?

      Répondre à Marlène
    • Maelle

      J’étais partie dans le menu qui s’affiche directement en cliquant sur « mon site » mais en entrant wp admin j’ai trouvé le bon menu et j’ai réussis la manœuvre :) Merci beaucoup pour ce tuto bien expliqué ! Je suis contente du rendu :)

      Répondre à Maelle
    • Marlène

      Je me rends compte au fil de mes articles qu’en fait, beaucoup de blogueurs sur WordPress.com n’utilisent pas du tout ce menu et certains ne savent pas qu’il existe. Je devrais sans doute le préciser dans les tutoriels, j’essaierai d’y penser à l’avenir !

      Répondre à Marlène
  • Louise

    Bonjour Marlène,
    Je vous remercie de votre grande générosité! J’ai réussi sans difficulté!
    Je suis à refaire mon site sur la plate-forme WordPress. Pour le icône des réseaux, mon template permet aussi de les placer dans le header, mais au moyen d’un Costum Class.
    Pourriez-vous me transmettre une ressource qui me permettrait (sans trop de temps d’apprentissage) d’en faire un?
    Merci!
    Louise

    Répondre à Louise
    • Marlène

      Bonjour Louise, si c’est une « custom class », c’est simplement du code CSS… C’est un langage qui permet de gérer la mise en forme d’un site, il y a des sites entiers qui lui sont dédiés, comme CSS Débutant. Mais avec du CSS seul, je doute qu’on puisse créer des icônes cliquables, il doit y avoir un autre élément à mettre en place. Il ne faut pas hésiter à poser la question au créateur du thème ou à consulter la documentation si elle existe, en général ce type de personnalisation est bien expliqué dedans.

      Répondre à Marlène
    • Louise

      Merci Mylène!

      Répondre à Louise
  • Lolita

    Hello,
    Bah crotte alors chez moi ça ne fonctionne pas … j’ai réussi à mettre mes icônes, mais impossible de faire ne sorte qu’elles s’ouvre dans une autre fenêtre, est c’est très embêtant …
    Une idée ?

    Répondre à Lolita
    • Marlène

      Hello, c’est simple, il suffit d’ajouter target="_blank" à l’intérieur du lien :)

      Par exemple, ton icône Instagram se présente actuellement comme ça dans le code :
      <a href="https://www.instagram.com/aiove.fr/"><i class="social_icon fa"><span>Instagram</span></i></a>

      Il faut écrire ça à la place :
      <a href="https://www.instagram.com/aiove.fr/" target="_blank"><i class="social_icon fa"><span>Instagram</span></i></a>

      Répondre à Marlène
  • nomi

    SIMPLISSIME, brillantissime, practissime … l’esprit WP (que je n’ai pas !) , l’intelligence même.

    Merci beaucoup, je reviendrais

    Répondre à nomi
    • Marlène

      Mais l’esprit WP existe-t-il, telle est la question ;) Bravo pour la réussite !

      Répondre à Marlène
  • Mistigriffe

    Merci pour tes tutos super clairs.

    Pourtant je ne comprends pas ce qui se passe, quand je clique sur mes icônes, je tombe sur :

    Ce site est inaccessible/ »Impossible de trouver l’adresse DNS du serveur https. »

    Répondre à Mistigriffe
    • Marlène

      Hello, il y a des erreurs sur certains de tes liens. Par exemple, ton lien vers Pinterest ressemble à ça : https://www.pinterest.com/https://fr.pinterest.com/Tgentillefille/pins//. Il y a deux fois la partie « https » dedans et un slash en trop à la fin. Le bon lien serait plutôt : https://fr.pinterest.com/Tgentillefille/pins/

      C’est le même problème pour Google+, il y a un bout en trop :) Si tu corriges ça, ça devrait fonctionner !

      Répondre à Marlène
    • Mistigriffe

      Merci beaucoup Marlène d’avoir pris la peine de regarder.
      J’ai modifié mais sans succès, p-ê cela se situe-t-il ailleurs. Car il y a ce problème là mais il y en a un autre, auquel je ne comprends rien du tout : lorsque je vais dans le back office, on me signale un problème : « JQMIGRATE: Migrate is installed, version 1.4.0/ Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/. »

      On me donne aussi une autre info: http://s0.wp.com/wp-includes/js/jquery/jquery.js?ver=20151215

      Bref, du Parfait chinois pour une débutante que je suis. Ça me déprime un peu ce genre de probl car je ne sais absolument pas quoi faire. Aurais-tu une piste à me conseiller? ET sinon, as-tu une idée de où m’adresser pour essayer de résoudre cette énigme de Sphinx ?

      Bonne journée !

      mistigriffe

      Répondre à Mistigriffe
    • Marlène

      Ça ressemble plus à un message d’information qu’à un message d’erreur. Parfois, certaines mises à jour de plugins affichent ce genre de message, il suffit de cliquer sur la croix qu’ils comportent pour les effacer :)

      Répondre à Marlène
  • Fanny / Pages Versicolores

    Merci pour ce tuto ! Je n’ai même pas stressé :-D

    Répondre à Fanny
    • Marlène

      Tant mieux ! Je vois qu’actuellement, tu as mis chaque icône dans un gadget différent, si tu veux les aligner horizontalement il faut toutes les mettre dans le même gadget ;)

      Répondre à Marlène
  • Sophia

    Ce tuto est top ! Merci beaucoup ;)

    Répondre à Sophia
  • Hello Mosquito

    Bonsoir !
    J’ai crée mon blog récemment, je débute dans ce domaine et je vous avoues que je ne suis pas une flèche !
    Du coup, j’ai bien lu votre article, qui explique très bien mais je suis bloquée à une étape…
    Je ne sais pas si j’ai une version différente de WordPress (j’ai pourtant pris le WordPress le plus récent et qui s’affiche en première position sur Google..) mais je n’ai pas la partie « Réglages de l’affichage du fichier attaché »
    Voici ce que j’obtiens lorsque je suis les réglages de mon fichier: http://imgur.com/CwfJ8jC

    J’espère que vous comprenez mon petit soucis
    Merci d’avance !

    Répondre à Hello
    • Marlène

      Hello, je pense juste que vous passez par la version « incomplète » de l’administration de WordPress. Si vous passez par la véritable administration, vous devriez avoir le même affichage que dans mon article :)

      Répondre à Marlène
    • Hello Mosquito

      Ah d’accord merci beaucoup ! Mais comment on accède a cette véritable administration depuis le site ?

      Répondre à Hello
    • Marlène

      Il suffit de cliquer sur « Tableau de bord » dans le menu de gauche, tout en bas :)

      Répondre à Marlène
    • Hello Mosquito

      C’est étrange, je n’ai aucune mention du tableau de bord dans ce menu de gauche…J’ai beau fouiller le site de fond en comble, je ne le trouve pas du tout :/
      Merci quand même de m’avoir éclairé !

      Répondre à Hello
    • Marlène

      Il y a quoi alors dans le menu de gauche ? On ne doit pas parler de la même page parce que WordPress.com est le même pour tout le monde ;)

      C’est le menu où l’on trouve Articles, Pages, Thèmes, Menus, Partage, Personnes, Extensions, etc. En bas, il y a un lien « Tableau de bord ».

      Répondre à Marlène
  • Une éternelle rêveuse

    Bonjour!
    Votre article est très bien expliqué mais je bloque sur une des étapes.
    Je n’arrive pas à trouver la zone « Réglages de l’affichage du fichier attaché », j’ai beau cherché, je ne la voie pas…
    Pouvez-vous m’aider?
    Merci par avance.

    Répondre à Une
    • Marlène

      Bonjour, quand on clique sur le bouton « Ajouter un média » de WordPress et qu’on uploade une image, ça se trouve dans la colonne de droite.

      Réglages de l'affichage du fichier joint

      Répondre à Marlène
  • Lucile

    Bonjour, je suis sur la plateforme WordPress gratuit, est ce que ce tuto fonctionne également? Je ne trouve pas comment mettre le lien sur l’image… merci

    Répondre à Lucile
    • Marlène

      Bonjour, oui, le tuto devrait fonctionner sans problème sur WordPress.com. Le lien sur l’image se met via la partie « Réglages de l’affichage du fichier attaché » (c’est expliqué dans le tuto).

      Répondre à Marlène
  • Crossedfingers

    Vraiment merci ! Grâce à toi j’ai pu régler pleins de choses sur mon blog que j’ai enfin officiellement lancé hier :D Merci merci merci !!!!!
    Passez faire un tour si vous kiffez la mode et les sneakers ! Il ne serait rien sans tes supers conseils :)

    Répondre à Crossedfingers
    • Marlène

      Bravo ! Le rendu est très sympa :) Bienvenue dans la blogosphère !

      Répondre à Marlène
  • Ektorama

    Bonjour,

    Je n’ai pas réussi à trouver l’endroit où il y avait les widgets ? Peut être cela vient il de mon thème, je n’en sais rien. C’est étrange.

    Répondre à Ektorama
    • Marlène

      En principe, quand tu es connecté(e) à ton administration WordPress, tu trouves les widgets dans le menu Apparence > Widgets. Si tu n’as pas la possibilité d’ajouter des widgets à cet endroit, ça peut effectivement signifier que ton thème ne prévoit aucun emplacement pour ça.

      Répondre à Marlène
  • Ludo

    Coucou, j’ai réussi pour Twitter et Facebook ! Mais tu n’aurais pas une icône pour Livraddict? (Petit rond??).
    Et, je voulais te demander, pour le référencement, c’est dans « Mots clés » qu’il faut mettre quelques chose?
    Et on va jusqu’à quel point? Le titre du livre, plus tout les mots séparés, plus l’auteur, plus le nom et le prénom séparés???

    Répondre à Ludo
    • Marlène

      Hello, tu peux récupérer ton logo Apple Touch et en faire un rond, non ?

      Je ne suis pas sûre de bien comprendre ta question sur les mots clés, en quoi est-ce lié aux icônes ? Tu veux mettre des mots clés sur des icônes ?

      Répondre à Marlène
  • kenza

    Bonjour,
    Merci pour votre article.
    J’ai bien télécharger les icones sur mon site mais je ne trouve pas la zone « Réglages de l’affichage du fichier attaché » je n’ai que détails des Fichiers attaché, je ne comprends pas pourquoi, pouvez vous m’aider ? je peux vous envoyer une capture écran si vous le souhaitez !
    Merci !

    Répondre à kenza
    • Marlène

      Bonjour, cette zone est en principe située juste sous la zone « Détails du fichier attaché », dans la même colonne. Il faut parfois scroller pour la voir.

      Répondre à Marlène
  • pierre

    Super. Je ne savais pas que c’était si simple. Et votre explication est très claire. Merci

    Répondre à pierre
    • Marlène

      Merci d’avoir pris le temps de laisser un petit commentaire :)

      Répondre à Marlène
  • Nibsouille

    Bonjour,

    Tout d’abord merci pour ce tuto, voilà longtemps que je voulais ajouter des boutons de réseaux sociaux à mon blog, sans savoir comment faire ! J’ai juste une petite question : mes boutons sociaux se sont bien affichés sur mon blog, mais au lieu de se suivre horizontalement (comme sur ta capture d’écran), ils se suivent verticalement, comme si j’avais fait un saut à la ligne entre chaque bouton (pourtant mon texte HTML est bien sans interruption).
    Aurais-tu une solution ?

    Merci d’avance

    Répondre à Nibsouille
    • Marlène

      Hello, je viens d’aller jeter un œil et on dirait que dans ton code, tu es revenue à la ligne après chaque </a>, du coup WordPress place les icônes les unes sous les autres. Il suffit de retirer ces sauts de ligne dans ton widget (rubrique Apparence > Widgets) pour que ça fonctionne.

      Répondre à Marlène
    • Nibsouille

      Coucou,

      Apparemment il n’y a pas de sauts de ligne… Voici mon code :

      <a href="https://www.facebook.com/Nibsouille-978485128851207/?ref=aymt_homepage_panel" rel="nofollow"></a><a href="http://instagram.com/nibsouille" rel="nofollow"></a><a href="https://www.pinterest.com/Nibsouille/nibsouille-nails/" rel="nofollow"></a><a href="https://www.youtube.com/channel/UC5SDdgrcIvi4KzLs9hcyPuQ" rel="nofollow"></a>

      J’ai essayé de recommencer l’importation des images dans mon brouillon, et de copier le « nouveau » code ainsi généré, et toujours pas de résultat…

      Merci pour ton aide !

      Répondre à Nibsouille
    • Marlène

      Quand j’affiche ton code il se met comme ça :
      Code réseaux sociaux

      Je pense que ce saut de ligne est ajouté par le code de ton thème. Je vais essayer de rendre l’explication simple même si ce n’est pas évident à expliquer :) En gros, les images de ton widget n’ont pas d’alignement par défaut (= elles ne sont alignées ni à droite, ni à gauche). La mention « alignnone » apparaît dans le code de l’image pour le signaler.

      Or, ton thème ordonne à toutes les images comportant cet attribut « alignnone » de s’afficher en « display:block ». Un bout de code qui équivaut à dire à l’image : « Occupe toute la largeur disponible et met un saut de ligne après ». Donc ton image est automatiquement toute seule sur sa ligne et suivie d’un saut de ligne.

      Pour changer ça, il faudrait :
      – soit retirer le mot « alignnone » du code de ton widget. Tes images vont alors être collées l’une à l’autre, pour créer un espace entre chacune tu dois ajouter &nbsp; après chaque </a> sauf le dernier.
      – soit modifier les paramètres à l’échelle de ton thème entier, dans le fichier style.css… mais ça aura des conséquences à d’autres endroits de ton site et sans étudier ton code dans le détail, je ne peux pas te dire lesquelles.

      Répondre à Marlène
    • Nibsouille

      Ça y est, j’ai réussi, tout est parfait ! Merci encore mille fois pour ton aide, et à bientôt !

      Répondre à Nibsouille
  • Lola

    Bonjour,
    Je te pris de m’excuser mais je n’y parviens pas, rien ne s’affiche sur mon blog après avoir effectué ta démarche…

    Répondre à Lola
    • Marlène

      Bonjour, sans l’adresse du blog en question et une description un peu plus précise du problème, je ne peux malheureusement pas t’aider davantage. N’hésite pas à m’en dire plus !

      Répondre à Marlène
    • Lola

      Salut ! Oui c’est vrai que je n’ai pas été aidante.
      Il s’agit de ce blog : http://www.metalobil.fr/
      Lorsque je fais l’opération sur les widgets, je clique sur enregistrer mais rien n’apparait sur le site.
      Je ne sais pas quelles informations supplémentaires pourraient t’éclairer
      Merci de te soucier de tes lecteurs, c’est sympa

      Répondre à Lola
    • Marlène

      L’emplacement où tu ajoutes les widgets est-il censé apparaître sur le site ? Par exemple, si tu les ajoutes dans une sidebar mais que ton blog est en configuration « pleine page » sans sidebar, on ne verra pas les widgets.

      Répondre à Marlène
    • Lola

      Bien vu !
      Problématique résolue
      Merci encore

      Répondre à Lola
  • aludv

    Merci ton article m’a beaucoup aidé ! :)

    Répondre à aludv
  • whenjesussmoke

    Merci merci merci ! Milles mercis ! J’ai enfin réussis !!

    Répondre à whenjesussmoke
    • Marlène

      Hé hé je vois ça, c’est cool que ça fonctionne :) Bravo !

      Répondre à Marlène
  • Alison

    Hello! Merci pour ce super tuto.
    Par contre je voudrais ouvrir les liens dans une autre fenêtre, je tente ta technique mais ça ne fonctionne pas…
    Peut-être que je ne place pas target= »_blank » au bon endroit, mais dans ce cas je ne sais pas où le mettre exactement.

    Si tu peux m’éclairer ;)

    Merci!

    Répondre à Alison
    • Marlène

      Il doit s’écrire sous cette forme : <a href="https://www.notuxedo.com" title="No Tuxedo" target="_blank">(Image de l'icône)</a> Le « target » peut être placé n’importe où tant qu’il se trouve dans la première partie. On peut par exemple écrire <a href="https://www.notuxedo.com" target="_blank" title="No Tuxedo">, ça marchera aussi.

      Répondre à Marlène
  • carole

    Merci pour ta réponse. J’avais déjà activé le bouton Pin It mais en choisissant « texte seulement » et cette config n’affichait pas le bouton au survol des images, maintenant avec « bouton officiel » ça marche. Par contre, pour info, si dans « afficher les boutons sur » tu choisis « les pages d’accueil, d’archive et résultat de recherche » en plus de « articles », le bouton marche sur tout le blog.

    Répondre à carole
    • Marlène

      Merci de la précision, ça pourra sûrement servir à d’autres personnes !

      Répondre à Marlène
  • carole

    Très utile pour débuter. Mais maintenant que je sais le faire, je n’arrive pas avec cette méthode à créer le bouton « Pin It » pour qu’un lecteur épingle une image de mon blog. Plus exactement, j’arrive très bien à créer le bouton mais lorsque le clique sur le bouton créer, je me retrouve sur Pinterest alors que ce que je veux c’est ouvrir la page « choisissez une image à épingler ». J’ai essayé plusieurs méthodes, la journée d’hier et une bonne partie de la nuit….Je crois que je vais abdiquer! Je précise que je suis sur « WordPress.com », il existe un lien de ce type mais qui s’affiche en bas de page. J’ai essayé de rentrer dans le code (bon, je n’y connais rien mais je sais faire un copier/coller!) mais je n’arrive pas à le modifier….Enfin, je veux avoir la main, je veux customiser le bouton (il y en a plein sur la toile) et je veux choisir sa position! Merci pour votre aide.

    Répondre à carole
    • Marlène

      Sur WordPress.com à ma connaissance il n’y a qu’une technique pour y arriver. Va sur ce lien : boutons de partage WordPress, ça devrait te conduire sur la page de paramétrage des boutons de partage WordPress de ton blog. Clique sur « Modifier les boutons de partage », ajoute Pinterest et en bas, choisis « Boutons officiels » dans la partie « Style de bouton ». Ca t’affichera le bouton Pin it au survol des photos mais seulement quand tu es en vue « article » (pas sur la page d’accueil de ton blog par exemple). Je viens de tester, ça fonctionne !

      Répondre à Marlène
  • Estelle

    En effet, WP a vraiment beaucoup d’avantages dans la version en .org (je en sais plus comment tu la nommes).
    J’avoue apprendre bien plus avec ton blog qu’en formation mais chut …
    Rien à voir avec cet article mais je tente : pourrais-tu me dire comment modifier la largeur de la page (dans l’éditeur de code).
    Merci par avance !!!

    Répondre à Estelle
    • Marlène

      Hé hé merci :) Je devrais me lancer dans la formation ! Heureusement que tu as trouvé la solution à ta question seule parce que je n’aurais pas pu te répondre : chaque thème est codé différemment. Sur le principe, c’est assez simple, il faut trouver le nom du « conteneur » de la page, la balise qui englobe toute la partie dont on veut modifier la largeur et lui attribuer une « width » dans le fichier CSS du thème. Mais le conteneur change de nom d’un thème à l’autre selon l’inspiration du développeur :)

      Il faut aussi penser au côté « responsive design », c’est-à-dire à personnaliser les largeurs selon la résolution de l’écran, modifier les largeurs qui découlent de la largeur principale (ex : si la page devient plus large, il faudra aussi élargir le footer, la sidebar et/ou la colonne de gauche par exemple).

      Répondre à Marlène
  • ELOD

    Bonjour et merci pour cet article très clair et très utile !
    J’ai bien suivi les indications mais les 2 icônes que je souhaite ajouter (Facebook et Twitter) apparaissent l’une après l’autre comme si il y avait un saut de page.
    Existe t il une explication et une solution ;) ?

    Répondre à ELOD
    • ELOD

      J’ai trouvé la solution : Simplement cocher la case alignement à gauche ou a droite. ;)
      Merci

      Répondre à ELOD
    • Marlène

      Ce n’est pas utile de faire ça :) Le fait que les images s’affichent l’une au-dessus de l’autre dans ton éditeur n’a pas d’importance car ces sauts de ligne n’apparaissent pas dans le code : une fois copié-collé dans un widget, le code affichera bien à l’écran des images alignées horizontalement.

      Répondre à Marlène
  • yoann

    Merci beaucoup

    Grace à toi je viens d’insérer le lien Facebook à mon blog :)

    Demain j’enchainerai avec tweeter.

    Répondre à yoann
    • Marlène

      Top ! Je vais ajouter une précision dans l’article car je vois que j’ai oublié de le faire… pour ceux qui veulent que les liens s’ouvrent dans un nouvel onglet ! Ça peut être pratique :)

      Répondre à Marlène
  • marie kléber

    Je garde ça sous le coude quand j’aurai un peu de temps. J’aime ces explications claires! Merci Lou

    Répondre à marie
    • Marlène

      Merci Marie ! N’hésite pas à revenir poser des questions s’il y a des étapes pas claires :)

      Répondre à Marlène
  • Elo

    Ah MERCI ! Je me demandais comment faire depuis un moment déjà ! Il me reste plus qu’à faire tout ça :)

    Répondre à Elo
  • Birds and Bee

    Je connaissais déjà le « truc » mais c’est toujours utile ! Je me suis même amusée à personnaliser mes propres boutons (bons même si pour le coup ils sont pas super originaux).

    Répondre à Birds
    • Marlène

      Une fois qu’on a compris le principe on peut aussi s’en servir pour d’autres choses (ex : faire un « joli lien » vers un formulaire de contact, une image cliquable qui renvoie vers sa boutique Etsy ou autre, etc) :)

      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.