Improve the conversion rate of your website thanks to the addition of sharing buttons on social networks with our tutorial to implement these social links in your Webflow project!
You want to improve your presence on social networks and generate more traffic to your website? Today, we teach you in Webflow how to configure social sharing buttons or links on your website pages. This will be particularly useful on your dynamic pages (blog posts for example).
This solution is possible thanks to the Refokus Webflow clonable.
Discover Webflow clonables that optimize your productivity in Webflow!
1. Add a code on the pages where you want to add sharing links
The first step is simply to copy and paste a code into all the pages where you want to set up a system for sharing on social networks.
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".
2. Add your links in Webflow
Once you have added the code, you can now add links to your pages. These elements will allow the page in question to be shared on different social networks. You are free to customise your links, but you must insert a link block or a button.
3. Adding attributes to your links
Once you have added your links to your project, you will need to give custom attributes to each of them.
PS: You should not add external or internal links in these elements.
3.1 For a share link by copying the URL to the clipboard
You will need to add the following attribute to your link: r-share-url with a value of 1
3.2 For a share link on LinkedIn
You will need to add the following attribute to your link: r-share-linkedin with a value of 1
3.3 For a share link on Twitter
You will need to add the following attribute to your link: r-share-twitter with a value of 1
3.4 For a share link on Facebook
You will need to add the following attribute to your link: r-share-facebook with a value of 1
4. Publish your project
Now all you have to do is publish your project on your website and enjoy this great feature!
Discover more Webflow tutorials!
.jpg)
