I'm going to show you how to create custom social media share buttons on your Webflow website, so that when you click them, the current page will be shared on social media. These work on CMS pages as well.

‍

In this example, I'm using Facebook, but the concept is the same for all social media platforms as long as you are using the correct code.

‍

Skip the tutorial: see the cloneable.

‍

Step 1: Add a Div Block

‍

Add a div block anywhere on the page. The div block should be updated as follows:

‍

• Position: Fixed
• Position location: left
• Top position: 45%
• Bottom position: Auto
• Z-index: 999 (something really high)

‍

‍

Step 2: Add a Link Block

‍

Next, add a link block inside of the div block. The link block should be updated as follows:

‍

• Height: 50px, Width: 50px
• Add background image: Facebook icon (or whichever social media platform you want)
• Background image: 50px, no repeat, centered
• Add a class of "social-share-icon"
• Add another class of "facebook" to make it a combo class (in other words, just add another class to the same link block)

‍

‍

Step 3: Add an HTML Embed Code

‍

To make the button share to Facebook when clicked, we need to add some Javascript. You can find the code for all social media platforms on the Webflow forum here.

‍

Place an embed code inside of the div block and paste the corresponding code in it. Here is the Facebook code:

‍

‍

Make sure you update the combo class to match our link block class. So for this example, we'd update it to "social-share-icon facebook".

‍

Step 4: Hide or Delete the Link Block

‍

You should now be left with two Facebook icons, one a link block and the other the HTML which is pulling in the link block information.

‍

You can delete the link block if you'd like, however, I recommend hiding it instead.

‍

If you don't hide the link block, it is at risk of being deleted through a CSS Stylesheet cleanup.

‍

To hide the link block, simply add it to another div block, and then hide that div block.

‍

That's it.

‍

Step 5: Repeat for Other Social Media Platforms

‍

If you want to make the page shareable on more social media channels, simply drag-n-drop link blocks inside of the div we added in step 1.

‍

Update the class to be "social-share-icon", and then make it a combo class with whichever platform you are making it shareable on.

‍

So if you want to add a Twitter icon, the classes would be "social-share-icon" and "twitter".

‍

All you need to do now is update the image to be the Twitter icon, and then add the correct code found in the Webflow forum.