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

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.

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 entreprise est responsive et digne de confiance.

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

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 à votre colonne latérale WordPress. La méthode que vous devriez utiliser dépend du thème WordPress et des éditeurs/éditrices que vous utilisez. Si vous voulez 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.

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.

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

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

L’éditeur WordPress s’ouvre alors.

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

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.

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.

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

Ensuite, recherchez le bloc Icônes sociales.

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.

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

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

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

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.

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.

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.

Il est également judicieux d’ajouter un texte d’appel à l’action au-dessus du bloc d’icônes sociales pour mettre en évidence l’emplacement des boutons et attirer l’attention des internautes.

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

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.

Et c’est tout !

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

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.

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.

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.

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

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.

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

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 :

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

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.

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.

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.

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.

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

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.

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:// « .

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.

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.

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 :

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.

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.

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

Voici à quoi peut ressembler le résultat final :

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 comment afficher des colonnes latérales différentes pour chaque publication et page dans WordPress et notre liste des extensions WordPress incontournables pour les sites professionnels.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.