Générateur de boutons de partage
Icônes réseaux sociaux et code
Créez des boutons de partage avec des icônes réseaux sociaux en moins d’une minute. D’abord, choisissez les réseaux, une forme et vos couleurs, puis réglez la disposition. Ensuite, copiez un HTML + CSS propre, ou du HTML pur avec styles en ligne. Il n’y a ni script tiers, ni cookie, ni inscription.
- GratuitPrix
- 32 SVGIcônes
- HTML + CSS ou HTML purCode
- AucunSuivi
Générateur de boutons de partage
Choisissez réseaux, forme et couleurs, puis copiez le HTML
Les boutons suivent l’ordre dans lequel vous les cochez.
Instagram, YouTube, TikTok et les autres en gris n’ont pas de lien de partage. Passez à « Mènent à mes profils » pour les utiliser.
Collez l’adresse complète de chaque profil. Un bouton sans adresse pointe vers # tant que vous n’en ajoutez pas.
- Boutons
- 0
- Taille du code
- 0
- Scripts
- 0
L’aperçu et le code changent à chaque réglage. Copiez le code quand il vous plaît.
Ce que fait cet outil d’icônes réseaux sociaux
Les boutons de partage sont les petites icônes qui permettent au lecteur de transmettre votre page. Un clic ouvre Facebook, X, WhatsApp ou l’e-mail, avec votre lien déjà rempli. Ainsi, chaque lecteur peut devenir le premier lien vers votre site pour quelqu’un de nouveau.
Cet outil crée ces boutons pour vous. Pour commencer, cochez les réseaux voulus parmi 32 icônes SVG. Ensuite, choisissez une forme, du carré au cercle, et la douceur des coins. Puis prenez les couleurs de marque, ou votre propre fond et couleur d’icône.
Après cela, vous réglez la disposition. Les boutons se placent côte à côte, en colonne, en grille ou flottent au bord de l’écran. Enfin, vous copiez le code. La version HTML + CSS garde le style dans un petit bloc, tandis que la version HTML pur met chaque style sur la balise elle-même.
Les boutons sont de simples liens vers la page de partage de chaque réseau. C’est pourquoi il n’y a ni widget, ni script de suivi, ni rien qui ralentit la page. De plus, chaque lien reçoit un aria-label clair, donc les utilisateurs de lecteur d’écran entendent « Partager sur Facebook » au lieu de rien.
Ce que contient un bouton de partage
Chaque bouton est un lien en trois parties. D’abord, l’adresse est la page de partage du réseau, avec votre lien et votre titre ajoutés. Ensuite, l’icône est un SVG en ligne, donc elle reste nette à toute taille et ne demande aucun fichier en plus.
La troisième partie est l’étiquette. C’est un texte visible, comme « Facebook », ou un aria-label caché. Grâce à elle, le bouton garde son sens pour les personnes qui ne voient pas l’icône.
Icônes réseaux sociaux en SVG, prêtes à styliser
L’outil dessine les 32 icônes réseaux sociaux en SVG. Autrement dit, chaque icône est un tracé, rempli de la couleur choisie. Ainsi, une icône blanche sur une couleur de marque et une icône foncée sur une teinte douce restent nettes.
Chaque changement apparaît tout de suite dans l’aperçu en direct. Par ailleurs, l’aperçu peut s’afficher sur un fond blanc, gris clair ou foncé. De cette façon, vous voyez l’allure des boutons sur votre vraie page.
HTML pour icônes réseaux sociaux : deux types de code
Choisissez HTML + CSS pour un site ou un thème. Vous obtenez alors un seul bloc de style et des noms de classe courts, et les effets au survol marchent aussi.
En revanche, choisissez le HTML pur pour les constructeurs de pages, le Markdown ou un e-mail HTML. Là, chaque style est sur la balise, donc rien d’autre n’est nécessaire.
Sur cette page
- L’outil
- Ce que fait cet outil d’icônes réseaux sociaux
- Comment créer des boutons de partage
- Pourquoi utiliser ces boutons avec icônes réseaux sociaux
- Comment les boutons de partage sont construits
- Erreurs courantes avec les boutons de partage
- Questions fréquentes sur les icônes réseaux sociaux
- Plus d’outils pour le partage et le HTML
Continuer
Voir le générateur de boutons de partage en action
Une courte vidéo montre chaque étape. Ensuite, choisissez votre langue ci-dessous et activez les sous-titres si vous le souhaitez.
Comment créer des boutons de partage
Six étapes courtes. D’ailleurs, tout se passe dans cet onglet.
Choisir partage ou suivi
Utilisez « Boutons qui » en haut. Partagent une page crée des liens de partage, et Mènent à mes profils pointe vers vos propres comptes.
Cocher les réseaux
Cochez chaque réseau voulu. Les boutons suivent l’ordre de vos coches, donc cochez d’abord le plus utile.
Ajouter la page ou vos profils
Tapez l’adresse de la page et le texte à partager. Pour des boutons de suivi, collez plutôt le lien de chaque profil.
Choisir forme et couleurs
Choisissez une forme, bougez le curseur de douceur et prenez un style. Puis gardez les couleurs de marque, ou mettez votre propre fond et couleur d’icône.
Régler la disposition
Placez les boutons côte à côte, en colonne, en grille ou dans une barre latérale flottante. Réglez aussi la taille, l’espace entre eux et le texte.
Copier le code
Choisissez HTML + CSS ou HTML pur, puis copiez le code ou téléchargez-le en fichier HTML. Ensuite, collez-le une fois là où les boutons doivent s’afficher.
Pourquoi utiliser ces boutons avec icônes réseaux sociaux
Trois raisons de créer vos propres boutons plutôt que d’ajouter un widget.
Pas de widget, pas de suivi
Les widgets de partage chargent souvent un script, posent des cookies et suivent vos lecteurs. Ces boutons, en revanche, sont de simples liens. Ainsi, votre page reste rapide, et vous n’avez rien de plus à indiquer dans votre politique de confidentialité.
Tout le style au même endroit
Forme, douceur, couleurs, taille, disposition et survol tiennent sur un seul écran. De plus, six styles rapides vous donnent un bon départ en un clic, et chaque réglage reste modifiable ensuite.
Du code qui va partout
La version HTML + CSS convient à un site ou à un thème. En même temps, la version HTML pur marche là où vous ne pouvez pas ajouter de CSS, par exemple dans un bloc de constructeur de pages ou un e-mail.
Comment les boutons de partage sont construits
Trois règles façonnent le code que vous copiez. Ainsi, les connaître vous aide à bien l’utiliser.
- Chaque réseau a sa propre adresse de partage Facebook, X, LinkedIn et les autres ont chacun une page qui ouvre une publication prête. L’outil ajoute votre lien encodé et votre titre à cette adresse. Cependant, certaines applications, comme Viber et Messenger, utilisent un lien d’application, donc elles marchent mieux sur téléphone.
- Les liens de partage restent en nofollow Un lien de partage n’est pas une page dont vous vous portez garant. C’est pourquoi l’outil marque ces liens avec rel="nofollow noopener noreferrer". En revanche, les liens de profil reçoivent rel="me", qui indique à certains réseaux que le profil est à vous.
- Le contraste décide de ce qu’on voit Une icône demande un contraste d’au moins 3 pour 1 avec son fond pour bien se voir. C’est la règle du guide WCAG sur le contraste non textuel. Donc, quand vos propres couleurs passent en dessous, l’outil vous prévient.
Erreurs courantes avec les boutons de partage
Chacune coûte des partages, même avec de bons boutons.
Trop de réseaux
Vingt boutons ressemblent à du bruit. Gardez plutôt les trois à six que vos lecteurs utilisent vraiment.
Des icônes sans étiquette
Un lecteur d’écran ne peut pas lire une icône. C’est pourquoi le code ajoute un aria-label à chaque bouton.
Une icône pâle sur une couleur pâle
Le blanc sur jaune clair se voit mal. Donc surveillez l’alerte de contraste et corrigez la couleur.
La mauvaise adresse de page
Alors chaque page partage votre page d’accueil. Cochez plutôt l’adresse automatique pour les modèles.
Des boutons trop petits sur mobile
Un bouton minuscule est difficile à toucher. Donc gardez-les à 40 pixels ou plus pour le pouce.
Une barre flottante sur le contenu
Une barre latérale peut cacher du texte sur un petit écran. C’est pourquoi il faut la tester sur un téléphone avant de publier.
Questions fréquentes sur les icônes réseaux sociaux
Ce générateur de boutons de partage est-il gratuit ?
Oui. Il n’y a ni prix, ni inscription, ni filigrane dans le code. En effet, votre navigateur fait tout le travail.
Les boutons suivent-ils mes lecteurs ?
Non. Ce sont de simples liens, sans script de notre part ni des réseaux. Ainsi, un réseau ne voit une visite que lorsqu’un lecteur clique.
Combien de réseaux puis-je utiliser ?
Il y a 32 icônes. Parmi elles, 22 peuvent partager une page, tandis que les autres, comme Instagram et YouTube, mènent à un profil.
Pourquoi ne puis-je pas cocher Instagram en mode partage ?
Instagram, YouTube et TikTok n’ont pas d’adresse web qui partage un lien. Donc passez à « Mènent à mes profils » pour les utiliser.
Quelle différence entre boutons de partage et de suivi ?
Un bouton de partage publie votre page sur le compte du lecteur. En revanche, un bouton de suivi mène le lecteur à votre profil.
Quel type de code choisir ?
Prenez HTML + CSS pour un site ou un thème. Puis prenez le HTML pur pour les constructeurs de pages, le Markdown ou les e-mails.
Pourquoi les effets au survol manquent-ils en HTML pur ?
Un effet au survol demande une règle CSS, et les styles en ligne ne peuvent pas en contenir. Donc utilisez HTML + CSS si vous voulez l’effet.
À quoi sert la douceur ?
Elle règle l’arrondi des coins, en part de la hauteur du bouton. Ainsi, zéro donne des coins droits et 50 une courbe complète.
Quelles formes puis-je choisir ?
Carré, arrondi, cercle, pilule, feuille et hexagone. D’ailleurs, la pilule convient le mieux quand les boutons affichent le nom des réseaux.
Puis-je utiliser mes propres couleurs ?
Oui. Décochez « Utiliser la couleur de marque de chaque réseau », puis choisissez une couleur de fond et une couleur d’icône.
Que veulent dire les styles ?
Plein remplit le bouton, et dégradé le fait fondre. Contour ne trace qu’un bord, teinte douce utilise un fond pâle, et icône seule retire le fond.
Comment mettre les boutons côte à côte ?
Choisissez « Côte à côte » dans Disposition. Ils s’alignent alors en ligne et passent à la ligne sur les petits écrans.
Qu’est-ce que la barre latérale flottante ?
Elle fixe les boutons au bord gauche de la fenêtre, à mi-hauteur. Ainsi, ils restent visibles pendant que le lecteur défile.
Les boutons peuvent-ils partager la page où ils se trouvent ?
Oui. Cochez l’option d’adresse automatique en HTML + CSS. Ensuite, un petit script remplit l’adresse et le titre de la page.
Comment fonctionne le bouton de copie du lien ?
Il copie l’adresse de la page dans le presse-papiers. Comme cela demande un script, le code ajoute quelques lignes pour cela.
Où coller le code ?
Collez-le une fois là où les boutons doivent s’afficher, par exemple après un article. Dans WordPress, utilisez un bloc HTML personnalisé.
Puis-je changer le nom de classe ?
Oui. Tapez un nouveau nom sous « Nom de classe CSS », ainsi les boutons n’entrent jamais en conflit avec vos styles.
Les icônes sont-elles en SVG ?
Oui. Chaque icône est un seul tracé SVG en ligne, c’est pourquoi elle reste nette à toute taille et ne demande aucun fichier image.
Puis-je utiliser les icônes SVG ailleurs ?
Oui, copiez le SVG depuis le code. Cela dit, respectez les règles de marque de chaque réseau quand vous montrez son logo.
Quelle taille pour des boutons de partage ?
Entre 40 et 48 pixels convient bien aux téléphones et aux ordinateurs. En revanche, des boutons plus petits sont difficiles à toucher.
Les boutons de partage aident-ils le SEO ?
Pas directement, car les partages ne sont pas un facteur de classement. Cependant, plus de partages amènent plus de visiteurs, et certains peuvent faire un lien vers vous.
Pourquoi les liens de partage sont-ils en nofollow ?
Un lien de partage mène à un outil, pas à un contenu que vous recommandez. Donc nofollow est le choix honnête.
Les boutons marchent-ils sur mobile ?
Oui. Sur un téléphone, WhatsApp, Viber, Messenger et SMS ouvrent l’application tout de suite.
Puis-je les utiliser dans un e-mail HTML ?
Oui, avec le code HTML pur. Cependant, certaines applications d’e-mail masquent le SVG, donc testez dans celles de vos lecteurs.
L’outil enregistre-t-il mes réglages ?
Non. Rien n’est gardé après la fermeture de l’onglet. C’est pourquoi il faut copier ou télécharger le code avant de partir.
Puis-je créer des boutons de suivi pour mes profils ?
Oui. Choisissez « Mènent à mes profils », cochez vos réseaux et collez l’adresse de chaque profil. Un bouton sans adresse pointe vers # tant que vous n’en ajoutez pas.
Plus d’outils pour le partage et le HTML
Quelques pages qui vont bien avec les boutons de partage.
- Générateur Open Graph
Écrivez les balises derrière la carte qu’affiche un lien.
- Éditeur HTML en ligne
Collez le code des boutons et testez-le en direct.
- Minificateur HTML
Réduisez le code avant de le coller.
- Générateur de palette de couleurs
Trouvez des couleurs de bouton assorties à votre marque.
- Vérificateur SEO
Vérifiez votre page, boutons de partage compris.
Créez vos boutons de partage maintenant
Cochez vos réseaux, choisissez un style et copiez le code. De plus, l’outil est gratuit, et rien de ce que vous tapez ne quitte cet onglet.