Social Share Buttons

Modern, lightweight social sharing library with zero dependencies.

Features

• Zero Dependencies - No jQuery, React, or other framework requirements
• Various Platforms - X, Bluesky, Threads, Mastodon, and more
• Lightweight - ~3.5KB minified and tree-shakeable
• Fully Typed - Complete TypeScript support
• Accessible - ARIA labels, keyboard navigation, semantic HTML
• Customizable - Light/dark themes, and CSS styling with variables

Installation

npm

npm install social-share-buttons

For a given HTML:

<div id="share-buttons"></div>

Import the library and styles:

// JavaScript file
import SocialShareButtons from 'social-share-buttons';
new SocialShareButtons({ container: '#share-buttons' });

// CSS file
import 'social-share-buttons/styles';

CDN

<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>

Supported Platforms

| Platform | Key | |-------------------|-------------| | X (Twitter) | x | | Bluesky | bluesky | | Threads | threads | | Mastodon | mastodon | | Facebook | facebook | | LinkedIn | linkedin | | Reddit | reddit | | Telegram | telegram | | WhatsApp | whatsapp | | Email | email | | Pinterest | pinterest | | Copy to Clipboard | copy |

Popup behavior: By default, all share links open in a popup window (550×420). You can disable popups globally with popup: false to open links in new tabs instead, or customize popup dimensions with popupWidth and popupHeight options.

Usage Examples

All Platforms

new SocialShareButtons({
  container: '#share-buttons',
  platforms: [
    'x', 'bluesky', 'threads', 'mastodon',
    'facebook', 'linkedin', 'reddit', 'telegram',
    'whatsapp', 'email', 'pinterest', 'copy'
  ]
});

Custom Share Data

new SocialShareButtons({
  container: '#share-buttons',
  platforms: ['x', 'facebook', 'linkedin']
});

// Share with custom data
const shareButton = document.querySelector('#custom-share');
shareButton.addEventListener('click', async () => {
  const instance = new SocialShareButtons();
  await instance.share('x', {
    url: 'https://example.com',
    title: 'Check this out!',
    text: 'Amazing content',
    hashtags: ['webdev', 'javascript']
  });
});

Custom Labels

new SocialShareButtons({
  container: '#share-buttons',
  platforms: ['x', 'facebook', 'linkedin', 'copy'],
  labels: {
    x: '𝕏 Post',
    facebook: 'Share on FB',
    linkedin: 'Post to LinkedIn',
    copy: '📋 Copy Link'
  }
});

Themes

new SocialShareButtons({
  container: '#share-buttons',
  platforms: ['x', 'facebook', 'linkedin'],
  theme: 'dark' // 'light' (default), 'dark', or 'auto' (uses system preference)
});

Disable Popups

Open all share links in new tabs instead of popup windows:

new SocialShareButtons({
  container: '#share-buttons',
  platforms: ['x', 'facebook', 'linkedin'],
  popup: false // Disable popups, open in new tabs instead
});

Native Share API (Mobile)

Enable native share sheet on supported devices.

new SocialShareButtons({
  container: '#share-buttons',
  nativeShare: true, // Enable native share sheet instead of platform URLs
  platforms: ['x', 'facebook', 'copy'],
  onShare: (platform, success) => {
    console.log(`Shared via ${platform}: ${success}`);
  }
});

Note: When enabled, clicking any platform button will trigger the device's native share dialog instead of opening the platform-specific URL.

When to use:

• Use nativeShare: true for a generic "share this page" widget
• Better UX on mobile (users can choose their preferred app)
• Don't use if you want direct platform-specific sharing (e.g., "Tweet this")

Default behavior (nativeShare: false): Each button opens the specific platform's share URL.

Copy Button Feedback

Customize the "Copied!" feedback text and duration. You can include SVG icons directly in the text:

new SocialShareButtons({
  container: '#share-buttons',
  platforms: ['copy'],
  labels: {
    copy: 'Copy Link',
    copied: '<svg>...</svg> Link Copied!' // Custom feedback with icon
  },
  copiedDuration: 3000                    // Duration in milliseconds (default: 2000)
});

Default behavior (no customization needed):

new SocialShareButtons({
  container: '#share-buttons',
  platforms: ['copy']
});
// Shows "Copied!" for 2 seconds automatically

Custom Styling

new SocialShareButtons({
  container: '#share-buttons',
  className: 'my-custom-theme'
});

Then customize the appearance with your own CSS:

