Back to Blog

How to Add Social Share Buttons to your Webflow Site

Let users share your page to social media with ease.

Tom B.
January 4, 2022
{{ Template "copy-button" "id:extension-social-buttons" }}

Overview 📚

Want to add buttons that let your users share your pages to social media? Add these buttons to your own Webflow site in seconds, and customize them to look any way you like! Just add the attributes as shown below and the code will manage the rest.

Currently we support social media sharing for Twitter, Facebook, Linkedin & Whatsapp


To add this into your project, follow the simple steps and add the custom code into your project or page settings.

{{ Template "gist" "text:Before </body> tag" "id:b1575ff947fa534912ec35f8defbdcef" }}

Instructions ✍️

1. Add the script to your custom code settings

Navigate to your page settings or project settings and add the script into your Before </body> tag code area.


2. Create your buttons & add the attributes

Add buttons or link-blocks to your page, and style them as you need. We will be adding an ID attribute to these elements which will allow us to share these items to social media.

Target your button and navigate to the settings tab.

Add your custom attribute with the value set as 'true', for example:

Name: data-share-twitter
Value: true
Name: data-share-linkedin
Value: true
Name: data-share-facebook
Value: true
Name: data-share-whatsapp
Value: true

3. Publish your site and test

Once you've added your script and the IDs that you require you are ready to publish and test it out.

OTHER BLOG ARTICLES

Check out some other articles!

Join Over 55,000+
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 55,000+ other creators across our communities.