How to Add Social Share Buttons to your Webflow Site

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