Webflow Share Buttons -
// Attach events after DOM loads document.addEventListener('DOMContentLoaded', () => document.querySelectorAll('[data-share]').forEach(button => const platform = button.getAttribute('data-share'); if (shareHandlers[platform]) button.addEventListener('click', (e) => e.preventDefault(); shareHandlers platform ; );
;
Add analytics events inside the shareHandlers object: webflow share buttons
Some browsers block navigator.clipboard without HTTPS. Make sure your site is on HTTPS (Webflow provides this automatically).
<script> // Get current page URL, title, and description const pageUrl = encodeURIComponent(window.location.href); const pageTitle = encodeURIComponent(document.title); const pageDescription = encodeURIComponent( document.querySelector('meta[name="description"]')?.getAttribute('content') || '' ); // Share handlers const shareHandlers = twitter: () => window.open( https://twitter.com/intent/tweet?text=$pageTitle&url=$pageUrl , '_blank'), facebook: () => window.open( https://www.facebook.com/sharer/sharer.php?u=$pageUrl , '_blank'), linkedin: () => window.open( https://www.linkedin.com/shareArticle?mini=true&url=$pageUrl&title=$pageTitle&summary=$pageDescription , '_blank'), pinterest: () => window.open( https://pinterest.com/pin/create/button/?url=$pageUrl&description=$pageTitle , '_blank'), whatsapp: () => window.open( https://api.whatsapp.com/send?text=$pageTitle $pageUrl , '_blank'), email: () => window.location.href = mailto:?subject=$pageTitle&body=$pageDescription%0A%0A$pageUrl , copy: () => navigator.clipboard.writeText(window.location.href); alert('Link copied to clipboard!'); // Attach events after DOM loads document
twitter: () => gtag('event', 'share', platform: 'twitter' ); window.open(`https://twitter.com/intent/tweet?...`);
Custom share buttons in Webflow are clean, privacy-friendly, and fully brandable. You’re not forced to use heavy plugins or third-party iframes. With 10 minutes of setup, you can add them to any blog post, product page, or resource. You’re not forced to use heavy plugins or
Social share buttons are essential for driving traffic and engagement. While Webflow doesn’t have a native “share” element, you can easily build custom share buttons that look great, load fast, and respect user privacy.