Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter des icônes de réseaux sociaux dans votre colonne latérale WordPress

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Vous vous demandez comment ajouter des icônes de réseaux sociaux à votre colonne latérale WordPress ?

L’ajout d’Icônes sociales sur votre site est un moyen facile de faire connaître à votre public votre présence sur les réseaux sociaux. Ainsi, ils peuvent facilement visiter vos profils sociaux et vous suivre en ligne.

Dans cet article, nous allons vous afficher comment ajouter des icônes de réseaux sociaux à votre colonne latérale WordPress.

How to Add Social Media Icons in Your WordPress Sidebar

Pourquoi ajouter des icônes de réseaux sociaux à votre colonne latérale WordPress ?

Une colonne latérale WordPress est une zone de votre site qui ne fait pas partie de votre contenu principal. C’est l’endroit où vous pouvez afficher des informations supplémentaires susceptibles d’intéresser les lecteurs, comme vos publications de blog les plus récentes et des liens vers vos profils sociaux.

L’ajout de liens sociaux à votre colonne latérale WordPress est une bonne idée car il informe les utilisateurs/utilisatrices de vos comptes de réseaux sociaux. Par conséquent, ils peuvent les consulter, vous suivre et vous aider à augmenter le nombre de vos abonnés sur les réseaux sociaux.

De plus, l’affichage de vos comptes de réseaux sociaux peut donner un sentiment de crédibilité et servir de preuve sociale. Lorsque les internautes voient que vous avez une présence active sur les réseaux sociaux, cela affiche que votre site d’e-commerce ou d’entreprise est digne de confiance.

De nombreux blogs WordPress populaires affichent des icônes de réseaux sociaux dans leur colonne latérale, comme WPBeginner :

WPBeginner's social media icons on the sidebar

Note : Les icônes de réseaux sociaux sont différentes des boutons de partage social sur les publications WordPress. Si vous cherchez à ajouter des boutons de partage, alors vous pouvez consulter notre guide pour débutants sur la façon d’ajouter des icônes de partage social dans WordPress.

Ceci étant dit, voyons comment ajouter des icônes de suivi des réseaux sociaux dans la colonne latérale de votre site WordPress.

La méthode à utiliser dépend du thème WordPress et des éditeurs/éditrices que vous utilisez. Si vous souhaitez aller à/au une certaine section, alors vous pouvez utiliser ces liens rapides :

Méthode 1 : Ajout d’Icônes Sociales avec l’Éditeur/éditrices du site complet (Thèmes en bloc)

Si vous utilisez un thème en bloc, vous pouvez ajouter des boutons de réseaux sociaux à votre colonne latérale WordPress à l’aide du bloc Icônes sociales.

Notez que le processus varie en fonction du thème que vous utilisez. Certains thèmes par défaut comportent une colonne latérale à laquelle vous pouvez ajouter le bloc Icônes sociales. D’autres ont une composition d’en-tête fonctionnant comme une colonne latérale, et d’autres encore n’ont pas de colonne latérale du tout.

Dans cet exemple, nous utiliserons un thème par défaut du bloc WordPress et nous vous afficherons comment créer une colonne latérale pour toutes vos pages ou publications où vous pourrez ajouter le bloc Icônes sociales.

Tout d’abord, allez dans Apparence  » Éditeurs/éditrices dans votre panneau d’administration WordPress.

Selecting the Full-Site Editor from the WordPress admin panel

Ensuite, vous devez sélectionner « Modèles ».

Vous accéderez ainsi à une page où vous pourrez modifier le modèle de vos pages et de vos publications.

Choosing the Templates menu on WordPress Editor

Ici, vous pouvez choisir l’un des modèles de page. Il peut s’agir de « Pages » ou de « Publications uniques », en fonction de l’emplacement de la colonne latérale.

Si vous souhaitez que la colonne latérale s’affiche à la fois sur vos pages statiques et sur vos publications, vous pourrez les modifier ultérieurement. Vous pouvez également personnaliser le modèle de la page d’accueil au cas où vous auriez besoin que la colonne latérale y apparaisse également.

Dans ce cas, nous sélectionnerons « Sélectionné ».

Selecting Pages on the WordPress Editor Templates page

Ensuite, cliquez sur le bouton « crayon » dans le panneau de gauche, à côté du bouton à trois points.

L’éditeur WordPress s’ouvre alors.

Clicking the pencil edit button on Pages inside the WordPress editor

Comme vous pouvez le voir, le thème par défaut n’a pas encore de colonne latérale dans le Modèle de pages, nous devons donc en créer une.

