Modern, lightweight social sharing library with zero dependencies
Choose your preferred installation method: npm or CDN.
npm install social-share-buttons
Import the styles and initialize the library:
// JavaScript file import SocialShareButtons from 'social-share-buttons'; new SocialShareButtons({ container: '#share-buttons' }); // CSS file @import "social-share-buttons/styles";
<link href="https://cdn.jsdelivr.net/npm/social-share-buttons/dist/social-share-buttons.css" rel="stylesheet"> <script type="module"> import SocialShareButtons from 'https://cdn.jsdelivr.net/npm/social-share-buttons/+esm'; new SocialShareButtons({ container: '#share-buttons' }); </script>
Default platforms are X, Facebook and WhatsApp.
new SocialShareButtons({ container: '#demo1', platforms: ['x', 'facebook', 'whatsapp'] // Default platforms });
Choose from various platforms like Bluesky, Threads, and Pinterest.
new SocialShareButtons({ container: '#demo2', platforms: [ 'x', 'bluesky', 'threads', 'mastodon', 'facebook', 'linkedin', 'reddit', 'telegram', 'whatsapp', 'email', 'pinterest', 'copy' ] });
You can change default platform labels with whatever text you want.
new SocialShareButtons({ container: '#demo3', platforms: ['x', 'facebook', 'linkedin', 'copy'], labels: { x: '𝕏 Post', facebook: 'Share on FB', linkedin: 'Post to LinkedIn', copy: '📋 Copy', copied: '✅ Copied!' }, });
You can set dark theme as the default, which changes the background and text colors accordingly.
new SocialShareButtons({ container: '#demo4', platforms: ['x', 'facebook', 'linkedin', 'reddit'], theme: 'dark' // Options: 'light', 'dark', 'auto' });
You can customize appearance using CSS variables or classes.
new SocialShareButtons({ container: '#demo5', platforms: ['x', 'bluesky', 'threads', 'facebook'], className: 'custom-theme' }); /* CSS */ .custom-theme .social-share-button { border-radius: 2rem; background: linear-gradient(135deg, #666eee 0%, #777bbb 100%); }
You can enable native share sheet instead of platform-specific URLs.
new SocialShareButtons({ container: '#demo6', nativeShare: true, // Override platform URLs with native share platforms: ['x', 'facebook', 'copy'], onShare: (platform, success) => { console.log(`Shared on ${platform}: ${success}`); } });
nativeShare
is false
. Each button opens the specific platform's share URL. Use true
for a generic "share this page" widget where users choose their app.Social Share Buttons does not include icons, but you can use icon libraries like Simple Icons, and Lucide.
new SocialShareButtons({ container: '#demo7', platforms: ['email', 'copy'] }); // Define your icon map (use any SVG icon library) const icons = { email: '<svg>...</svg>', copy: '<svg>...</svg>' }; // Add icons after initialization document.querySelectorAll('#demo7 .social-share-button').forEach(btn => { const platform = btn.getAttribute('data-platform'); const icon = icons[platform] || ''; btn.innerHTML = `${icon}<span>${btn.textContent}</span>`; });