🚀 Share Button v2

The social share widget, reborn for 2026 ✨

Fast 💨   Lightweight 🪶   Beautiful 🎨   Zero Dependencies 📦

---

🤔 What Is This?

A drop-in social sharing widget that just works. No iframes. No third-party scripts. No bloat. Just a clean, beautiful share button that opens a panel of social networks.

One line of code. That's it. 👇

new ShareButton('#share');

🙏 Standing on the Shoulders of Giants

This project is a full rewrite of the legendary share-button originally built by the incredible team at Carrot Creative 🥕

The original was ahead of its time — fast, lightweight, and beautifully designed when every other share widget was loading megabytes of third-party garbage onto your page. Jeff Escalante, Tom Milewski, Henry Snopek, Patrick Bacon-Blaber, and the whole Carrot crew absolutely nailed it. 💯

But the web has changed a lot since then. Google+ is gone ☠️, Twitter became X 🔄, new platforms like Bluesky and Threads have emerged 🌱, and build tools have evolved from Gulp + Browserify to modern bundlers like Vite ⚡

So we gave it a fresh coat of paint for 2026. Same spirit, new everything. Thank you Carrot — we couldn't have done this without your original vision! 🥕❤️

✨ Features

Feature	Details
🌐 12 Social Networks	Facebook, X, LinkedIn, Pinterest, Reddit, WhatsApp, Telegram, Mastodon, Bluesky, Threads, Email, Copy Link
📱 Web Share API	Uses native share sheet on supported devices automatically
🎨 Themeable	CSS custom properties — customize everything
🎭 3 Built-in Themes	default, dark, minimal
📦 Zero Dependencies	Vanilla JS + CSS. That's it.
⚡ Tiny Bundle	~14KB JS + ~3KB CSS (uncompressed)
🔧 ESM + UMD	Works everywhere — import, require, or script tag
♿ Accessible	ARIA labels on all buttons
🧪 Fully Tested	42 tests with Vitest

📥 Installation

npm install share-button

Or just grab the files from dist/ and drop them in your project! 🎯

🚀 Quick Start

ESM (recommended) ✅

import ShareButton from 'share-button';
import 'share-button/dist/share-button.css';

new ShareButton('#share-button');

UMD (script tag) 📜

<link rel="stylesheet" href="dist/share-button.css">
<script src="dist/share-button.umd.js"></script>
<script>
  new ShareButton('#share-button');
</script>

HTML 🏗️

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

That's literally it! 🎉

⚙️ Options

new ShareButton('#share-button', {
  url: 'https://example.com',        // 🔗 URL to share (default: current page)
  title: 'Check this out',           // 📝 Share title (default: og:title or page title)
  description: 'A great article',    // 📄 Share description (default: meta description)
  image: 'https://example.com/img',  // 🖼️ Image URL for Pinterest
  networks: ['facebook', 'x', 'linkedin', 'reddit', 'email'],  // 📡 Networks to show
  buttonText: 'Share',               // 🏷️ Button label
  flyout: 'top',                     // 📍 Panel position: 'top', 'bottom', 'left', 'right'
  theme: 'default',                  // 🎨 Theme: 'default', 'dark', 'minimal'
  useWebShareApi: true,              // 📱 Use native share on supported devices
});

🌐 Supported Networks

Network	Key	Color
📘 Facebook	facebook
✖️ X (Twitter)	x
💼 LinkedIn	linkedin
📌 Pinterest	pinterest
🤖 Reddit	reddit
💬 WhatsApp	whatsapp
✈️ Telegram	telegram
🐘 Mastodon	mastodon
🦋 Bluesky	bluesky
🧵 Threads	threads
📧 Email	email
📋 Copy Link	copy

🎮 API

const share = new ShareButton('#el');

share.open();     // 📖 Open the share panel
share.close();    // 📕 Close the share panel
share.toggle();   // 🔄 Toggle the share panel
share.destroy();  // 💥 Remove from DOM and clean up
share.config;     // ⚙️ Access current configuration

🎨 Theming

Make it yours with CSS custom properties:

:root {
  --sb-button-bg: #333;           /* 🎨 Button background */
  --sb-button-color: #fff;        /* ✏️ Button text color */
  --sb-button-radius: 8px;        /* 🔘 Button border radius */
  --sb-icon-size: 48px;           /* 📐 Network icon size */
  --sb-flyout-radius: 12px;       /* 🔲 Panel border radius */
  --sb-flyout-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);  /* 🌑 Panel shadow */
}

🎭 Built-in Themes

• default — Clean and professional 👔
• dark — Sleek dark panel background 🌙
• minimal — Transparent, blends with your design 🪟

🛠️ Development

npm install        # 📦 Install dependencies
npm run dev        # 🚀 Start dev server
npm test           # 🧪 Run tests (42 tests!)
npm run build      # 🏗️ Production build

📊 What Changed from v1

	v1 (Carrot) 🥕	v2 (2026) 🚀
Build	Gulp + Browserify	Vite ⚡
CSS	Stylus	Plain CSS with custom properties
Tests	Pioneer + PhantomJS 👻	Vitest + jsdom 🧪
Networks	8 (inc. Google+ ☠️)	12 (inc. Bluesky, Threads, Mastodon 🌱)
Twitter	🐦 twitter.com	✖️ x.com
Native Share	❌	✅ Web Share API
Theming	Limited CSS	Full CSS custom properties 🎨
Bundle	Browserify UMD	ESM + UMD 📦

📄 License

MIT — do whatever you want with it! 🎉

💖 Credits

Built with love on top of the original share-button by Carrot Creative 🥕

"Simple, light, flexible, and good-looking" — the original tagline that still holds true. We just made it shinier. ✨