{"_id":"social-share-buttons","_rev":"5-5ad77ca71f0f95f45cc45fd2415fec60","name":"social-share-buttons","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"social-share-buttons","version":"0.1.0","keywords":["share","share-buttons","social-share","social-share-buttons","social-media","social-media-share-buttons","web-share"],"author":{"url":"https://ozdemirburak.com","name":"Burak Özdemir"},"license":"MIT","_id":"social-share-buttons@0.1.0","maintainers":[{"name":"ozdemirburak","email":"burakozdemir@protonmail.ch"}],"homepage":"https://github.com/ozdemirburak/social-share-buttons#readme","bugs":{"url":"https://github.com/ozdemirburak/social-share-buttons/issues"},"dist":{"shasum":"c7cd3e07bb9cee95538f5b34e2e658e30aac855a","tarball":"https://registry.npmjs.org/social-share-buttons/-/social-share-buttons-0.1.0.tgz","fileCount":15,"integrity":"sha512-bUFBGX5tq33IWf0808DRAKnPesYVVOifUkXvTzI3WJiwcK3oCq/h10Yiwbn0VtzRXk9B6gMh4EihgiDchXg9bA==","signatures":[{"sig":"MEYCIQDgZNS2BolZeDTPyDZReOYLYLgwMf17UGBmIYBRQkW60wIhAKEKTKC8KTLuC0Nz7+HYSgSNoCSOony3OdOQBMO1ozrn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":123951},"main":"./dist/social-share-buttons.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/social-share-buttons.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/social-share-buttons.js","require":"./dist/social-share-buttons.umd.js"},"./styles":"./dist/social-share-buttons.css","./package.json":"./package.json"},"gitHead":"134f2636e099abb0c88a19baacab2f5c94361b6d","scripts":{"dev":"vite","build":"tsc && vite build && npm run copy:demo","copy:demo":"rm -rf demo/dist && cp -r dist demo/dist"},"_npmUser":{"name":"ozdemirburak","email":"burakozdemir@protonmail.ch"},"repository":{"url":"git+https://github.com/ozdemirburak/social-share-buttons.git","type":"git"},"_npmVersion":"10.9.3","description":"Modern, lightweight social sharing library with zero dependencies.","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.10","typescript":"^5.9.3"},"_npmOperationalInternal":{"tmp":"tmp/social-share-buttons_0.1.0_1760700890969_0.5611440312257421","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"social-share-buttons","version":"0.1.1","description":"Modern, lightweight social sharing library with zero dependencies.","type":"module","main":"./dist/social-share-buttons.umd.js","module":"./dist/social-share-buttons.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/social-share-buttons.js","require":"./dist/social-share-buttons.umd.js"},"./styles":"./dist/social-share-buttons.css","./package.json":"./package.json"},"scripts":{"dev":"vite","build":"tsc && vite build && npm run copy:demo","copy:demo":"rm -rf demo/dist && cp -r dist demo/dist"},"repository":{"type":"git","url":"git+https://github.com/ozdemirburak/social-share-buttons.git"},"devDependencies":{"typescript":"^5.9.3","vite":"^7.1.10"},"keywords":["share","share-buttons","social-share","social-share-buttons","social-media","social-media-share-buttons","web-share"],"author":{"name":"Burak Özdemir","url":"https://ozdemirburak.com"},"license":"MIT","bugs":{"url":"https://github.com/ozdemirburak/social-share-buttons/issues"},"homepage":"https://socialsharebuttons.net","_id":"social-share-buttons@0.1.1","gitHead":"c8aaa3ae9d5e5ebb9961bb39a41c6d89208c030d","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-lcqFpqDTfQ9DYrrE3e6V3pl6EF/0s0UwgCCyY+XJmOlQkrHJu4dB9Qp6XmKmxVrI0q/skoRHDL4XvJHnLMi0pA==","shasum":"53facb081a9502a5e2235aa161145bbc709fce87","tarball":"https://registry.npmjs.org/social-share-buttons/-/social-share-buttons-0.1.1.tgz","fileCount":15,"unpackedSize":124128,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHyJmdeITa/6dMB9L9JspaxeQuuZ+o59WSibwKSfACBfAiBA3fq84dzIHn8HoCaHWw0xC9qb76YI8xaAjNz8XEV0PQ=="}]},"_npmUser":{"name":"ozdemirburak","email":"burakozdemir@protonmail.ch"},"directories":{},"maintainers":[{"name":"ozdemirburak","email":"burakozdemir@protonmail.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/social-share-buttons_0.1.1_1760889958536_0.1615903513753536"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-17T11:34:50.969Z","modified":"2025-10-19T16:05:58.941Z","1.0.0":"2017-05-30T20:18:03.627Z","0.1.0":"2025-10-17T11:34:51.162Z","0.1.1":"2025-10-19T16:05:58.742Z"},"bugs":{"url":"https://github.com/ozdemirburak/social-share-buttons/issues"},"author":{"name":"Burak Özdemir","url":"https://ozdemirburak.com"},"license":"MIT","homepage":"https://socialsharebuttons.net","keywords":["share","share-buttons","social-share","social-share-buttons","social-media","social-media-share-buttons","web-share"],"repository":{"type":"git","url":"git+https://github.com/ozdemirburak/social-share-buttons.git"},"description":"Modern, lightweight social sharing library with zero dependencies.","maintainers":[{"name":"ozdemirburak","email":"burakozdemir@protonmail.ch"}],"readme":"# [Social Share Buttons](https://socialsharebuttons.net)\n\nModern, lightweight social sharing library with zero dependencies.\n\n[![npm version](https://img.shields.io/npm/v/social-share-buttons.svg)](https://www.npmjs.com/package/social-share-buttons)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE.md)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/social-share-buttons)](https://bundlephobia.com/package/social-share-buttons)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n\n## Features\n\n- **Zero Dependencies** - No jQuery, React, or other framework requirements\n- **Various Platforms** - X, Bluesky, Threads, Mastodon, and more\n- **Lightweight** - ~3.5KB minified and tree-shakeable\n- **Fully Typed** - Complete TypeScript support\n- **Accessible** - ARIA labels, keyboard navigation, semantic HTML\n- **Customizable** - Light/dark themes, and CSS styling with variables\n\n## Installation\n\n### npm\n\n```bash\nnpm install social-share-buttons\n```\n\nFor a given HTML:\n\n```html\n<div id=\"share-buttons\"></div>\n```\n\nImport the library and styles:\n\n```javascript\n// JavaScript file\nimport SocialShareButtons from 'social-share-buttons';\nnew SocialShareButtons({ container: '#share-buttons' });\n\n// CSS file\nimport 'social-share-buttons/styles';\n```\n\n### CDN\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/social-share-buttons/dist/social-share-buttons.css\" rel=\"stylesheet\">\n<script type=\"module\">\n  import SocialShareButtons from 'https://cdn.jsdelivr.net/npm/social-share-buttons/+esm';\n  new SocialShareButtons({ container: '#share-buttons' });\n</script>\n```\n\n## Supported Platforms\n\n| Platform          | Key         |\n|-------------------|-------------|\n| X (Twitter)       | `x`         |\n| Bluesky           | `bluesky`   |\n| Threads           | `threads`   |\n| Mastodon          | `mastodon`  |\n| Facebook          | `facebook`  |\n| LinkedIn          | `linkedin`  |\n| Reddit            | `reddit`    |\n| Telegram          | `telegram`  |\n| WhatsApp          | `whatsapp`  |\n| Email             | `email`     |\n| Pinterest         | `pinterest` |\n| Copy to Clipboard | `copy`      |\n\n**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.\n\n## Usage Examples\n\n### All Platforms\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  platforms: [\n    'x', 'bluesky', 'threads', 'mastodon',\n    'facebook', 'linkedin', 'reddit', 'telegram',\n    'whatsapp', 'email', 'pinterest', 'copy'\n  ]\n});\n```\n\n### Custom Share Data\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  platforms: ['x', 'facebook', 'linkedin']\n});\n\n// Share with custom data\nconst shareButton = document.querySelector('#custom-share');\nshareButton.addEventListener('click', async () => {\n  const instance = new SocialShareButtons();\n  await instance.share('x', {\n    url: 'https://example.com',\n    title: 'Check this out!',\n    text: 'Amazing content',\n    hashtags: ['webdev', 'javascript']\n  });\n});\n```\n\n### Custom Labels\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  platforms: ['x', 'facebook', 'linkedin', 'copy'],\n  labels: {\n    x: '𝕏 Post',\n    facebook: 'Share on FB',\n    linkedin: 'Post to LinkedIn',\n    copy: '📋 Copy Link'\n  }\n});\n```\n\n### Themes\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  platforms: ['x', 'facebook', 'linkedin'],\n  theme: 'dark' // 'light' (default), 'dark', or 'auto' (uses system preference)\n});\n```\n\n### Disable Popups\n\nOpen all share links in new tabs instead of popup windows:\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  platforms: ['x', 'facebook', 'linkedin'],\n  popup: false // Disable popups, open in new tabs instead\n});\n```\n\n### Native Share API (Mobile)\n\nEnable native share sheet on supported devices.\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  nativeShare: true, // Enable native share sheet instead of platform URLs\n  platforms: ['x', 'facebook', 'copy'],\n  onShare: (platform, success) => {\n    console.log(`Shared via ${platform}: ${success}`);\n  }\n});\n```\n\n**Note:** When enabled, clicking any platform button will trigger the device's native share dialog instead of opening the platform-specific URL.\n\n**When to use:**\n- Use `nativeShare: true` for a generic \"share this page\" widget\n- Better UX on mobile (users can choose their preferred app)\n- Don't use if you want direct platform-specific sharing (e.g., \"Tweet this\")\n\n**Default behavior** (`nativeShare: false`): Each button opens the specific platform's share URL.\n\n### Copy Button Feedback\n\nCustomize the \"Copied!\" feedback text and duration. You can include SVG icons directly in the text:\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  platforms: ['copy'],\n  labels: {\n    copy: 'Copy Link',\n    copied: '<svg>...</svg> Link Copied!' // Custom feedback with icon\n  },\n  copiedDuration: 3000                    // Duration in milliseconds (default: 2000)\n});\n```\n\n**Default behavior** (no customization needed):\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  platforms: ['copy']\n});\n// Shows \"Copied!\" for 2 seconds automatically\n```\n\n### Custom Styling\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  className: 'my-custom-theme'\n});\n```\n\nThen customize the appearance with your own CSS:\n\n```css\n.my-custom-theme .social-share-button {\n  border-radius: 2rem;\n  background: linear-gradient(135deg, #666eee 0%, #777bbb 100%);\n  box-shadow: 0 4px 15px rgba(93, 72, 216, 0.33);\n}\n\n.my-custom-theme .social-share-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(93, 72, 216, 0.66);\n}\n```\n\n### Custom Platform\n\n```javascript\nnew SocialShareButtons({\n  container: '#share-buttons',\n  platforms: ['x', 'mycustom'],\n  customPlatforms: [{\n    name: 'mycustom',\n    label: 'My Platform',\n    getShareUrl: (data) => {\n      return `https://myplatform.com/share?url=${encodeURIComponent(data.url)}`;\n    },\n    color: '#ff6b6b'\n  }]\n});\n```\n\n### Update Options Dynamically\n\n```javascript\nconst share = new SocialShareButtons({\n  container: '#share-buttons',\n  theme: 'light'\n});\n\n// Later, update the theme\nshare.updateOptions({ theme: 'dark' });\n\n// Clean up when done\nshare.destroy();\n```\n\n## Configuration Options\n\n| Option            | Type                                       | Default                         | Description                                                                                          |\n|-------------------|--------------------------------------------|---------------------------------|------------------------------------------------------------------------------------------------------|\n| `container`       | `HTMLElement \\| string`                    | `document.body`                 | Container element or selector where buttons will be rendered                                         |\n| `platforms`       | `PlatformName[]`                           | `['x', 'facebook', 'whatsapp']` | Array of platform keys to display                                                                    |\n| `theme`           | `'light' \\| 'dark' \\| 'auto'`              | `'light'`                       | Color theme: 'light', 'dark', or 'auto' (automatically uses user's system theme preference)          |\n| `nativeShare`     | `boolean`                                  | `false`                         | Use native share sheet instead of platform-specific URLs (mobile only)                               |\n| `popup`           | `boolean`                                  | `true`                          | Open share links in popup windows (true) or new tabs (false)                                         |\n| `popupWidth`      | `number`                                   | `550`                           | Popup width in pixels                                                                                |\n| `popupHeight`     | `number`                                   | `420`                           | Popup height in pixels                                                                               |\n| `labels`          | `Record<PlatformName \\| 'copied', string>` | `undefined`                     | Custom labels for platform buttons and copy feedback (e.g., `{ copy: 'Copy', copied: '✓ Copied!' }`) |\n| `customPlatforms` | `CustomPlatform[]`                         | `undefined`                     | Add your own custom sharing platforms                                                                |\n| `onShare`         | `(platform, success) => void`              | `undefined`                     | Callback fired when share action completes                                                           |\n| `className`       | `string`                                   | `undefined`                     | Additional CSS class for custom styling                                                              |\n| `ariaLabel`       | `string`                                   | `'Social sharing buttons'`      | ARIA label for the widget container                                                                  |\n| `copiedDuration`  | `number`                                   | `2000`                          | Duration (in milliseconds) to show copy feedback                                                     |\n\n## Styling & Theming\n\nThe library includes minimal, beautiful default styles. Each button has a `data-platform` attribute for custom styling:\n\n```css\n/* Target specific platforms */\n.social-share-button[data-platform=\"x\"] {\n  /* Custom styles for X button */\n}\n\n/* Use CSS custom properties */\n:root {\n  --social-share-buttons-bg: #ffffff;\n  --social-share-buttons-text: #1a1a1a;\n  --social-share-buttons-border: #e0e0e0;\n  --social-share-buttons-shadow: rgba(0, 0, 0, 0.1);\n  --social-share-buttons-hover: rgba(0, 0, 0, 0.05);\n  --social-share-buttons-radius: 0.5rem;\n  --social-share-buttons-transition: 0.2s ease;\n}\n```\n\nEach platform button automatically sets a `--social-share-buttons-color` CSS variable based on the platform's brand color.\n\n## Browser Support\n\n- Chrome/Edge 90+\n- Firefox 88+\n- Safari 14+\n- Mobile browsers with Web Share API support\n\nThe library uses modern JavaScript features (ES2020) and gracefully degrades when features aren't available.\n\n## API Reference\n\n### Methods\n\n#### `share(platform, data?)`\nProgrammatically trigger a share action.\n\n```javascript\nawait share.share('x', {\n  url: 'https://example.com',\n  title: 'My Title',\n  text: 'My description',\n  hashtags: ['example']\n});\n```\n\n**Parameters:**\n- `platform` (PlatformName): The platform to share on\n- `data` (ShareData, optional): Custom share data\n\n**Returns:** `Promise<boolean>` - True if share was successful\n\n#### `shareNative(data?)`\nTrigger native share sheet (mobile only).\n\n```javascript\nawait share.shareNative({\n  url: 'https://example.com',\n  title: 'My Title'\n});\n```\n\n**Parameters:**\n- `data` (ShareData, optional): Custom share data\n\n**Returns:** `Promise<boolean>` - True if share was successful\n\n#### `updateOptions(options)`\nUpdate widget options dynamically.\n\n```javascript\nshare.updateOptions({\n  theme: 'dark',\n  platforms: ['x', 'facebook']\n});\n```\n\n**Parameters:**\n- `options` (Partial<SocialShareButtonsOptions>): Options to update\n\n#### `destroy()`\nRemove the widget from the DOM and clean up event listeners.\n\n```javascript\nshare.destroy();\n```\n\n### Types\n\n#### `ShareData`\n```typescript\ninterface ShareData {\n  url?: string;           // URL to share\n  title?: string;         // Title/headline\n  text?: string;          // Description text\n  description?: string;   // Alternative description\n  hashtags?: string[];    // Hashtags (without #)\n  via?: string;           // Twitter via attribution\n  media?: string;         // Image URL (Pinterest)\n}\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nMIT © [Burak Özdemir](https://ozdemir.dev)\n\n## Support\n\n- [Report Issues](https://github.com/ozdemirburak/social-share-buttons/issues)\n- [Request Features](https://github.com/ozdemirburak/social-share-buttons/issues/new)\n\n---\n\n**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](https://github.com/lucide-icons/lucide), [Simple Icons](https://simpleicons.org), or custom SVGs.\n","readmeFilename":"README.md"}