Badge Webflow Award Winner 2023

Liens de partage réseaux sociaux dans Webflow

Améliorez le taux de conversion de votre site web grâce à l'ajout de boutons de partage sur les réseaux sociaux grâce à notre tutoriel pour implémenter ces liens sociaux dans votre projet Webflow !

Publié le 
4/7/2022
Modifié le 
24/3/2023
5 min
Social share media icon and webflow logo

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 !

Découvrir plus de tutoriels Webflow !

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !