I’ve seen a lot of folks asking how to make custom social sharing buttons on the Webflow Help Pages lately, so I put together this fun little how-to with code snippets for you all to pull from.
This is clone-able in case you’d like to use the fun widget I created using a dropdown widget and some interactions. Have fun!
Link to the Live site with code snippets to put on your dynamic pages when you’re making custom share buttons which pull the current page url and share it to Facebook/Twitter. Great for when you’re making dynamic pages with news stories, blogs & space cats.
However, is it possible to automatically and dynamically populate the text within the share popup windows with text incorporated within the CMS, such as the title of a Blog?
My pleasure!
I can work on a script to do this @DanUK1 I’ll let you know once I get it working. That would be pulling a field dynamically from the page so the dynamic item would have to be named appropriately such as “Post Title” or something to that effect. I’ll keep you posted
Thanks for sharing! I have been trying to implement this on a site and just can’t seem to get it to work. Whenever I follow your steps, nothing happens when I click. It does not seem to call up the script like it does in your example. As far as I can tell the only difference in yours is you have it embedded in a menu / dropdown list and I am trying to do it in a regular div block.
Would appreciate if you have any thoughts on this!
Hey @LJB once you have a Link Block styled with the background image.
Then delete that and add an HTML Embed block (copy and paste the code I provided) and change the class name of the embedded piece with the class name you gave your link block.
Please let me know if you have any trouble or send over a Read Only link and I can help you get it setup.
Hey @DanUK1 did you create a div with the class “social-icon facebook” and apply your styles to it (that’s the class you have in your HTML Embed)? Whatever class name you give your div/link block that you’re styling to be your button/social link is the class you have to have in the actual HTML Embed block.
Does that make sense?
<a class="YOURCLASSNAMEGOESHERE" href="javascript:fbshareCurrentPage()" target="_blank" alt="Share on Facebook"></a>
<script language="javascript">
function fbshareCurrentPage()
{window.open("https://www.facebook.com/sharer/sharer.php?u="+escape(window.location.href)+"&t="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>
Hi @Waldo
Yes, I didn’t do it for the Facebook link (although I did for the Twitter link) duh!.
I have changed it, but it still isn’t working.
I’m not great at code, but I don’t understand:
a) That the html embed turns into a link when it is just part of a normal div block.
b) Your HTML Embed is called “embed” as opposed to “social-icon facebook” (as well as the parent div “Square out”), which is what the styled link block was originally called in your example. So how can the embed or div be styled as the “social-icon facebook” was.
Regardless, it’s still not working…very frustrating as it is the final piece on my page!
The class name is inside the HTML, you’ll see a class=“social-link facebook” ← that is the class I’m referring to changing to whatever you called yours when styling it.
The HTML embed is a link with a script which it binds to.
Yes, I did change that class within the HTML embed, but as I say the link isn’t working.
On the actual site, when scrolling over the div (link), nothing happens as per:
You have to give it the correct class name currently your class name in the embed is “Facebook Link” it should be “facebook-link”. You should have a different class for the actual HTML embed element without all the padding, just a height of 40px and width of 100px. I also recommend using much smaller images as the background for those buttons as they’re currently 544x179.