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

Chaque fois que nous créons un nouveau site WordPress, une chose que nous n'oublions jamais de faire est d'ajouter des icônes de réseaux sociaux. C'est un moyen simple mais puissant de se connecter avec notre public au-delà du site lui-même.

Ajouter des icônes sociales à votre site, c'est comme laisser une piste de miettes de pain pour vos visiteurs. Cela leur fait connaître votre présence sur les réseaux sociaux et leur donne un moyen facile de vous suivre sur différentes plateformes.

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

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

Une barre latérale WordPress est une zone de votre site Web qui ne fait pas partie de votre contenu principal. C'est là que vous pouvez afficher des informations supplémentaires qui pourraient intéresser les lecteurs, telles que vos articles de blog les plus récents et des liens vers vos profils sociaux.

Ajouter des liens sociaux à votre barre latérale WordPress est une bonne idée car cela informe les utilisateurs de vos comptes de réseaux sociaux. En conséquence, ils peuvent les consulter, vous suivre et vous aider à développer votre audience sur les réseaux sociaux.

De plus, l'affichage de vos comptes de réseaux sociaux peut renforcer votre crédibilité et servir de preuve sociale. Lorsque les visiteurs voient que vous avez une présence active sur les réseaux sociaux, cela montre que votre site de commerce électronique ou d'entreprise est digne de confiance.

De nombreux blogs WordPress populaires affichent des icônes de médias sociaux dans leurs barres latérales, comme WPBeginner :

Cela étant dit, examinons comment ajouter des icônes de suivi des médias sociaux à la barre latérale de votre site Web WordPress.

La méthode que vous devriez utiliser dépend du thème et de l'éditeur WordPress que vous utilisez. Si vous souhaitez passer à une section spécifique, vous pouvez utiliser ces liens rapides :

• Méthode 1 : Ajouter des icônes sociales avec l'éditeur de site complet (thèmes de blocs)
• Méthode 2 : Ajouter des icônes de médias sociaux avec les widgets WordPress (thèmes classiques)
• Méthode 3 : Ajouter des icônes de médias sociaux personnalisées avec SeedProd (thèmes personnalisés)
• Astuce bonus : Intégrez vos profils de médias sociaux sur votre site WordPress

Méthode 1 : Ajouter des icônes sociales avec l'éditeur de site complet (thèmes de blocs)

Si vous utilisez un thème de blocs, vous pouvez ajouter des boutons de médias sociaux à votre barre latérale WordPress en utilisant le bloc Icônes sociales.

Notez que le processus varie selon le thème que vous utilisez. Certains thèmes de blocs peuvent inclure une barre latérale par défaut, à laquelle vous pouvez ensuite ajouter le bloc Icônes sociales. Certains peuvent également avoir un modèle d'en-tête qui fonctionne comme une barre latérale, et d'autres peuvent ne pas avoir de barre latérale du tout.

Dans cet exemple, nous utiliserons un thème de blocs WordPress par défaut qui inclut déjà une partie de modèle de barre latérale par défaut.

Tout d'abord, allez dans Apparence » Éditeur dans votre panneau d'administration WordPress.

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

Cela vous amènera à une page où vous pourrez modifier les parties de modèle de votre thème, comme les en-têtes, les pieds de page et les barres latérales.

Ici, sélectionnez « Toutes les parties de modèle ».

Trouvez la partie de modèle Barre latérale, cliquez sur le bouton à trois points, et choisissez « Modifier ». Cela ouvrira l'éditeur WordPress.

Vous verrez maintenant la partie de modèle Barre latérale par défaut de votre thème. Ici, différentes parties de la barre latérale sont généralement séparées par un séparateur de forme, comme une ligne droite.

Disons que vous souhaitez ajouter les icônes des réseaux sociaux sous la biographie de l'auteur. Dans ce cas, cliquez sur le bouton « Vue de liste » sur le côté gauche de la page et sélectionnez le bloc « Séparateur » qui se trouve juste en dessous du groupe d'éléments de la biographie de l'auteur.

Cliquez sur le menu à trois points, et sélectionnez « Ajouter après ».

Maintenant, cliquez sur le bouton « + » n’importe où sur la page.

Ensuite, choisissez le bloc « Groupe ».

À ce stade, vous pouvez choisir une mise en page pour le bloc Groupe.

Nous allons faire simple, nous allons donc choisir la première option.

Ajoutons une copie d’appel à l’action qui apparaîtra au-dessus des icônes des réseaux sociaux.

Pour ce faire, cliquez simplement sur le bouton « + » à l’intérieur du bloc Groupe et sélectionnez le bloc « Paragraphe ».

Vous pouvez maintenant insérer votre texte d’appel à l’action.

Il peut s’agir de ce que vous voulez, comme « Suivez-nous sur les réseaux sociaux ».

Une fois terminé, cliquez à nouveau sur le bouton « + » et trouvez le bloc « Icônes de réseaux sociaux ».

Vous pouvez maintenant commencer à ajouter vos plateformes de réseaux sociaux au bloc. Cliquez simplement à nouveau sur le bouton « + » et ajoutez vos boutons de réseaux sociaux un par un.

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

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

