How to add dynamic social media share buttons to your Webflow site

You might be working on a client site that includes a blog or new section and are looking at integrating social media share buttons on your site. In case you're not aware: these little buttons let you share a page via different social media channels such as Facebook or Twitter. You can also set up such a button to share a specific page via email. In this article I'll tell you how to do just that! First things first, you can simply add share buttons via an external service such as ShareThis (Webflow tells you how to do this in this article). But in this article I want to talk about how to do this without relying on other providers (and signing up for yet another account). So let's get started...

Facebook Share Link

1. Make sure you have set up your blog, news section or page you would like to share. Upload your preferred share icon as an svg file to Webflow's image gallery. Once uploaded copy the icon's individual URL to your clip board and save it somewhere for later use.
2. Navigate to the page you want your share button to appear on. This could be your blog post template or a static page in your Webflow project.
3. Create a div and insert an HTML embed element where the icon needs to appear. Into the code editor copy the following code:

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//yoursite.webflow.io/post/SLUG" target="_blank" class="share-icon-wrap w-inline-block"><img loading="lazy" width="8" src="youricon.svg" alt="" class="social-media-icons"></a>

4. Now you just have to change a couple of things inside to code to make this work... Use your own site's URL where it says "yoursite.webflow.io/". For a static page this could be "yoursite.webflow.io/contact". If you are looking at sharing a blog post or another page, driven by the CMS, grab the slug used for the blog post e.g. "yoursite.webflow.io/post/SLUG". The word SLUG actually needs to be replaced by a dynamic field which you can place inside the HTML embed via the  "Add field" button at the top right hand corner. Next replace the "youricon.svg" with the exact URL you copied for your uploaded social media icon earlier.
5. That's it. Don't forget to add an appropriate open graph image to the page you want to share. If you want to share a blog post, add the open graph image to the page settings of  your post template.

‍

Twitter Share Link

This works exactly the same way as the Facebook share link, but you need to use the code below instead:

<a href="https://twitter.com/intent/tweet?text=https%3A//community-website-production-site.webflow.io/post/SLUG" target="_blank" class="share-icon-wrap w-inline-block"><img loading="lazy" width="15" src="youricon.svg" alt="" class="social-media-icons"></a>

‍

Email Share Link

Want your user to be able to share one of your pages via email? You can do so, using the code below:

<a class="w-inline-block social-share-btn social-media-icons email" href="mailto:?subject=&body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent('https://yoursite.webflow.io/post/SLUG')); return false;"><img loading="lazy" width="15" src="youricon.svg" alt="" class="social-media-icons"></a>

Note: by changing the width value inside the code, you can influence the size of your icon. Also, with this method you can share pages that your share button is not located on. For instance if you have an overview of blog posts, you can share a particular post directly from the blog index page. Nice!

Any questions? Contact me here.

Still looking for a great alternative to PayPal for accepting client payments? Check out TransferWise – a tool I use for any non-Aussie clients. You can read more about it in a previous blog article or try out TransferWise here (yep, this is an affiliate link).