Pour ce faire, vous pouvez survoler l’endroit où vous souhaitez ajouter la colonne latérale et cliquer sur le bouton d’ajout de bloc  » +  » lorsqu’il apparaît. Ensuite, trouvez et sélectionnez « Colonnes ».

Selecting the Columns block on WordPress editor

Il y aura quelques variantes à choisir.

Dans cet exemple, nous utiliserons l’option « 66 / 33 » pour imiter l’aspect standard d’une colonne latérale droite.

Choosing one of the variations of the Columns block in WordPress editor

Une fois cela fait, vous pouvez faire glisser et déposer le bloc Contenu de la publication à gauche du bloc Colonnes.

Votre modèle de page doit ressembler à l’image ci-dessous, avec la colonne de droite vide.

Moving the Post Content block to the left side of the Columns block

Cliquez ensuite sur la colonne de droite et sélectionnez le bouton « + » pour ajouter un module.

Ensuite, recherchez le bloc Icônes sociales.

Searching for the Social Icons block to add to the Columns block

Vous pouvez maintenant commencer à ajouter vos plateformes de réseaux sociaux au bloc. Il vous suffit de cliquer à nouveau sur le bouton  » +  » et d’ajouter vos boutons de réseaux sociaux un par un.

N’hésitez pas à utiliser la fonctionnalité de recherche pour parcourir toutes les options de réseaux sociaux.

Adding a social profile to the Social Icons block

Une fois que vous avez ajouté tous les boutons, vous pouvez commencer à ajouter des liens personnalisés vers vos profils sociaux.

Il vous suffit de cliquer sur une icône sociale et de saisir l’URL de votre profil.

Entering an Instagram account link to the Social Icons block

À ce stade, vous pouvez personnaliser l’aspect des icônes.

Si la taille des boutons n’est pas suffisamment grande ou petite, vous pouvez utiliser l’option « Taille » dans la barre d’outils du bloc.

Customizing the buttons' sizes using the Social Icons block toolbar

Dans les Réglages du bloc, à gauche, vous pouvez personnaliser la justification, l’orientation, les paramètres des liens et les libellés des icônes.

Nous vous recommandons de faire en sorte que les liens s’ouvrent dans un nouvel onglet afin que les utilisateurs/utilisatrices n’aient pas à quitter votre site pour visiter vos profils sociaux.

Social Icons Block Settings

Si vous passez à l’onglet Modifiés, vous pouvez modifier les styles et les couleurs des icônes pour les adapter au design de votre site WordPress.

Selon vos préférences, vous pouvez faire en sorte que toutes les icônes aient des couleurs différentes ou la même, comme ci-dessous.

Configuring the Social Icons color and styles in the Block Styles tab

En défilant vers le bas du même onglet, vous trouverez les réglages de Dimensions permettant de personnaliser la marge externe et l’espacement.

Ces réglages peuvent être utiles si vous souhaitez ajuster l’espacement entre le bloc Icônes sociales et les autres blocs de la colonne latérale.

Configuring the Dimensions settings of the Social Icons block

Il est également judicieux d’ajouter un texte d’appel à l’action en haut du bloc d’icônes sociales pour mettre en évidence l’emplacement des boutons et encourager les utilisateurs à devenir des abonnés/abonnées.

Pour ce faire, ajoutez un bloc Paragraphe à l’aide du bouton « + ». Assurez-vous qu’il se trouve au-dessus des icônes sociales.

Adding a Paragraph block on top of the Social Icons block

Voici quelques exemples d’appels à l’action : « Suivez-nous », « Rejoignez plus de X Lecteurs » ou « Recevez les dernières mises à jour ».

Si vous ne l’avez pas encore fait, vous pouvez également ajouter d’autres éléments à la colonne latérale, comme vos publications mises en avant et vos commentaires récents.

Il ne vous reste plus qu’à cliquer sur le bouton « Enregistrer » dans le coin supérieur droit de la page.

Clicking the Save button on the WordPress editor

Et c’est tout !

Lorsque vous allez sur votre site WordPress, vous devriez maintenant voir une colonne latérale avec quelques liens sociaux.

Example of what the Social Icons block looks like on the front end

Si vous souhaitez créer des barres latérales uniques pour différentes pages ou publications, qui incluent toutes un bloc Icônes sociales, nous vous recommandons alors de créer une composition WordPress ou un bloc réutilisable pour votre barre latérale.

Pour en savoir plus, vous pouvez consulter nos guides pour débutants sur l’utilisation des compositions de blocs WordPress et sur l’ajout de blocs réutilisables.

Méthode 2 : Ajout d’icônes de réseaux sociaux avec les widgets WordPress (thèmes classiques)

