# Liens de partage réseaux sociaux dans Webflow Tutoriel3 minPublié le Jul 04, 2022Dernière mise à jour le ![Social share media icon and webflow logo](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712272910708bf4ab29e013_64760069e93084646c9ef1ce_62c3cc13aed47f5d6048d3db_Open-Graph-webflow-share-link.png)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'articleVous souhaitez améliorer votre présence sur les réseaux sociaux et générer plus de trafic vers votre site web ? Aujourd'hui, nous vous apprenons dans Webflow à configurer des boutons ou liens de partage social sur les pages de votre site. Cela pourra notamment vous être utile sur vos pages dynamiques (articles de blog par exemple). Cette solution est possible grâce à au [clonable Webflow de Refokus](https://webflow.com/made-in-webflow/website/Social-Share-by-Refokus). Découvrir des [clonables Webflow qui optimisent votre productivité dans Webflow](/fr/blog/7-clonables-webflow-showcase) ! ## 1. Ajouter un code sur les pages dans lesquelles vous souhaitez ajouter des liens de partage La première étape va tout simplement consister à copier-coller un code dans toutes les pages où vous souhaitez mettre en place un système de partage sur les réseaux sociaux. Il vous suffira juste de vous rendre dans les paramètres de vos pages, puis copier-coller le code ci-dessous dans la partie "**Before tag**". ``![Code avant body pour ajouter des liens sociaux sur une page webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712272b10708bf4ab29e145_64760069e93084646c9eef34_62c2ebb6be305c5d71b842d6_code-partage-reseaux-sociaux-webflow.png) ## 2. Ajouter vos liens dans Webflow Lorsque vous avez ajouté le code, vous pouvez maintenant ajouter des liens dans vos pages. Ces éléments permettront de partager la page en question sur différents réseaux sociaux. Vous êtes libre dans la personnalisation de vos liens, mais il faut obligatoirement insérer un **link block** ou un **bouton**. ![Liste de liens de partage social](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712272b10708bf4ab29e14b_64760069e93084646c9eef39_62c2ebc4e831344bc83a1262_liens-partage-reseaux-sociaux-webflow.png) ## 3. Ajouter des attributes à vos liens Après avoir ajouté vos liens dans votre projet, il va falloir donner des attributs personnalisés à chacun d'eux. PS : **Il ne faut pas ajouter de liens externe ou interne dans ces éléments**. ### 3.1 Pour un lien de partage en copiant l'URL dans le presse-papier Il faudra ajouter à votre lien l'attribut suivant : **r-share-url** avec une valeur de **1** ![attribut pour partage social via URL](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712272b10708bf4ab29e12a_64760069e93084646c9eef35_62c2ebe7fbe2df0467a5edd5_lien-url-partage-reseaux-sociaux-webflow.png) ### 3.2 Pour un lien de partage sur LinkedIn Il faudra ajouter à votre lien l'attribut suivant : **r-share-linkedin** avec une valeur de **1** ![attribut pour partage social via LinkedIn](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712272b10708bf4ab29e151_64760069e93084646c9eef42_62c2ebf22523e204e1a9ab5f_lien-linkedin-partage-reseaux-sociaux-webflow.png) ### 3.3 Pour un lien de partage sur Twitter Il faudra ajouter à votre lien l'attribut suivant : **r-share-twitter** avec une valeur de **1** ![attribut pour partage social via twitter](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712272b10708bf4ab29e14e_64760069e93084646c9eef36_62c2ebfcc207cbd13688d7d3_lien-twitter-partage-reseaux-sociaux-webflow.png) ### 3.4 Pour un lien de partage sur Facebook Il faudra ajouter à votre lien l'attribut suivant : **r-share-facebook** avec une valeur de **1** ![attribut pour partage social via Facebook](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712272b10708bf4ab29e148_64760069e93084646c9eef33_62c2ec0aa60ddc55883582e6_lien-facebook-partage-reseaux-sociaux-webflow.png) ## 4. Publier votre projet Voilà, vous n'avez plus qu'à publier votre projet sur votre site web et profitez de cette fonctionnalité sympathique ! {{custom-blog-cta}} Formation Webflow Gratuite[Voir la formation ](https://www.youtube.com/live/CRFnSPsEl6A?si=xp7yzna_ZffnmspT)![Thibaut Legrand](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a47ec4cabceb0d6aa7c2e_thibaut-website%20(1).webp)Thibaut LegrandCo-fondateur de Vydera & Technical Solutions Architect[ ](/fr/team/thibaut-legrand)[ ](https://www.linkedin.com/in/thibaut-legrand-digidop/)[ ](https://twitter.com/lgd_thibaut)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)