Overview 🔗
Add social media share buttons to your own Webflow site in seconds. Perfect for blogs to help your users share the article to various social platforms. With this solution you can customize them to look exactly how you want and all you need is a few simple attributes.
Currently this solution supports the following social media platforms:
- Telegram
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.
Instructions ✍️
1. Add the script to your custom code settings
Copy the script and paste it into the <head> section of your custom code settings. If you prefer a quicker setup, you can use our Webflow Boosters App to install the script and add the share links to any element instantly.
<!-- 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 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. There aren't any style limitations here, so get creative.
3. Add the attributes to each platform
Once you've created the elements, target them and add the two custom attributes to each one. Add the attribute Name: fb-social Value: true and Name: fb-social-type Value: twitter. You can change this value to suit your needs, view the available attributes below.
These are the available values:
twitterfacebooklinkedinpinteresttelegramwhatsapp
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
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.
6. Publish & Test 🚀
Once you've completed the steps above, including adding both the script and the necessary attributes, it's time to publish your page. Head over to your live staging domain to see the Booster in action.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