La méthode suivante s’adresse aux personnes qui utilisent un thème WordPress classique avec des zones de colonne latérale prêtes à accueillir des widgets.

Pour ajouter des boutons de réseaux sociaux à votre colonne latérale, il vous suffit de vous rendre dans Apparence  » Widgets depuis votre tableau de bord WordPress.

Ensuite, naviguez jusqu’à la zone de widgets de WordPress où vous souhaitez ajouter le widget Icônes sociales. Dans notre exemple, nous sélectionnerons  » Sidebar « , mais le nom peut être différent selon le thème que vous utilisez.

Navigating to the Appearance Widgets menu and selecting Sidebar on WordPress admin panel

Cliquez ensuite sur le bouton « + » du bloc d’ajout, en haut à gauche, à côté de « Widgets ».

Ici, vous pouvez rechercher le bloc Icônes sociales.

Choosing the Social Icons block in the WordPress Widgets settings

Ensuite, vous devez cliquer sur ce widget de colonne latérale ou le faire glisser n’importe où dans la zone de modification.

En général, il est préférable d’ajouter vos icônes de réseaux sociaux près du haut de la zone du widget. De cette façon, elles peuvent attirer l’attention de vos internautes dès qu’ils atterrissent sur la page.

Ensuite, de manière similaire à la méthode précédente, vous pouvez cliquer sur le bouton  » +  » pour ajouter de nouveaux boutons de réseaux sociaux un par un au widget.

Dans l’exemple ci-dessous, nous avons placé le bloc Icônes sociales sous le bloc Recherche. Nous avons également ajouté une icône WhatsApp.

Placing the Social Icons widget below the Search widget and adding the WhatsApp icon

À ce stade, vous pouvez commencer à ajouter vos liens sociaux.

Pour WhatsApp, vous pouvez taper « wa.me/ » et écrire votre numéro WhatsApp à côté. Il n’est pas nécessaire d’utiliser le symbole +, mais veillez à ajouter le code d’appel de votre pays, comme dans cette capture d’écran.

Adding a WhatsApp number in the Social Icons block

Vous avez également accès aux options Réglages des blocs et Réglages des styles dans le panneau de droite.

Pour ouvrir ces options, vous pouvez cliquer sur l’icône « Réglages » dans le coin supérieur droit.

Selecting the Settings icon on the Widgets page

En outre, n’hésitez pas à ajouter un bloc Paragraphe au-dessus du widget de réseau social pour votre texte d’appel à l’action.

Nous vous recommandons de regrouper les blocs Paragraphe et Icônes sociales afin qu’ils ne soient pas séparés dans la colonne latérale.

Pour ce faire, il suffit de sélectionner le paragraphe et les icônes sociales ensemble. Cliquez ensuite sur l’icône « Transformer » dans la barre d’outils du bloc et sélectionnez « Grouper ».

Grouping the Social Icons and Paragraph blocks

Une fois que vous avez terminé, cliquez sur le bouton « Mettre à jour » pour officialiser les modifications dans toutes vos colonnes latérales.

Voici à quoi devrait ressembler le résultat final :

An example of what the Social Icons widget looks like on the website

Méthode 3 : Ajout d’icônes de réseaux sociaux personnalisés avec SeedProd (thèmes personnalisés)

Si vous utilisez SeedProd, vous aurez plus de contrôle sur l’apparence de vos boutons de réseaux sociaux dans votre colonne latérale. Par exemple, si vous utilisez une plateforme de réseau social pour laquelle WordPress n’a pas d’icône, vous pouvez créer un bouton vous-même.

En outre, vous pouvez ajuster l’espacement des icônes spécifiquement pour les appareils mobiles.

Si vous êtes nouveau à SeedProd et que vous souhaitez l’utiliser, vous devez d’abord installer et activer l’extension. Vous aurez besoin de la version Pro pour pouvoir accéder à la fonctionnalité Profils sociaux.

En savoir plus sur l’installation d’une extension, consultez notre guide sur l’installation d’un plugin WordPress.

Ensuite, vous pouvez suivre ce tutoriel pour configurer votre thème avec SeedProd.

Maintenant, pour ajouter les icônes sociales à la colonne latérale, vous devrez aller à SeedProd  » Theme Constructeur. Ensuite, survolez le modèle  » Sidebar  » et cliquez sur  » Modifier le design « .

Clicking Edit Design on the Sidebar template inside SeedProd

Vous êtes maintenant dans le constructeur de page SeedProd. Le bloc Profils sociaux devrait avoir été ajouté par défaut au thème par défaut.

