Social media sharing links in Webflow

Tutorial
3 min
Published on Mar 20, 2023
Updated on
Social media share icon and Webflow logo
Use AI to summarize this article
Key points

Do you want to enhance your presence on social media and drive more traffic to your website? Today, we will teach you how to set up social sharing buttons or links on your website pages using Webflow. This will be particularly useful for your dynamic pages (like blog posts, for example).

This solution is made possible thanks to the clonable Webflow by Refokus.

Discover Webflow clonables that optimize your productivity in Webflow!

1. Add code to the pages where you want to include sharing links

The first step is simply to copy and paste code into all the pages where you want to implement a social sharing system.

You will just need to go to your page settings and then copy and paste the code below into the "Before <!-- fs-richtext-ignore --></body> tag" section.

<script src="https://tools.refokus.com/social-share/bundle.v1.0.0.js"></script>
Code before body to add social links on a Webflow page

2. Add your links in Webflow

Once you have added the code, you can now include links in your pages. These elements will allow users to share the respective page across different social media platforms. You have the freedom to customize your links, but it is essential to include a link block or a button.

List of social share links

3. Add attributes to your links

After adding your links to your project, you will need to assign custom attributes to each of them.

PS: Do not add external or internal links in these elements.

3.1 For a share link 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

attribute for sharing via URL

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

attribute for sharing via LinkedIn

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

attribute for sharing via Twitter

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

attribute for sharing via Facebook

4. Publish your project

Now, all you have to do is publish your project on your website and enjoy this lovely feature!

Discover more Webflow tutorials!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

Futuristic “CRO 2025” illustration with an open door symbolizing new opportunities in conversion rate optimization.
Documentation
Design

The Ultimate CRO Guide for 2025: Strategies, Tools & Tactics to Boost Conversions

The Ultimate CRO Guide for 2025: Strategies, Tools & Tactics to Boost Conversions
AI Tech Summit 2025 conference with a speaker on stage in front of a large audience, surrounded by big screens displaying “AI” and “Tech Summit 2025”. (Gen by AI)
Events

2025 Calendar of Must-Attend Web, Design & AI Events

2025 Calendar of Must-Attend Web, Design & AI Events
Screenshot of Google search homepage with search bar and Google logo.
Documentation
SEO

3 tools to track your SEO rankings in the SERP

3 tools to track your SEO rankings in the SERP

Want to turn your website into your most valuable asset?

Contact us today