How to create share buttons like Webflow do?

Design help Custom code
1

Hey,

I really want to create a social share bar like on this page: https://webflow.com/blog/customizing-your-social-sharing-buttons-with-webflow-cms

There’s a really cool scrolling share bar on the left which I’d love to replicate. Is this doable? Do you know how I’d go about building this (I wish Webflow made it cloneable)?

Thank you

2

Still trying to build this. Does Webflow use much 3rd party code for the counter above the Facebook icon?

3

Hey @Lund_P - we’ve used AddThis share buttons on landing pages and blog posts a lot, then customized the display of each icon using custom CSS. You should be able to try this out for free - it’s helpful because AddThis automatically pulls the page OG information into the posts when they’re shared (all you need to do is add a line of Javascript before the </body> tag).

To keep the social share buttons fixed on the left as you scroll, you’ll need to use some custom position: sticky code.

Hope this helps!

1 Like
4

Thanks @brjohnson - very helpful! I did integrate AddThis previously, but I couldn’t figure out how to add custom CSS. I chose the Floating option (which has the floating icons on the left) and integrated the body code, but couldn’t find a guide on custom CSS for each icon.

How can I setup custom naming/css for the bar and icons?

5

Unfortunately there’s no easy answer there - you’ll need to write the code yourself, or find someone who can write the CSS for you. I’d look through the AddThis website to see if they have tips for customizing the appearance of the share buttons beyond what they allow you to do from their dashboard. Good luck!

1 Like