Si ce n’est pas le cas, vous pouvez utiliser la barre de recherche dans le panneau de gauche et taper « Profils sociaux ». Après cela, il vous suffit de faire glisser le bloc à l’endroit qui vous convient.

Selecting the Social Profiles block on SeedProd

N’oubliez pas d’ajouter un bloc Texte au-dessus des boutons et de rédiger un texte d’appel à l’action.

De cette façon, vous attirez l’attention des internautes sur les boutons de réseaux sociaux dans la colonne latérale.

Creating a Follow Us text on top of the Social Profiles block on SeedProd

Pour personnaliser l’apparence des icônes des profils de médias sociaux, il suffit de cliquer sur l’élément « Profils sociaux ». Consultez cette page et découvrez les différents onglets permettant de personnaliser les boutons.

Dans l’onglet « Contenu », vous pouvez ajouter d’autres icônes et modifier le style, la taille et l’alignement des icônes.

Configuring the Content tab of the Social Profiles block in SeedProd

En plus des options standard comme Instagram et Facebook, SeedProd dispose également de boutons pour Slack, Telegram, GitHub, et plus encore.

Pour ajouter une nouvelle icône de réseau social que SeedProd n’a pas par défaut, vous devez cliquer sur le bouton ‘+ Ajouter un nouveau partage’.

Sélectionnez ensuite « Outil personnalisé » dans le menu déroulant.

Creating a Custom social media button on SeedProd

Pour modifier le bouton, cliquez sur le symbole des Réglages à côté du bouton fléché.

Une fois cette étape franchie, il vous suffit de sélectionner « Choisissez une icône ».

Clicking the Choose Icon for the custom social media button on SeedProd

Maintenant, vous serez redirigé vers la Bibliothèque d’icônes, où il y a des centaines d’icônes de marque à choisir, avec l’aimable autorisation des icônes Font Awesome.

Dans cet exemple, nous utiliserons Airbnb. Mais il existe également d’autres choix pour des plateformes comme LinkedIn ou Tumblr.

Choosing the Airbnb icon on SeedProd

Une fois l’icône sélectionnée, vous pouvez ajuster la couleur et ajouter le lien vers la page du réseau social.

Ici, nous avons décidé d’épingler la couleur de la marque Airbnb. Lorsque vous insérez le lien du compte social, veillez à inclure également le  » https:// « .

Configuring the Airbnb icon design on Social Profiles block inside SeedProd

L’onglet « Modèles » est le suivant.

Si vous passez à cet onglet, vous pouvez ajuster le design de l’icône. Vous pouvez la rendre plus carrée, circulaire et/ou monochrome, selon vos préférences.

Editing the Templates setting for the Social Profiles block in SeedProd

Dernier point, l’onglet  » Avancé  » offre davantage de possibilités pour personnaliser vos boutons de réseaux sociaux.

La section Modifiés permet de modifier le style, la couleur, la taille, l’espace entre les icônes et l’effet d’ombre.

The Styles tab in the Social Profiles block settings in SeedProd

Dans Espacement, vous pouvez modifier la marge externe et la marge interne du bloc. Ce qui est génial avec Appareils mobiles, c’est qu’il vous permet de rendre la marge externe et la marge interne différentes pour les appareils de bureau et les appareils mobiles.

Pour modifier la marge et l’espacement, il suffit de choisir l’une des icônes de l’appareil et d’insérer vos mesures de marge externe et d’espacement comme suit :

Configuring the Social Profiles block spacing in SeedProd

En défilant vers le bas, vous trouverez les rubriques Visibilité des appareils et Effets d’animation.

Dans le premier réglage, vous pouvez choisir de masquer le bloc sur ordinateur ou sur mobile. Cela peut être nécessaire si vous avez choisi d’utiliser le bloc Profils sociaux dans une autre partie de votre site et que vous ne voulez pas d’icônes de profil social en double.

Avec les effets d’animation, vous pouvez sélectionner un style d’animation pour le bloc lorsque les icônes sont chargées sur la page web. Cet effet n’est pas nécessaire si vous ne voulez pas trop distraire l’internaute du contenu principal.

SeedProd's Device Visibility and Animation Effect settings for the Social Profiles block

Une fois que vous avez configuré le bloc Profils sociaux à votre convenance, il vous suffit de cliquer sur le bouton « Enregistrer » dans le coin supérieur droit.

Vous pouvez également cliquer sur le bouton « Prévisualisation » pour voir à quoi ressemble la colonne latérale.

Clicking the Save button on SeedProd

Et c’est tout ! Vous avez bien ajouté le bloc des profils sociaux en utilisant SeedProd.

