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

<script src="https://tools.refokus.com/social-share/bundle.v1.0.0.js"></script>

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!