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...
<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>
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>
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? Get in touch with me!