January 4, 2022

How to Add Social Share Buttons to your Webflow Site

Let users share your page to social media with ease.

Back to Blogs

Overview 📚

Add social media share buttons to your own Webflow site in seconds. Customize them to look exactly how you want and add them with simple attributes.

Currently this solution supports the following social media platforms:

  • Twitter
  • Facebook
  • Linkedin
  • Pinterest
  • Telegram
  • Whatsapp

To add this into your project, follow the steps below, and add the custom code into your project or page settings. If you want to take out all the guess work, you can add this to your project with our official Boosters application.

Update Note: This article has been updated and uses our recommended method. Learn more about this on our Boosters page.

Instructions ✍️

1. Add this script the head of your custom code settings

Navigate to your page settings or project settings and add the script into your head section of your custom code. This code is delivered via a global CDN for enterprise speeds.


2. Create your share buttons in Webflow

Add buttons or link-blocks to your page, and style them as you need. We will be adding attributes to these elements to create the shareable links.

3. Add the attributes to each platform

Once you've created the elements, target them and add the two custom attributes to each one. View the attributes below, and adjust the type for your requirements (eg. Facebook, Twitter, Linkedin etc.)

4. Publish your site and test

Once you've added the script and attributes, publish your site to test the links.

5. Add it in seconds with our free Boosters app (Optional)

With our free Boosters app, you can add these attributes in seconds with purpose built UI. Take out all the guess work and add these boosters with our Webflow application.