diff --git a/README.md b/README.md index 59b9d992..c013eaee 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ Lightweight social sharing component for web applications. Zero dependencies, fr ## Features -- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest, Discord +- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest, Instagram, Discord - 🎯 Zero dependencies - pure vanilla JavaScript - ⚛️ Framework support: React, Preact, Next.js, Qwik, Vue, Angular, or plain HTML - 🔄 Auto-detects current URL and page title @@ -527,7 +527,7 @@ new SocialShareButton({ | `onCopy` | function | `null` | Callback when user copies link: `(url) => {}` | **Available Platforms:** -`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`, `pinterest`, `discord` +`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`, `pinterest`, `instagram`, `discord` ### Customize Share Message/Post Text @@ -554,6 +554,7 @@ new SocialShareButton({ - **Reddit:** `title` - `description` (used as title) - **Email:** Subject = `title`, Body = `description` + link - **Pinterest:** `title` + `description` + `hashtags` + link +- **Instagram:** copies the share link and opens Instagram in a new tab - **Discord:** `title` + `description` + `hashtags` + link - diff --git a/src/social-share-button-preact.jsx b/src/social-share-button-preact.jsx index 5de3b551..27fd8516 100644 --- a/src/social-share-button-preact.jsx +++ b/src/social-share-button-preact.jsx @@ -15,7 +15,7 @@ export default function SocialShareButton({ description = "", hashtags = [], via = "", - platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "discord"], + platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "pinterest", "instagram", "discord"], theme = "dark", buttonText = "Share", customClass = "", diff --git a/src/social-share-button-qwik.tsx b/src/social-share-button-qwik.tsx index 9d467eaa..fd2b3494 100644 --- a/src/social-share-button-qwik.tsx +++ b/src/social-share-button-qwik.tsx @@ -29,7 +29,7 @@ export const SocialShareButton = component$((props) => { description: props.description || '', hashtags: props.hashtags || [], via: props.via || '', - platforms: props.platforms || ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit', 'discord'], + platforms: props.platforms || ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit', 'pinterest', 'instagram', 'discord'], theme: props.theme || 'dark', buttonText: props.buttonText || 'Share', customClass: props.customClass || '', @@ -49,4 +49,4 @@ export const SocialShareButton = component$((props) => { }); return ; -}); \ No newline at end of file +}); diff --git a/src/social-share-button-react.jsx b/src/social-share-button-react.jsx index b7322d15..e6411e53 100644 --- a/src/social-share-button-react.jsx +++ b/src/social-share-button-react.jsx @@ -21,6 +21,7 @@ export const SocialShareButton = ({ "telegram", "reddit", "pinterest", + "instagram", "discord", ], theme = "dark", diff --git a/src/social-share-button.js b/src/social-share-button.js index c3dd7216..dc144c52 100644 --- a/src/social-share-button.js +++ b/src/social-share-button.js @@ -23,6 +23,7 @@ class SocialShareButton { "telegram", "reddit", "pinterest", + "instagram", "discord", ], theme: options.theme || "dark", @@ -173,6 +174,11 @@ class SocialShareButton { color: "#E60023", icon: '', }, + instagram: { + name: "Instagram", + color: "#E4405F", + icon: '' + }, discord: { name: "Discord", color: "#5865F2", @@ -250,6 +256,7 @@ class SocialShareButton { reddit: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedReddit}`, email: `mailto:?subject=${encodedTitle}&body=${encodedEmail}%20${encodedUrl}`, pinterest: `https://pinterest.com/pin/create/button/?url=${encodedUrl}&description=${encodedPinterest}`, + instagram: "https://www.instagram.com/", discord: "https://discord.com/channels/@me", }; @@ -420,7 +427,7 @@ class SocialShareButton { // Discord does not provide a native web-share intent; therefore, the most reliable // fallback is to copy the share URL to the clipboard and then navigate the user // towards Discord's direct messaging area. - if (platform === "discord") { + if (platform === "discord" || platform === "instagram") { this.copyLink(); window.open(shareUrl, "_blank", "noopener,noreferrer"); } else if (platform === "email") {