How to Create Dynamic Social Media Share Buttons on Webflow Websites

January 16, 2020
by Karr Fager

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)

add a div block

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)

facebook icon on left sidebar
This is what you should now see.

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:

See the Pen mdyYaVv by Digital Red Panther (@digitalredpanther) on CodePen.

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.

Schedule a call