Tout ce que vous avez à faire est de cliquer sur une icône sociale et d’entrer l’URL de votre profil.

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

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

Dans les Paramètres du bloc à gauche, vous pouvez personnaliser la justification, l’orientation, les paramètres de lien et les étiquettes des icônes.

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

Si vous passez à l’onglet Styles de bloc, vous pouvez modifier les styles et les couleurs des icônes pour qu’ils correspondent à la conception de votre site Web WordPress.

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

En faisant défiler le même onglet, vous trouverez les paramètres Dimensions pour personnaliser la marge et l'espacement du bloc.

Ces paramètres peuvent être utiles si vous souhaitez ajuster l'espacement entre le bloc d'icônes sociales et les autres blocs dans la barre latérale.

Il est également conseillé d'ajouter un texte d'appel à l'action au-dessus du bloc d'icônes sociales pour indiquer où se trouvent les boutons et encourager les utilisateurs à devenir des abonnés ou des followers.

Pour ce faire, ajoutez un bloc Paragraphe à l'aide du bouton '+'. Assurez-vous qu'il est placé au-dessus des icônes sociales.

Voici quelques exemples d'appels à l'action que vous pourriez utiliser : 'Suivez-nous', 'Rejoignez plus de X lecteurs' ou 'Recevez les dernières mises à jour'.

Si ce n'est pas déjà fait, vous pouvez également ajouter d'autres éléments à la barre latérale, tels que vos articles mis en avant et vos commentaires récents.

Maintenant, cliquez simplement sur le bouton 'Enregistrer' dans le coin supérieur droit de la page.

Si vous ne voyez pas ces modifications apparaître sur vos pages ou articles, c'est très probablement parce qu'aucun d'entre eux n'utilise la partie de modèle 'Barre latérale'.

Pour vous assurer que votre page souhaitée utilise un modèle de page avec une barre latérale, vous pouvez revenir au menu principal de l'éditeur de site complet. Sélectionnez ensuite 'Pages'.

