Adding Share Buttons to your blog in Webflow

Adam @ Bespokists
January 9, 2025

Having the ability to share your blogs on your site can help boost engagement, but it should be noted, not by much. Typically less than 1% of users ever even use these features, so it should not be a priority that takes away from the rest of your page to do.

However, it can be helpful to have a way for visitors to quickly copy a link or share it with ease.

First of all, add your buttons to your page with the text or icons you need.

Next, add ID's to each button so we can identify which platform it is.

I am using ID's such as

shareCopyLink - Copy and paste the link directly

shareFacebook - Share to Facebook, etc

Next - we add in some custom code to the page.

Below is an example containing a Copy button, LinkedIn, X, Facebook and WhatsApp.

// Get the current page URL and Title
const pageUrl = encodeURIComponent(window.location.href);
const pageTitle = encodeURIComponent(document.title);

//  Copy Link Button
document.getElementById('shareCopyLink').addEventListener('click', () => {
    navigator.clipboard.writeText(window.location.href).then(() => {
        alert('Link copied to clipboard!');
    }).catch(err => {
        console.error('Failed to copy: ', err);
    });
});

// LinkedIn Share
document.getElementById('shareLinkedIn').href = 
    `https://www.linkedin.com/shareArticle?mini=true&url=${pageUrl}&title=${pageTitle}`;
    
// X (Twitter) Share
document.getElementById('shareX').href = 
    `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;

//  Facebook Share
document.getElementById('shareFacebook').href = 
    `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;

//  WhatsApp Share
document.getElementById('shareWhatsApp').href = 
    `https://api.whatsapp.com/send?text=${pageTitle}%20${pageUrl}`;

Use what you need from this code and test it works - your should be able to, in a single tap, open up the relevant page and see a share window containing the post title and link.

Remember, these features are very rarely used, but a small engagement boost not previously tapped into could help increase your online presence.