Social Share Buttons - Modern, Lightweight Social Sharing Library

0

Installation

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>

1

Basic Usage

Default platforms are X, Facebook and WhatsApp.

new SocialShareButtons({
  container: '#demo1',
  platforms: ['x', 'facebook', 'whatsapp'] // Default platforms
});

2

All Available 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'
  ]
});

3

Custom Labels

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

4

Dark Theme

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

5

Custom Styling with CSS

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%);
}

6

Native Share API (Mobile)

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}`);
  }
});

Note: By default, 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.

7

Adding Custom SVG Icons

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>`;
});