Sélectionnez maintenant la page où vous souhaitez que la barre latérale apparaisse et cliquez sur le bouton 'Modifier' (l'icône en forme de crayon).

À titre d'exemple, nous utiliserons le modèle de page avec la barre latérale sur notre Page d'exemple.

À ce stade, vous pouvez cliquer sur l'icône noire « Paramètres » dans le coin supérieur droit.

Ensuite, cliquez sur « Pages », puis sélectionnez « Changer de modèle ».

Vous verrez certains modèles de page que votre thème fournit.

Ici, choisissez simplement celui avec la barre latérale que nous venons de modifier.

Une fois terminé, cliquez simplement sur « Enregistrer » comme d'habitude.

Lorsque vous accédez à votre site Web WordPress, vous devriez maintenant voir une barre latérale avec quelques liens sociaux.

Méthode 2 : Ajouter des icônes de médias sociaux avec les widgets WordPress (thèmes classiques)

La méthode suivante s'adresse aux personnes utilisant un thème WordPress classique avec des zones de barre latérale prêtes pour les widgets.

Pour ajouter des boutons de médias sociaux à votre barre latérale, rendez-vous simplement dans Apparence » Widgets depuis votre tableau de bord WordPress.

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

Maintenant, cliquez sur le bouton « + » pour ajouter un bloc en haut à gauche, à côté de « Widgets ».

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

Après cela, vous devez cliquer sur ce widget de barre latérale ou le faire glisser et le déposer n'importe où dans la zone d'édition.

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 de widget. De cette façon, elles peuvent attirer l'attention de vos visiteurs dès qu'ils arrivent 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 médias sociaux un par un au widget.

Dans l'exemple ci-dessous, nous avons placé le bloc Icônes sociales sous le bloc de recherche. Nous ajoutons également une icône WhatsApp.

À 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 assurez-vous d'ajouter votre code d'appel de pays, comme dans cette capture d'écran.

Vous avez également accès aux options Paramètres de bloc et Styles dans le panneau de droite.

Pour ouvrir ces options, vous pouvez cliquer sur l'icône « Paramètres » dans le coin supérieur droit.

De plus, n'hésitez pas à ajouter un bloc Paragraphe au-dessus du widget de médias sociaux pour votre texte d'appel à l'action.

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

Pour ce faire, sélectionnez simplement les blocs Paragraphe et Icônes sociales ensemble. Ensuite, cliquez sur l'icône « Transformer » dans la barre d'outils du bloc et sélectionnez « Regrouper ».

Une fois terminé, cliquez sur le bouton « Mettre à jour » pour officialiser les modifications sur toutes vos barres latérales.

Voici à quoi devrait ressembler le résultat final :

Méthode 3 : Ajouter des icônes de médias sociaux personnalisées avec SeedProd (thèmes personnalisés)

Si vous utilisez SeedProd, vous aurez plus de contrôle sur l'apparence de vos boutons de médias sociaux dans votre barre latérale. Par exemple, si vous utilisez une plateforme de médias sociaux pour laquelle WordPress n'a pas d'icône, vous pouvez en créer une vous-même.

De plus, vous pouvez ajuster l'espacement des icônes spécifiquement pour les appareils mobiles.

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

Pour plus d'informations sur la façon d'installer un plugin, consultez notre guide sur comment installer un plugin WordPress.

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

Maintenant, pour ajouter les icônes sociales à la barre latérale, vous devrez aller dans SeedProd » Theme Builder. Ensuite, survolez le modèle « Sidebar » et cliquez sur « Edit Design ».

Vous êtes maintenant dans le constructeur de pages SeedProd. Le bloc Profils Sociaux aurait dû être ajouté par défaut au modèle de thème.

S'il ne l'a pas été, cependant, vous pouvez utiliser la barre de recherche dans le panneau de gauche et taper « Profils Sociaux ». Ensuite, faites simplement glisser et déposez le bloc où bon vous semble.

N'oubliez pas d'ajouter un bloc Texte au-dessus des boutons et d'écrire un texte d'appel à l'action.

De cette façon, vous dirigez l'attention des visiteurs vers les boutons des médias sociaux dans la barre latérale.

Pour personnaliser l'apparence des icônes de profil des médias sociaux, cliquez simplement sur l'élément « Profils Sociaux ». Ici, vous verrez différents onglets pour personnaliser les boutons.

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

Outre les options standard comme Instagram et Facebook, SeedProd propose également des boutons pour Slack, Telegram, Github, et plus encore.

Pour ajouter une nouvelle icône de média social que SeedProd n'a pas par défaut, vous devez cliquer sur le bouton « + Ajouter un nouveau partage ».

Après cela, sélectionnez « Personnalisé » dans le menu déroulant.

Pour modifier le bouton, cliquez sur le symbole d'engrenage à côté du bouton flèche.

Une fois que vous avez fait cela, sélectionnez simplement « Choisir une icône ».

Maintenant, vous serez redirigé vers la Bibliothèque d'icônes, où il y a des centaines d'icônes de marque parmi lesquelles choisir, gracieuseté 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.

Une fois que vous avez sélectionné une icône, vous pouvez ajuster la couleur et ajouter le lien vers la page de média social.

Ici, nous avons décidé de conserver la couleur de marque d'Airbnb. Lorsque vous insérez le lien du compte social, assurez-vous d'inclure également le « https:// ».

L'étape suivante est l'onglet « Modèles ».

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

Enfin, l’onglet « Avancé » offre d’autres moyens de personnaliser vos boutons de médias sociaux.

La section Styles est l’endroit où vous pouvez modifier le style, la couleur, la taille, l’espacement et l’effet d’ombre des icônes.

Dans Espacement, vous pouvez modifier la marge et le remplissage du bloc. Ce qui est formidable avec SeedProd, c’est qu’il vous permet de définir des marges et des remplissages différents pour les appareils de bureau et mobiles.

Pour modifier la marge et le remplissage, choisissez simplement l’une des icônes d’appareil et insérez vos mesures de marge et de remplissage comme ceci :

En faisant défiler vers le bas, vous trouverez la Visibilité de l’appareil et les 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 Web et que vous ne souhaitez pas d’icônes de profils sociaux 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 le visiteur du contenu principal.

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

Ou, cliquez sur le bouton « Aperçu » pour voir d’abord à quoi ressemble la barre latérale.

Et voilà ! Vous avez ajouté avec succès le bloc de profils sociaux à l’aide de SeedProd.

Voici à quoi peut ressembler le résultat final :

Astuce bonus : Intégrez vos profils de médias sociaux sur votre site WordPress

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

Cela permet aux visiteurs de voir votre contenu le plus récent et d'interagir directement avec vous sur votre site Web, ce qui peut augmenter la notoriété de votre marque et l'engagement.

La façon la plus simple d'intégrer des flux de médias sociaux dans WordPress est d'utiliser Smash Balloon. Ce plugin de médias sociaux vous permet de connecter votre site Web à diverses plateformes sociales et d'y intégrer des flux.

Le meilleur dans tout ça ? Smash Balloon facilite la personnalisation de ces flux selon vos préférences. Ainsi, vos flux de médias sociaux s'intègrent parfaitement au reste du design de votre site Web.

Pour plus d'informations, consultez ces tutoriels :

• Comment créer un flux photo Instagram personnalisé dans WordPress
• Comment créer un flux Facebook personnalisé dans WordPress
• Comment afficher les tweets récents dans WordPress (étape par étape)
• Comment afficher les dernières vidéos d'une chaîne YouTube dans WordPress
• Comment intégrer des vidéos TikTok dans WordPress

Nous espérons que ce guide étape par étape vous a aidé à apprendre comment ajouter des icônes de médias sociaux à la barre latérale de votre WordPress. Vous voudrez peut-être aussi consulter notre article sur comment ajouter des icônes de médias sociaux à votre menu WordPress et notre liste des plugins WordPress indispensables pour les sites d'entreprise.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.