Buttons - Webflow Share

Now go ahead — build them once and use them everywhere. Duplicate this Webflow read-only template (replace with your own sharable link). Happy sharing! — Your Webflow Dev Team ✅ What’s Included in This Post: | Feature | Status | | --- | --- | | Twitter, FB, LinkedIn, Pinterest, WhatsApp, Email, Copy link | ✅ | | Clean CSS styling with hover effects | ✅ | | Works with Webflow CMS dynamically | ✅ | | No external dependencies | ✅ | | Copy-to-clipboard with alert feedback | ✅ | | Ready to copy-paste into Webflow | ✅ |

;

Some browsers block navigator.clipboard without HTTPS. Make sure your site is on HTTPS (Webflow provides this automatically). webflow share buttons

twitter: () => gtag('event', 'share', platform: 'twitter' ); window.open(`https://twitter.com/intent/tweet?...`);

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. Now go ahead — build them once and use them everywhere

<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!');

Add analytics events inside the shareHandlers object: — Your Webflow Dev Team ✅ What’s Included

// 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 ; );