.my-custom-theme .social-share-button {
  border-radius: 2rem;
  background: linear-gradient(135deg, #666eee 0%, #777bbb 100%);
  box-shadow: 0 4px 15px rgba(93, 72, 216, 0.33);
}

.my-custom-theme .social-share-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(93, 72, 216, 0.66);
}

Custom Platform

new SocialShareButtons({
  container: '#share-buttons',
  platforms: ['x', 'mycustom'],
  customPlatforms: [{
    name: 'mycustom',
    label: 'My Platform',
    getShareUrl: (data) => {
      return `https://myplatform.com/share?url=${encodeURIComponent(data.url)}`;
    },
    color: '#ff6b6b'
  }]
});

Update Options Dynamically

const share = new SocialShareButtons({
  container: '#share-buttons',
  theme: 'light'
});

// Later, update the theme
share.updateOptions({ theme: 'dark' });

// Clean up when done
share.destroy();

Configuration Options

| Option | Type | Default | Description | |-------------------|--------------------------------------------|---------------------------------|------------------------------------------------------------------------------------------------------| | container | HTMLElement \| string | document.body | Container element or selector where buttons will be rendered | | platforms | PlatformName[] | ['x', 'facebook', 'whatsapp'] | Array of platform keys to display | | theme | 'light' \| 'dark' \| 'auto' | 'light' | Color theme: 'light', 'dark', or 'auto' (automatically uses user's system theme preference) | | nativeShare | boolean | false | Use native share sheet instead of platform-specific URLs (mobile only) | | popup | boolean | true | Open share links in popup windows (true) or new tabs (false) | | popupWidth | number | 550 | Popup width in pixels | | popupHeight | number | 420 | Popup height in pixels | | labels | Record<PlatformName \| 'copied', string> | undefined | Custom labels for platform buttons and copy feedback (e.g., { copy: 'Copy', copied: '✓ Copied!' }) | | customPlatforms | CustomPlatform[] | undefined | Add your own custom sharing platforms | | onShare | (platform, success) => void | undefined | Callback fired when share action completes | | className | string | undefined | Additional CSS class for custom styling | | ariaLabel | string | 'Social sharing buttons' | ARIA label for the widget container | | copiedDuration | number | 2000 | Duration (in milliseconds) to show copy feedback |

Styling & Theming

The library includes minimal, beautiful default styles. Each button has a data-platform attribute for custom styling:

/* Target specific platforms */
.social-share-button[data-platform="x"] {
  /* Custom styles for X button */
}

/* Use CSS custom properties */
:root {
  --social-share-buttons-bg: #ffffff;
  --social-share-buttons-text: #1a1a1a;
  --social-share-buttons-border: #e0e0e0;
  --social-share-buttons-shadow: rgba(0, 0, 0, 0.1);
  --social-share-buttons-hover: rgba(0, 0, 0, 0.05);
  --social-share-buttons-radius: 0.5rem;
  --social-share-buttons-transition: 0.2s ease;
}

Each platform button automatically sets a --social-share-buttons-color CSS variable based on the platform's brand color.

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers with Web Share API support

The library uses modern JavaScript features (ES2020) and gracefully degrades when features aren't available.

API Reference

Methods

share(platform, data?)

Programmatically trigger a share action.

await share.share('x', {
  url: 'https://example.com',
  title: 'My Title',
  text: 'My description',
  hashtags: ['example']
});

Parameters:

• platform (PlatformName): The platform to share on
• data (ShareData, optional): Custom share data

Returns: Promise<boolean> - True if share was successful

shareNative(data?)

Trigger native share sheet (mobile only).

await share.shareNative({
  url: 'https://example.com',
  title: 'My Title'
});

Parameters:

• data (ShareData, optional): Custom share data

Returns: Promise<boolean> - True if share was successful

updateOptions(options)

Update widget options dynamically.

share.updateOptions({
  theme: 'dark',
  platforms: ['x', 'facebook']
});

Parameters:

• options (Partial): Options to update

destroy()

Remove the widget from the DOM and clean up event listeners.

share.destroy();

Types

ShareData

interface ShareData {
  url?: string;           // URL to share
  title?: string;         // Title/headline
  text?: string;          // Description text
  description?: string;   // Alternative description
  hashtags?: string[];    // Hashtags (without #)
  via?: string;           // Twitter via attribution
  media?: string;         // Image URL (Pinterest)
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Burak Özdemir

Support

• Report Issues
• Request Features

Note: This library does not include social media icons due to trademark and branding guidelines. You can add your own icons using libraries like Lucide, Simple Icons, or custom SVGs.