Liens de partage réseaux sociaux dans Webflow

Tutoriel
July 4, 2022
3 min
Social share media icon and webflow logo
Résumez cet article avec une IA
Points clés de l'article

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

Découvrir des clonables Webflow qui optimisent votre productivité dans Webflow !

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 <!-- fs-richtext-ignore --></body> tag".

<script src="https://tools.refokus.com/social-share/bundle.v1.0.0.js"></script>
Code avant body pour ajouter des liens sociaux sur une page webflow

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

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

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

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

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

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
Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

Capture d'écran de la page d'accueil de la recherche Google avec la barre de recherche et le logo Google.
Documentation
SEO

3 outils pour suivre vos positions SEO dans la SERP

3 outils pour suivre vos positions SEO dans la SERP
ChatGPT 5.0 OpenAI
News
IA

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025
Capture d'écran montrant deux versions de la page d'accueil de Ramify. La version de fond représente un homme debout dans un bureau avec le texte « Vivez l'expérience banque privée, autrement ». La version au premier plan affiche une mise en page plus épurée avec le message « Votre patrimoine, notre expertise ».
Documentation

Comment Digidop a aidé Ramify à augmenter son taux de conversion grâce à une stratégie d’A/B testing avec Optibase ?

Comment Digidop a aidé Ramify à augmenter son taux de conversion grâce à une stratégie d’A/B testing avec Optibase ?

Transformez votre site web en un moteur de croissance.

Nous contacter