Webflow Attribute Booster

Webflow Share to Social Media Button

Share your Webflow page to popular social media platforms. Automatically populate your page title and URL allowing you to share it to platforms like Facebook, Twitter, Pintrest and more.

Preview Booster

Install with Boosters™

Getting Started 🔗

Share your Webflow page to popular social media platforms. Automatically populate your page title and URL allowing your users to share it to social media platforms like Facebook, Twitter, Pintrest and more. Follow the simple instructions below, or install the Official Boosters App for the most simple install and setup possible.

Install Instructions ✍️

1. Add the booster script to your project.

Copy the script source below and paste it into the <head> tag of your custom code settings. Not sure how to add custom code in Webflow? Click here to learn more.

<!-- Flowbase Booster [Social Share] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-social-share@1.0.0/dist/social-share.min.js" type="text/javascript"></script>

2. Create your share buttons

For this Booster, attributes must be added to each button or link-block that you want to use to trigger the page share. Add a button or link-block to your page, and style it as you require.

3. Add the share button attributes

Once you've created your button that the user will click, let's add the attributes

Add the attribute Name: fb-social and Value: true
Add the attribute Name: fb-social-type and Value: twitter

The full list of social attributes include

twitter
linkedin
facebook
pintrest
whatsapp
telegram

In the above example we are using facebook, but you can change this to any of our supported platforms. Once these two attributes have been added you can publish your page and test the share function.

4. Here is the full list of attributes you can use:

Attribute Name	Attribute Value	Description
fb-social	true or false	The primary attribute, and an on/off toggle
fb-social-type	facebook, whatsapp, pintrest, twitter, telegram	Specify the social platform you want to use to share the page.

‍

5. Publish & Test 🚀

Once you've followed the steps above and have added both the script and the attributes, you can publish your page. View your live staging domain to test the Booster in action.