Voici à quoi peut ressembler le résultat final :

Example of what the social media icons in the sidebar look like if made with SeedProd

Astuce bonus : Embarquez vos profils de réseaux sociaux sur votre site WordPress

L’ajout d’icônes de médias sociaux à votre colonne latérale est une excellente première étape pour augmenter votre nombre d’abonnés et afficher une preuve sociale. Cela dit, vous pouvez également intégrer vos flux de réseaux sociaux directement sur votre site WordPress.

Cela permet aux internautes de voir votre dernier contenu et de s’engager avec vous directement sur votre site, ce qui peut potentiellement augmenter la notoriété de la marque et l’engagement.

La manière la plus simple d’intégrer des flux de réseaux sociaux dans WordPress est d’utiliser Smash Balloon. Cette extension pour les réseaux sociaux vous permet de connecter votre site à diverses plateformes sociales et d’intégrer les flux de ces dernières.

Le plus beau ? Smash Balloon vous permet de personnaliser ces flux à votre guise. Ainsi, vos flux de réseaux sociaux s’harmonisent parfaitement avec le reste du design de votre site.

En savoir plus, consultez ces tutoriels :

Nous espérons que ce guide étape par étape vous a aidé à apprendre comment ajouter des icônes de réseaux sociaux à votre colonne latérale WordPress. Vous pouvez également consulter notre article sur la façon d’ajouter des icônes de réseaux sociaux à votre menu WordPress et notre liste des extensions WordPress incontournables pour les sites professionnels.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

36 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN says

    Can I also use this WordPress Editor with Free themes? As they come with limited customizations for free users.

  3. Moinuddin Waheed says

    I have used social sharing plugin for adding social media link to my blog posts and pages.
    At times it becomes necessity to have one. This leads to increased traffic to our blog posts and lets the user to share with different platforms.
    This is something that every blog or businesses would need to have.
    Seedprod has very easy and smooth way to have social plugins to our blogs and sidebar widgets.
    Thanks wpbeginner for this guide.

  4. Jiří Vaněk says

    This was one of the first things I dealt with on the side panel: the availability of social media. I had links to social networks set up this way for quite a while. However, I found it graphically more appealing to use a floating bar on the other side. So, on the right, I had the classic right menu, and on the left side, which was unnecessarily empty (on the blog), I ended up using a plugin. There, I have floating bars with links to social networks, email, and a popup comment.

  5. Ahmed Omar says

    it looks a long process that needs attention
    Although I have my social media pages, but I did not add any icons on my site before.
    I will give it a try today as it worth the work, and with your detailed step by step explanation, it would be easy

  6. Ralph says

    I always like to read your tutorial guys. Straight to the point and multiple options. Having ability to customize icons is very nice and I will definitely use it to make my site looks better and more professional.

  7. Karen Footloose says

    This worked like a charm. Until–don’t laugh–I realized I had beautiful FOLLOW buttons while I was looking for SHARING buttons. How do I get those just as simple and customizable to go in a widget in the sidebar. I’ve looked, but haven’t found simple ones.

  8. Mathukutty P.V. says

    What is difference between jetpack social media icon and wp social media profile? jetpack have youtube provision wherea wp social media profile do not have youtube.

  9. Patrick Tuthill says

    Added a few social widgets to my current theme and it’s both do not render correctly? I am using the theme « Nisarg » which is a basic free blog theme, adn I have heard these plugins adapt differently to various themes. It’s frustrating when these widgets are for ease of use but they haven’t saved me any time. Any feedback from anyone would help. I do plan to upgrade to Genesis framework, not sure if that matters.

  10. Lora says

    The icons are not appearing in the boxes when I installed this plugin. I just see tiny letters and numbers inside the squares. Help?

  11. Maggie says

    Thank you for the article.
    I am a new blogger and I have been using your website since the beginning.
    I have to admit, if there’s any problem I come across or I need some help, I could find the answer here.
    Good job!

  12. Lindsay says

    Thank you for this advice, but how do you get it to show the Facebook, LInkedIn, Twitter icons??? All I have is grey…….

    Thank you!!

  13. jerralyn says

    Nice post, thank you for sharing this useful tutorial on how to add social media on WordPress side bar. Can I use DigDig plug-in instead of Simple Social Icons plugin?

  14. Shahnawaz says

    Dear Syed Balkhi, Sir I would like to thanks you very much and you are my best and favorite personality in WordPress world. Dear sir I will pray for you that always you will write for us. I am using your this plugin and I am daily visit you site and got updates and I will try these updates on my blog. Thanks

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.