Générateur de Boutons de Partage Social
Un générateur de boutons de partage écrit le code des boutons à votre place. Cochez les réseaux, réglez le style, la taille, l'arrondi et l'espacement : le cadre Code d'intégration se met à jour en direct. Avec les quatre réseaux par défaut, l'onglet JS hébergé renvoie une seule balise — <script src="https://www.freewebtools.com/js/widgets/social-share.min.js" data-platforms="facebook,twitter,linkedin,whatsapp"> — et l'onglet Liens HTML renvoie les mêmes boutons sous forme de liens simples.
Plateformes
Personnaliser
Préréglages
Aperçu en direct
Code d'Intégration
Outils populaires
À propos de Générateur de Boutons de Partage Social
Ce générateur produit des boutons de partage prêts à coller vers huit destinations : Facebook, X (Twitter), LinkedIn, WhatsApp, Pinterest, Reddit, Telegram et e-mail. Cochez ceux que vous voulez sous Plateformes, puis façonnez-les sous Personnaliser : style (plein, contour ou minimal), disposition (horizontale ou verticale), position (dans le texte ou flottante à gauche ou à droite), taille d'icône de 28 à 56 pixels, arrondi des coins du carré au cercle, et espacement de 2 à 16 pixels. Deux cases décident si le nom du réseau accompagne l'icône et si la ligne d'attribution reste. Cinq préréglages — Par défaut, Icônes compactes, Barre flottante, Contour et Minimal — règlent tout d'un clic.
L'aperçu est une fausse fenêtre de navigateur : vous voyez donc les boutons dans une page et non isolés, et il se redessine à chaque changement. Le cadre Code d'intégration propose deux sorties. JS hébergé est une balise script unique avec des attributs data- : seuls les réglages différents des valeurs par défaut sont écrits, ce qui garde la balise courte. Liens HTML est un div de liens pointant vers l'adresse de partage de chaque réseau, avec target="_blank" et rel="noopener noreferrer" déjà en place — rien à charger, rien à exécuter.
Laissez URL personnalisée vide et la sortie HTML utilise le repère PAGE_URL, que vous remplacez par l'adresse à partager ; le script hébergé lit l'adresse de la page en cours, si bien qu'il fonctionne tel quel sur tous les articles d'un site. Ce que vous saisissez dans URL personnalisée est échappé en HTML avant d'être inséré dans l'attribut généré.
Ce qu'il ne fait pas : il ne compte pas les partages et ne dépose aucun cookie. Les boutons sont des liens vers la fenêtre de partage de chaque réseau : les compteurs et les règles de consentement relèvent de ces réseaux, pas de cette page.
Cas d'utilisation
Comment utiliser
Sous Plateformes, cochez les réseaux voulus. Facebook, X (Twitter), LinkedIn et WhatsApp sont cochés par défaut ; Pinterest, Reddit, Telegram et e-mail sont aussi proposés.
Dans Personnaliser, choisissez un style, une disposition et une position, puis servez-vous des curseurs Taille et Espacement et de la liste Rayon de bordure pour coller à votre page.
Utilisez les cases Afficher les libellés et Afficher la marque pour décider si le nom des réseaux et la ligne d'attribution apparaissent.
Collez éventuellement une adresse dans URL personnalisée. Laissez le champ vide pour partager la page où les boutons seront installés.
Contrôlez l'Aperçu en direct, qui montre les boutons dans une fausse fenêtre de navigateur et se redessine après chaque changement.
Basculez le cadre Code d'intégration entre JS hébergé et Liens HTML, puis appuyez sur Copier et collez le résultat dans votre page.
Astuces Pro
- La balise hébergée n'écrit que les réglages modifiés. Si elle paraît étonnamment courte, c'est que style, disposition, taille 36, arrondi 8 et espacement 8 sont les valeurs par défaut et restent implicites.
- Laissez URL personnalisée vide si les boutons doivent partager la page où ils se trouvent. La sortie HTML porte alors littéralement PAGE_URL, qu'il faut remplacer avant de coller.
- Afficher les libellés change la géométrie et pas seulement le texte : sans libellé, chaque bouton devient un carré de la taille exacte du curseur Taille ; avec libellé, il s'élargit pour accueillir le nom.
- Flottant à gauche et Flottant à droite ignorent la liste Disposition — une barre flottante est toujours une colonne verticale — ne réglez donc Disposition que si Position vaut Dans le texte.
- Le style Minimal dessine l'icône dans la couleur du réseau, sans fond ni bordure. Sur une page sombre, vérifiez-le sur votre propre fond avant publication, car il n'hérite de rien.
Dépannage
Les liens HTML générés pointent tous vers PAGE_URL.
C'est le repère utilisé quand URL personnalisée est vide. Saisissez l'adresse à partager dans URL personnalisée puis recopiez, ou remplacez PAGE_URL dans le code collé par l'adresse de la page. La sortie JS hébergé n'en a pas besoin : le script lit l'adresse à l'exécution.
Choisir une position flottante ne change rien à la liste Disposition.
Une barre flottante est toujours empilée verticalement : Disposition n'est appliquée que si Position vaut Dans le texte. Repassez Position sur Dans le texte pour une rangée horizontale, ou gardez le flottant et réglez la colonne avec le curseur Espacement.
Les boutons du style Minimal sont peu visibles sur ma page.
Minimal dessine l'icône dans la couleur du réseau, sans fond ni bordure : tout repose donc sur le contraste de votre page. Passez au style Plein, ou au style Contour, qui conserve une bordure colorée de deux pixels autour de chaque icône.
Questions fréquemment posées
Cochez les réseaux sous Plateformes, réglez l'apparence sous Personnaliser, puis copiez l'une des deux sorties. JS hébergé est une balise script unique à coller là où les boutons doivent apparaître. Liens HTML est un bloc de liens que vous pouvez coller dans n'importe quel gabarit, y compris un gabarit qui ne doit charger aucun JavaScript externe.
C'est un lien ordinaire vers l'adresse de partage du réseau. Facebook utilise https://www.facebook.com/sharer/sharer.php?u= suivi de l'adresse encodée ; X utilise https://twitter.com/intent/tweet?url= ; LinkedIn utilise /sharing/share-offsite/?url=. L'onglet Liens HTML les écrit tous avec target="_blank" et rel="noopener noreferrer".
Huit : Facebook, X (Twitter), LinkedIn, WhatsApp, Pinterest, Reddit, Telegram et e-mail. Les quatre premiers sont cochés par défaut. L'e-mail passe par un lien mailto: avec l'adresse dans le corps du message : il ouvre donc le logiciel de messagerie du visiteur et non un service web.
La sortie Liens HTML, oui. C'est un div de liens : il s'affiche et fonctionne même script désactivé, et n'ajoute aucune requête tierce à votre page. La sortie JS hébergé a besoin de JavaScript, puisque le script dessine les boutons et lit l'adresse de la page en cours à l'exécution.
Oui, et le code généré vous appartient. Afficher la marque ajoute une ligne d'attribution ; décochez-la si vous n'en voulez pas. La sortie Liens HTML est entièrement autonome, tandis que le script hébergé est chargé depuis freewebtools.com : à garder en tête si votre site bloque les scripts externes.
Oui. Saisissez-la dans URL personnalisée et les deux sorties l'utilisent : la balise hébergée reçoit un attribut data-url et les liens HTML pointent vers cette adresse. Laissez le champ vide et la sortie HTML retombe sur le repère PAGE_URL, alors que le script hébergé lit la page où il s'exécute.
Décochez Afficher les libellés, mettez Rayon de bordure sur Cercle et choisissez une taille au curseur — 32 pixels est la valeur du préréglage Icônes compactes. Sans libellé, chaque bouton devient un carré de cette taille exacte, que l'arrondi circulaire transforme en disque.
Plein peint le bouton dans la couleur de marque du réseau avec une icône blanche. Contour garde le fond transparent et trace une bordure de deux pixels dans la couleur de marque, l'icône étant de la même couleur. Minimal supprime le fond et la bordure et ne laisse que l'icône colorée.
Non. Ce sont des liens qui ouvrent la fenêtre de partage de chaque réseau, et aucun réseau n'expose plus de compteur public à un site quelconque. Si vous voulez des chiffres, prenez-les dans vos statistiques ou dans les rapports de chaque réseau plutôt que dans le bouton.
Oui. Mettez Position sur Flottant à gauche ou Flottant à droite, ou appuyez sur le préréglage Barre flottante, qui bascule aussi en colonne verticale, masque les libellés et fixe la taille à 40 pixels. L'aperçu déplace la barre vers le bord correspondant de la fausse fenêtre.