From 5ba6916d8020a233f576d4df87bbaa94ba5cc54b Mon Sep 17 00:00:00 2001 From: sneha-techiee Date: Tue, 31 Mar 2026 11:52:14 +0530 Subject: [PATCH 1/3] Added custom Sneha demo and updated README --- README.md | 814 ++--------------------------------------------------- index.html | 38 +++ 2 files changed, 64 insertions(+), 788 deletions(-) diff --git a/README.md b/README.md index 34933c9..42540cd 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ > ⚠️ **IMPORTANT** > -> All project discussions happens on **[Discord](https://discord.com/channels/1022871757289422898/1479012884209078365)**. +> All project discussions happen on **[Discord](https://discord.com/channels/1022871757289422898/1479012884209078365)**. > > Please join the server **before opening PRs or Issues** and notify/tag the maintainer. > Failing to do so may cause **delays in review**. @@ -14,7 +14,6 @@
Stability Nexus -
  @@ -24,35 +23,24 @@ [![Static Badge](https://img.shields.io/badge/AOSSIE-Social_Share_Button-228B22?style=for-the-badge&labelColor=FFC517)](https://github.com/AOSSIE-Org/SocialShareButton) - -

- -Telegram Badge +Telegram Badge    - -X (formerly Twitter) Badge +Twitter Badge    - -Discord Badge +Discord Badge    - - Medium Badge +Medium Badge    - - LinkedIn Badge -   - - - Youtube Badge +LinkedIn Badge

--- @@ -61,790 +49,40 @@

SocialShareButton

-Lightweight social sharing component for web applications. Zero dependencies, framework-agnostic. +A lightweight and customizable **social sharing component** for modern web applications. +Built with **pure JavaScript**, zero dependencies, and works across all frameworks. + +--- -[![npm version](https://img.shields.io/npm/v/social-share-button-aossie.svg)](https://www.npmjs.com/package/social-share-button-aossie) -[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](LICENSE) +## πŸš€ Features +- 🌐 Supports multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest +- 🎯 Zero dependencies (pure vanilla JS) +- βš›οΈ Compatible with React, Next.js, Vue, Angular, and more +- πŸ”„ Automatically detects page URL and title +- πŸ“± Fully responsive and mobile-friendly +- 🎨 Custom themes (dark/light) +- ⚑ Lightweight (<10KB gzipped) --- -## Features +## πŸ’» Tech Stack -- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest -- 🎯 Zero dependencies - pure vanilla JavaScript -- βš›οΈ Framework support: React, Preact, Next.js, Qwik, Vue, Angular, or plain HTML -- πŸ”„ Auto-detects current URL and page title -- πŸ“± Fully responsive and mobile-ready -- 🎨 Customizable themes (dark/light) -- ⚑ Lightweight (< 10KB gzipped) +- **Frontend:** JavaScript (Vanilla JS) +- **Styling:** CSS +- **Distribution:** CDN / npm +- **Compatibility:** All major frameworks --- -## Installation +## πŸ“¦ Installation -### Via CDN (Recommended) +### Via CDN ```html - -``` - ---- - -## Quick Start Guide - -> 🚫 **IMPORTANT:** Do NOT create new files like `ShareButton.jsx` or `ShareButton.tsx`! -> βœ… Add code directly to your **existing** component (Header, Navbar, etc.) - -### πŸ—ΊοΈ Integration Overview - -No matter which framework you use, integration always follows the same 3 steps: - -| Step | What to do | Where | -| -------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | -| **1️⃣ Load Library** | Add CSS + JS (CDN links) | Global layout file β€” `index.html` / `layout.tsx` / `_document.tsx` | -| **2️⃣ Add Container** | Place `
` | The UI component where you want the button to appear | -| **3️⃣ Initialize** | Call `new SocialShareButton({ container: "#share-button" })` | Inside that component, after the DOM is ready (e.g. `useEffect`, `mounted`, `ngAfterViewInit`) | - -> πŸ’‘ Pick your framework below for the full copy-paste snippet: - -
-πŸ“¦ Create React App - -### Step 1: Add CDN to `public/index.html` - -```html - - - - -
- - -``` - -### Step 2: Add to your layout or header component - -Open an **existing** component that renders on every page β€” typically `src/components/Header.jsx`, `src/layouts/MainLayout.jsx`, or your root `App.jsx`. Add the snippet below to that component so the share button is consistently available across your app. - -```jsx -import { useEffect, useRef } from "react"; -import { useLocation } from "react-router-dom"; // omit if not using React Router - -// ⬇️ Replace 'Header' with the name of the component where you want the -// share button to appear β€” e.g. Navbar, MainLayout, App, etc. -function Header() { - const shareButtonRef = useRef(null); - const initRef = useRef(false); - const { pathname } = useLocation(); // omit if not using React Router - - useEffect(() => { - if (initRef.current || !window.SocialShareButton) return; - - shareButtonRef.current = new window.SocialShareButton({ - container: "#share-button", - }); - initRef.current = true; - - return () => { - if (shareButtonRef.current?.destroy) { - shareButtonRef.current.destroy(); - } - initRef.current = false; - }; - }, []); - - // Keep the share URL and title in sync with the current route - useEffect(() => { - if (shareButtonRef.current) { - shareButtonRef.current.updateOptions({ - url: window.location.href, - title: document.title, - }); - } - }, [pathname]); // re-runs on every client-side route change - - return ( -
-
-
- ); -} -``` - -
- -
-β–² Next.js (App Router) - -### Step 1: Add CDN to `app/layout.tsx` - -```tsx -import Script from "next/script"; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - - - - {children} - - - - ); -} -``` - -### Step 2: Add to your Header, Navbar, or shared layout component - -Open an existing component that is rendered on every page β€” typically `components/Header.tsx`, `components/Navbar.tsx`, or `components/Layout.tsx`. Since `_document.tsx` loads the script globally, the button is ready to initialize in any of these components. - -```tsx -import { useEffect, useRef } from "react"; -import { useRouter } from "next/router"; - -// ⬇️ Replace 'Header' with the name of the component where you want the -// share button to appear β€” e.g. Navbar, MainLayout, App, etc. -export default function Header() { - const shareButtonRef = useRef(null); - const containerRef = useRef(null); - const initRef = useRef(false); - const { pathname } = useRouter(); - - useEffect(() => { - const initButton = () => { - if (initRef.current || !window.SocialShareButton || !containerRef.current) return; - - shareButtonRef.current = new window.SocialShareButton({ - container: "#share-button", - }); - initRef.current = true; - }; - - if (window.SocialShareButton) { - initButton(); - } else { - const checkInterval = setInterval(() => { - if (window.SocialShareButton) { - clearInterval(checkInterval); - initButton(); - } - }, 100); - - return () => { - clearInterval(checkInterval); - if (shareButtonRef.current?.destroy) { - shareButtonRef.current.destroy(); - } - initRef.current = false; - }; - } - - return () => { - if (shareButtonRef.current?.destroy) { - shareButtonRef.current.destroy(); - } - initRef.current = false; - }; - }, []); - - // Keep the share URL and title in sync with the current route - useEffect(() => { - if (shareButtonRef.current) { - shareButtonRef.current.updateOptions({ - url: window.location.href, - title: document.title, - }); - } - }, [pathname]); // re-runs on every client-side navigation - - return ( -
-
-
- ); -} - -declare global { - interface Window { - SocialShareButton: any; - } -} -``` - -
- -
-⚑ Vite / Vue / Angular - -### Step 1: Add CDN to `index.html` - -```html - - - - -
- - -``` - -### Step 2: Add a container element and initialize in your component - -Open your root or layout component (e.g., `App.vue`, `app.component.html`, or `App.jsx`). Add a container `
` where you want the button to appear, then initialize the button after the DOM is ready: - -```javascript -// Add
to your component's template/HTML first, -// then initialize once the DOM is ready (e.g., in mounted(), ngAfterViewInit(), or useEffect()): -new window.SocialShareButton({ - container: "#share-button", -}); -``` - -
- -
-βš›οΈ Preact - -### Step 1: Add CDN to `index.html` - -```html - - - - -
- - -``` - -### Step 2: Add to a layout or header component - -Open an **existing** component that renders on every page β€” typically `src/components/Header.jsx`, `src/components/Navbar.jsx`, or your root `App.jsx`. Add the snippet below to that component so the share button is consistently available across your app. - -```jsx -import { useEffect, useRef } from "preact/hooks"; - -// ⬇️ Replace 'Header' with the name of the component where you want the -// share button to appear β€” e.g. Navbar, MainLayout, App, etc. -export default function Header() { - const shareButtonRef = useRef(null); - const containerRef = useRef(null); - const initRef = useRef(false); - - useEffect(() => { - if (initRef.current || !window.SocialShareButton || !containerRef.current) return; - - shareButtonRef.current = new window.SocialShareButton({ - container: "#share-button", - }); - initRef.current = true; - - return () => { - if (shareButtonRef.current?.destroy) { - shareButtonRef.current.destroy(); - } - initRef.current = false; - }; - }, []); - - return ( -
-
-
- ); -} -``` - -
- ---- - -## Configuration - -### Basic Options - -```jsx -new SocialShareButton({ - container: "#share-button", // Required: CSS selector or DOM element - url: "https://example.com", // Optional: defaults to window.location.href - title: "Custom Title", // Optional: defaults to document.title - buttonText: "Share", // Optional: button label text - buttonStyle: "primary", // default | primary | compact | icon-only - theme: "dark", // dark | light - platforms: ["twitter", "linkedin"], // Optional: defaults to all platforms -}); -``` - -### All Available Options - -| Option | Type | Default | Description | -| ------------------ | -------------- | ---------------------- | -------------------------------------------------- | -| `container` | string/Element | - | **Required.** CSS selector or DOM element | -| `url` | string | `window.location.href` | URL to share | -| `title` | string | `document.title` | Share title/headline | -| `description` | string | `''` | Additional description text | -| `hashtags` | array | `[]` | Hashtags for posts (e.g., `['js', 'webdev']`) | -| `via` | string | `''` | Twitter handle (without @) | -| `platforms` | array | All platforms | Platforms to show (see below) | -| `buttonText` | string | `'Share'` | Button label text | -| `buttonStyle` | string | `'default'` | `default`, `primary`, `compact`, `icon-only` | -| `buttonColor` | string | `''` | Custom button background color | -| `buttonHoverColor` | string | `''` | Custom button hover color | -| `customClass` | string | `''` | Additional CSS class for button | -| `theme` | string | `'dark'` | `dark` or `light` | -| `modalPosition` | string | `'center'` | Modal position on screen | -| `showButton` | boolean | `true` | Show/hide the share button | -| `onShare` | function | `null` | Callback when user shares: `(platform, url) => {}` | -| `onCopy` | function | `null` | Callback when user copies link: `(url) => {}` | - -**Available Platforms:** -`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`, `pinterest` - -### Customize Share Message/Post Text - -Control the text that appears when users share to social platforms: - -```jsx -new SocialShareButton({ - container: "#share-button", - url: "https://myproject.com", - title: "Check out my awesome project!", // Main title/headline - description: "An amazing tool for developers", // Additional description - hashtags: ["javascript", "webdev", "opensource"], // Hashtags included in posts - via: "MyProjectHandle", // Your Twitter handle -}); -``` - -**How messages are customized per platform:** - -- **WhatsApp:** `title` + `description` + `hashtags` + link -- **Facebook:** `title` + `description` + `hashtags` + link -- **Twitter/X:** `title` + `description` + `hashtags` + `via` handle + link -- **Telegram:** `title` + `description` + `hashtags` + link -- **LinkedIn:** `title` + `description` + link -- **Reddit:** `title` - `description` (used as title) -- **Email:** Subject = `title`, Body = `description` + link -- **Pinterest:** `title` + `description` + `hashtags` + link - -### Customize Button Color & Appearance - -**Option 1: Use Pre-built Styles** (Easiest) - -```jsx -new SocialShareButton({ - container: "#share-button", - buttonStyle: "primary", // or 'default', 'compact', 'icon-only' -}); -``` - -**Option 2: Programmatic Color Customization** (Recommended) - -Pass `buttonColor` and `buttonHoverColor` to match your project's color scheme: - -```jsx -new SocialShareButton({ - container: "#share-button", - buttonColor: "#ff6b6b", // Button background color - buttonHoverColor: "#ff5252", // Hover state color -}); -``` - -**Option 3: CSS Class Customization** (Advanced) - -For more complex styling, use a custom CSS class: - -```jsx -new SocialShareButton({ - container: "#share-button", - buttonStyle: "primary", - customClass: "my-custom-button", -}); -``` - -Then in your CSS file: - -```css -/* Override the button background color */ -.my-custom-button.social-share-btn { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; -} - -/* Customize hover state */ -.my-custom-button.social-share-btn:hover { - background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); -} -``` - -**Color Examples:** - -```jsx -// Material Design Red -new SocialShareButton({ - container: "#share-button", - buttonColor: "#f44336", - buttonHoverColor: "#da190b", -}); - -// Tailwind Blue -new SocialShareButton({ - container: "#share-button", - buttonColor: "#3b82f6", - buttonHoverColor: "#2563eb", -}); - -// Custom Brand Color -new SocialShareButton({ - container: "#share-button", - buttonColor: "#your-brand-color", - buttonHoverColor: "#your-brand-color-dark", -}); -``` - -### Button Styles - -| Style | Description | -| ----------- | ---------------------------------- | -| `default` | Standard button with icon and text | -| `primary` | Gradient button (recommended) | -| `compact` | Smaller size for tight spaces | -| `icon-only` | Icon without text | - -### Callbacks - -```jsx -new SocialShareButton({ - container: "#share-button", - onShare: (platform, url) => { - console.log(`Shared on ${platform}: ${url}`); - }, - onCopy: (url) => { - console.log("Link copied:", url); - }, -}); -``` - ---- - -## Advanced Usage - -### Using npm Package - -```javascript -import SocialShareButton from "social-share-button-aossie"; -import "social-share-button-aossie/src/social-share-button.css"; - -new SocialShareButton({ - container: "#share-button", -}); -``` - -### React Wrapper Component (Optional) - -If you want a reusable React component, copy `src/social-share-button-react.jsx` to your project: - -```jsx -import { SocialShareButton } from "./components/SocialShareButton"; - -function App() { - return ; -} -``` - -### Update URL Dynamically (SPA) - -```jsx -// Next.js App Router: import { usePathname } from "next/navigation"; -// Next.js Pages Router: import { useRouter } from "next/router"; -// React Router: import { useLocation } from "react-router-dom"; - -const shareButton = useRef(null); -// Get the current pathname from your router, e.g.: -// const pathname = usePathname(); // Next.js App Router -// const { pathname } = useRouter(); // Next.js Pages Router -// const { pathname } = useLocation(); // React Router - -useEffect(() => { - shareButton.current = new window.SocialShareButton({ - container: "#share-button", - }); -}, []); - -useEffect(() => { - if (shareButton.current) { - shareButton.current.updateOptions({ - url: window.location.href, - title: document.title, - }); - } -}, [pathname]); // re-runs on every client-side route change -``` - ---- - -## Troubleshooting - -
-Multiple buttons appearing - -**Cause:** Component re-renders creating duplicate instances - -**Solution:** Use `useRef` to track initialization (already in examples above) - -
- -
-Button not appearing - -**Cause:** Script loads after component renders - -**Solution:** Add null check: - -```jsx -if (window.SocialShareButton) { - new window.SocialShareButton({ container: "#share-button" }); -} -``` - -
- -
-Modal not opening - -**Cause:** CSS not loaded or ID mismatch - -**Solution:** - -- Verify CSS CDN link in `` -- Match container ID: `container: '#share-button'` = `
` - -
- -
-TypeError: SocialShareButton is not a constructor - -**Cause:** CDN script not loaded yet - -**Solution:** Use interval polling (see Next.js example above) - -
- -
-URL not updating on navigation - -**Cause:** Component initialized once, doesn't track routes - -**Solution:** Use `updateOptions()` method (see Advanced Usage above) - -
- ---- - -## Examples - -### Mobile Menu - -```jsx - -``` - -### Custom Platforms - -```jsx -// Professional networks only -new SocialShareButton({ - container: "#share-button", - platforms: ["linkedin", "twitter", "email"], -}); - -// Messaging apps only -new SocialShareButton({ - container: "#share-button", - platforms: ["whatsapp", "telegram"], -}); -``` - -### Custom Styling - -```jsx -new SocialShareButton({ - container: "#share-button", - buttonStyle: "icon-only", - theme: "light", -}); -``` - ---- - -## Demo - -Open `index.html` in your browser to see all features. -Tutorial: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM - ---- - -## Contributing - -We welcome contributions of all kinds! To contribute: - -1. Fork the repository and create your feature branch (`git checkout -b feature/AmazingFeature`). -2. Commit your changes (`git commit -m 'Add some AmazingFeature'`). -3. Run code quality checks: - - `npm run lint` - Check for code issues - - `npm run format:check` - Check code formatting - - `npm run format` - Auto-format code -4. Test your changes by opening `index.html` in your browser to verify functionality. -5. Push your branch (`git push origin feature/AmazingFeature`). -6. Open a Pull Request for review. - -If you encounter bugs, need help, or have feature requests: - -- Please open an issue in this repository providing detailed information. -- Describe the problem clearly and include any relevant logs or screenshots. - -We appreciate your feedback and contributions! - -This project is licensed under the GNU General Public License v3.0. -See the [LICENSE](LICENSE) file for details. - ---- - -## πŸ’ͺ Thanks To All Contributors - -Thanks a lot for spending your time helping SocialShareButton grow. Keep rocking πŸ₯‚ - -[![Contributors](https://contrib.rocks/image?repo=AOSSIE-Org/SocialShareButton)](https://github.com/AOSSIE-Org/SocialShareButton/graphs/contributors) -Β© 2025 AOSSIE + \ No newline at end of file diff --git a/index.html b/index.html index 769407b..d01048d 100644 --- a/index.html +++ b/index.html @@ -341,6 +341,11 @@

🎨 Custom Button Colors

Customize button colors to match your brand palette

+

✨ Sneha Custom

+

Custom demo added by Sneha

+
+
+

Red Theme

#f44336 - Material Red

@@ -577,7 +582,22 @@

πŸ…°οΈ Angular Integration

+ +
+

πŸ§ͺ Sneha Custom Demo

+

This is Sneha's custom integration demo.

+ +
+
+

My Share Button

+

Custom example added by Sneha

+ + +
+
+
+

Ready to Get Started?

@@ -758,6 +778,24 @@

Ready to Get Started?

buttonHoverColor: "#db2777", buttonText: "Share", }); + new SocialShareButton({ + container: "#share-button", + url: "https://github.com/AOSSIE-Org/SocialShareButton", + title: "Sneha's Project πŸ”₯", + description: "Testing my custom integration πŸš€", + buttonStyle: "primary", + buttonText: "Share My Project", +}); + +// πŸ”₯ Sneha Custom Demo +new SocialShareButton({ + container: "#demo-sneha", + url: "https://github.com/AOSSIE-Org/SocialShareButton", + title: "Sneha's Project πŸ”₯", + description: "Custom demo added by Sneha πŸš€", + buttonStyle: "primary", + buttonText: "Share My Project", +}); // Copy to Clipboard Functionality const copyButtons = document.querySelectorAll(".copy-btn"); From bad3cd7efb31470f7cd1c65d850a83f68571bb2a Mon Sep 17 00:00:00 2001 From: sneha-techiee Date: Tue, 31 Mar 2026 11:57:16 +0530 Subject: [PATCH 2/3] Added Sneha custom demo to index.html --- README.md | 814 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 788 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 42540cd..34933c9 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ > ⚠️ **IMPORTANT** > -> All project discussions happen on **[Discord](https://discord.com/channels/1022871757289422898/1479012884209078365)**. +> All project discussions happens on **[Discord](https://discord.com/channels/1022871757289422898/1479012884209078365)**. > > Please join the server **before opening PRs or Issues** and notify/tag the maintainer. > Failing to do so may cause **delays in review**. @@ -14,6 +14,7 @@
Stability Nexus +
  @@ -23,24 +24,35 @@ [![Static Badge](https://img.shields.io/badge/AOSSIE-Social_Share_Button-228B22?style=for-the-badge&labelColor=FFC517)](https://github.com/AOSSIE-Org/SocialShareButton) + +

+ -Telegram Badge +Telegram Badge    + -Twitter Badge +X (formerly Twitter) Badge    + -Discord Badge +Discord Badge    + -Medium Badge + Medium Badge    + -LinkedIn Badge + LinkedIn Badge +   + + + Youtube Badge

--- @@ -49,40 +61,790 @@

SocialShareButton

-A lightweight and customizable **social sharing component** for modern web applications. -Built with **pure JavaScript**, zero dependencies, and works across all frameworks. - ---- +Lightweight social sharing component for web applications. Zero dependencies, framework-agnostic. -## πŸš€ Features +[![npm version](https://img.shields.io/npm/v/social-share-button-aossie.svg)](https://www.npmjs.com/package/social-share-button-aossie) +[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](LICENSE) -- 🌐 Supports multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest -- 🎯 Zero dependencies (pure vanilla JS) -- βš›οΈ Compatible with React, Next.js, Vue, Angular, and more -- πŸ”„ Automatically detects page URL and title -- πŸ“± Fully responsive and mobile-friendly -- 🎨 Custom themes (dark/light) -- ⚑ Lightweight (<10KB gzipped) --- -## πŸ’» Tech Stack +## Features -- **Frontend:** JavaScript (Vanilla JS) -- **Styling:** CSS -- **Distribution:** CDN / npm -- **Compatibility:** All major frameworks +- 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest +- 🎯 Zero dependencies - pure vanilla JavaScript +- βš›οΈ Framework support: React, Preact, Next.js, Qwik, Vue, Angular, or plain HTML +- πŸ”„ Auto-detects current URL and page title +- πŸ“± Fully responsive and mobile-ready +- 🎨 Customizable themes (dark/light) +- ⚑ Lightweight (< 10KB gzipped) --- -## πŸ“¦ Installation +## Installation -### Via CDN +### Via CDN (Recommended) ```html + +``` + +--- + +## Quick Start Guide + +> 🚫 **IMPORTANT:** Do NOT create new files like `ShareButton.jsx` or `ShareButton.tsx`! +> βœ… Add code directly to your **existing** component (Header, Navbar, etc.) + +### πŸ—ΊοΈ Integration Overview + +No matter which framework you use, integration always follows the same 3 steps: + +| Step | What to do | Where | +| -------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | +| **1️⃣ Load Library** | Add CSS + JS (CDN links) | Global layout file β€” `index.html` / `layout.tsx` / `_document.tsx` | +| **2️⃣ Add Container** | Place `
` | The UI component where you want the button to appear | +| **3️⃣ Initialize** | Call `new SocialShareButton({ container: "#share-button" })` | Inside that component, after the DOM is ready (e.g. `useEffect`, `mounted`, `ngAfterViewInit`) | + +> πŸ’‘ Pick your framework below for the full copy-paste snippet: + +
+πŸ“¦ Create React App + +### Step 1: Add CDN to `public/index.html` + +```html + + + + +
+ + +``` + +### Step 2: Add to your layout or header component + +Open an **existing** component that renders on every page β€” typically `src/components/Header.jsx`, `src/layouts/MainLayout.jsx`, or your root `App.jsx`. Add the snippet below to that component so the share button is consistently available across your app. + +```jsx +import { useEffect, useRef } from "react"; +import { useLocation } from "react-router-dom"; // omit if not using React Router + +// ⬇️ Replace 'Header' with the name of the component where you want the +// share button to appear β€” e.g. Navbar, MainLayout, App, etc. +function Header() { + const shareButtonRef = useRef(null); + const initRef = useRef(false); + const { pathname } = useLocation(); // omit if not using React Router + + useEffect(() => { + if (initRef.current || !window.SocialShareButton) return; + + shareButtonRef.current = new window.SocialShareButton({ + container: "#share-button", + }); + initRef.current = true; + + return () => { + if (shareButtonRef.current?.destroy) { + shareButtonRef.current.destroy(); + } + initRef.current = false; + }; + }, []); + + // Keep the share URL and title in sync with the current route + useEffect(() => { + if (shareButtonRef.current) { + shareButtonRef.current.updateOptions({ + url: window.location.href, + title: document.title, + }); + } + }, [pathname]); // re-runs on every client-side route change + + return ( +
+
+
+ ); +} +``` + +
+ +
+β–² Next.js (App Router) + +### Step 1: Add CDN to `app/layout.tsx` + +```tsx +import Script from "next/script"; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + + + + {children} + + + + ); +} +``` + +### Step 2: Add to your Header, Navbar, or shared layout component + +Open an existing component that is rendered on every page β€” typically `components/Header.tsx`, `components/Navbar.tsx`, or `components/Layout.tsx`. Since `_document.tsx` loads the script globally, the button is ready to initialize in any of these components. + +```tsx +import { useEffect, useRef } from "react"; +import { useRouter } from "next/router"; + +// ⬇️ Replace 'Header' with the name of the component where you want the +// share button to appear β€” e.g. Navbar, MainLayout, App, etc. +export default function Header() { + const shareButtonRef = useRef(null); + const containerRef = useRef(null); + const initRef = useRef(false); + const { pathname } = useRouter(); + + useEffect(() => { + const initButton = () => { + if (initRef.current || !window.SocialShareButton || !containerRef.current) return; + + shareButtonRef.current = new window.SocialShareButton({ + container: "#share-button", + }); + initRef.current = true; + }; + + if (window.SocialShareButton) { + initButton(); + } else { + const checkInterval = setInterval(() => { + if (window.SocialShareButton) { + clearInterval(checkInterval); + initButton(); + } + }, 100); + + return () => { + clearInterval(checkInterval); + if (shareButtonRef.current?.destroy) { + shareButtonRef.current.destroy(); + } + initRef.current = false; + }; + } + + return () => { + if (shareButtonRef.current?.destroy) { + shareButtonRef.current.destroy(); + } + initRef.current = false; + }; + }, []); + + // Keep the share URL and title in sync with the current route + useEffect(() => { + if (shareButtonRef.current) { + shareButtonRef.current.updateOptions({ + url: window.location.href, + title: document.title, + }); + } + }, [pathname]); // re-runs on every client-side navigation + + return ( +
+
+
+ ); +} + +declare global { + interface Window { + SocialShareButton: any; + } +} +``` + +
+ +
+⚑ Vite / Vue / Angular + +### Step 1: Add CDN to `index.html` + +```html + + + + +
+ + +``` + +### Step 2: Add a container element and initialize in your component + +Open your root or layout component (e.g., `App.vue`, `app.component.html`, or `App.jsx`). Add a container `
` where you want the button to appear, then initialize the button after the DOM is ready: + +```javascript +// Add
to your component's template/HTML first, +// then initialize once the DOM is ready (e.g., in mounted(), ngAfterViewInit(), or useEffect()): +new window.SocialShareButton({ + container: "#share-button", +}); +``` + +
+ +
+βš›οΈ Preact + +### Step 1: Add CDN to `index.html` + +```html + + + + +
+ + +``` + +### Step 2: Add to a layout or header component + +Open an **existing** component that renders on every page β€” typically `src/components/Header.jsx`, `src/components/Navbar.jsx`, or your root `App.jsx`. Add the snippet below to that component so the share button is consistently available across your app. + +```jsx +import { useEffect, useRef } from "preact/hooks"; + +// ⬇️ Replace 'Header' with the name of the component where you want the +// share button to appear β€” e.g. Navbar, MainLayout, App, etc. +export default function Header() { + const shareButtonRef = useRef(null); + const containerRef = useRef(null); + const initRef = useRef(false); + + useEffect(() => { + if (initRef.current || !window.SocialShareButton || !containerRef.current) return; + + shareButtonRef.current = new window.SocialShareButton({ + container: "#share-button", + }); + initRef.current = true; + + return () => { + if (shareButtonRef.current?.destroy) { + shareButtonRef.current.destroy(); + } + initRef.current = false; + }; + }, []); + + return ( +
+
+
+ ); +} +``` + +
+ +--- + +## Configuration + +### Basic Options + +```jsx +new SocialShareButton({ + container: "#share-button", // Required: CSS selector or DOM element + url: "https://example.com", // Optional: defaults to window.location.href + title: "Custom Title", // Optional: defaults to document.title + buttonText: "Share", // Optional: button label text + buttonStyle: "primary", // default | primary | compact | icon-only + theme: "dark", // dark | light + platforms: ["twitter", "linkedin"], // Optional: defaults to all platforms +}); +``` + +### All Available Options + +| Option | Type | Default | Description | +| ------------------ | -------------- | ---------------------- | -------------------------------------------------- | +| `container` | string/Element | - | **Required.** CSS selector or DOM element | +| `url` | string | `window.location.href` | URL to share | +| `title` | string | `document.title` | Share title/headline | +| `description` | string | `''` | Additional description text | +| `hashtags` | array | `[]` | Hashtags for posts (e.g., `['js', 'webdev']`) | +| `via` | string | `''` | Twitter handle (without @) | +| `platforms` | array | All platforms | Platforms to show (see below) | +| `buttonText` | string | `'Share'` | Button label text | +| `buttonStyle` | string | `'default'` | `default`, `primary`, `compact`, `icon-only` | +| `buttonColor` | string | `''` | Custom button background color | +| `buttonHoverColor` | string | `''` | Custom button hover color | +| `customClass` | string | `''` | Additional CSS class for button | +| `theme` | string | `'dark'` | `dark` or `light` | +| `modalPosition` | string | `'center'` | Modal position on screen | +| `showButton` | boolean | `true` | Show/hide the share button | +| `onShare` | function | `null` | Callback when user shares: `(platform, url) => {}` | +| `onCopy` | function | `null` | Callback when user copies link: `(url) => {}` | + +**Available Platforms:** +`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`, `pinterest` + +### Customize Share Message/Post Text + +Control the text that appears when users share to social platforms: + +```jsx +new SocialShareButton({ + container: "#share-button", + url: "https://myproject.com", + title: "Check out my awesome project!", // Main title/headline + description: "An amazing tool for developers", // Additional description + hashtags: ["javascript", "webdev", "opensource"], // Hashtags included in posts + via: "MyProjectHandle", // Your Twitter handle +}); +``` + +**How messages are customized per platform:** + +- **WhatsApp:** `title` + `description` + `hashtags` + link +- **Facebook:** `title` + `description` + `hashtags` + link +- **Twitter/X:** `title` + `description` + `hashtags` + `via` handle + link +- **Telegram:** `title` + `description` + `hashtags` + link +- **LinkedIn:** `title` + `description` + link +- **Reddit:** `title` - `description` (used as title) +- **Email:** Subject = `title`, Body = `description` + link +- **Pinterest:** `title` + `description` + `hashtags` + link + +### Customize Button Color & Appearance + +**Option 1: Use Pre-built Styles** (Easiest) + +```jsx +new SocialShareButton({ + container: "#share-button", + buttonStyle: "primary", // or 'default', 'compact', 'icon-only' +}); +``` + +**Option 2: Programmatic Color Customization** (Recommended) + +Pass `buttonColor` and `buttonHoverColor` to match your project's color scheme: + +```jsx +new SocialShareButton({ + container: "#share-button", + buttonColor: "#ff6b6b", // Button background color + buttonHoverColor: "#ff5252", // Hover state color +}); +``` + +**Option 3: CSS Class Customization** (Advanced) + +For more complex styling, use a custom CSS class: + +```jsx +new SocialShareButton({ + container: "#share-button", + buttonStyle: "primary", + customClass: "my-custom-button", +}); +``` + +Then in your CSS file: + +```css +/* Override the button background color */ +.my-custom-button.social-share-btn { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +/* Customize hover state */ +.my-custom-button.social-share-btn:hover { + background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); +} +``` + +**Color Examples:** + +```jsx +// Material Design Red +new SocialShareButton({ + container: "#share-button", + buttonColor: "#f44336", + buttonHoverColor: "#da190b", +}); + +// Tailwind Blue +new SocialShareButton({ + container: "#share-button", + buttonColor: "#3b82f6", + buttonHoverColor: "#2563eb", +}); + +// Custom Brand Color +new SocialShareButton({ + container: "#share-button", + buttonColor: "#your-brand-color", + buttonHoverColor: "#your-brand-color-dark", +}); +``` + +### Button Styles + +| Style | Description | +| ----------- | ---------------------------------- | +| `default` | Standard button with icon and text | +| `primary` | Gradient button (recommended) | +| `compact` | Smaller size for tight spaces | +| `icon-only` | Icon without text | + +### Callbacks + +```jsx +new SocialShareButton({ + container: "#share-button", + onShare: (platform, url) => { + console.log(`Shared on ${platform}: ${url}`); + }, + onCopy: (url) => { + console.log("Link copied:", url); + }, +}); +``` + +--- + +## Advanced Usage + +### Using npm Package + +```javascript +import SocialShareButton from "social-share-button-aossie"; +import "social-share-button-aossie/src/social-share-button.css"; + +new SocialShareButton({ + container: "#share-button", +}); +``` + +### React Wrapper Component (Optional) + +If you want a reusable React component, copy `src/social-share-button-react.jsx` to your project: + +```jsx +import { SocialShareButton } from "./components/SocialShareButton"; + +function App() { + return ; +} +``` + +### Update URL Dynamically (SPA) + +```jsx +// Next.js App Router: import { usePathname } from "next/navigation"; +// Next.js Pages Router: import { useRouter } from "next/router"; +// React Router: import { useLocation } from "react-router-dom"; + +const shareButton = useRef(null); +// Get the current pathname from your router, e.g.: +// const pathname = usePathname(); // Next.js App Router +// const { pathname } = useRouter(); // Next.js Pages Router +// const { pathname } = useLocation(); // React Router + +useEffect(() => { + shareButton.current = new window.SocialShareButton({ + container: "#share-button", + }); +}, []); + +useEffect(() => { + if (shareButton.current) { + shareButton.current.updateOptions({ + url: window.location.href, + title: document.title, + }); + } +}, [pathname]); // re-runs on every client-side route change +``` + +--- + +## Troubleshooting + +
+Multiple buttons appearing + +**Cause:** Component re-renders creating duplicate instances + +**Solution:** Use `useRef` to track initialization (already in examples above) + +
+ +
+Button not appearing + +**Cause:** Script loads after component renders + +**Solution:** Add null check: + +```jsx +if (window.SocialShareButton) { + new window.SocialShareButton({ container: "#share-button" }); +} +``` + +
+ +
+Modal not opening + +**Cause:** CSS not loaded or ID mismatch + +**Solution:** + +- Verify CSS CDN link in `` +- Match container ID: `container: '#share-button'` = `
` + +
+ +
+TypeError: SocialShareButton is not a constructor + +**Cause:** CDN script not loaded yet + +**Solution:** Use interval polling (see Next.js example above) + +
+ +
+URL not updating on navigation + +**Cause:** Component initialized once, doesn't track routes + +**Solution:** Use `updateOptions()` method (see Advanced Usage above) + +
+ +--- + +## Examples + +### Mobile Menu + +```jsx + +``` + +### Custom Platforms + +```jsx +// Professional networks only +new SocialShareButton({ + container: "#share-button", + platforms: ["linkedin", "twitter", "email"], +}); + +// Messaging apps only +new SocialShareButton({ + container: "#share-button", + platforms: ["whatsapp", "telegram"], +}); +``` + +### Custom Styling + +```jsx +new SocialShareButton({ + container: "#share-button", + buttonStyle: "icon-only", + theme: "light", +}); +``` + +--- + +## Demo + +Open `index.html` in your browser to see all features. +Tutorial: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM + +--- + +## Contributing + +We welcome contributions of all kinds! To contribute: + +1. Fork the repository and create your feature branch (`git checkout -b feature/AmazingFeature`). +2. Commit your changes (`git commit -m 'Add some AmazingFeature'`). +3. Run code quality checks: + - `npm run lint` - Check for code issues + - `npm run format:check` - Check code formatting + - `npm run format` - Auto-format code +4. Test your changes by opening `index.html` in your browser to verify functionality. +5. Push your branch (`git push origin feature/AmazingFeature`). +6. Open a Pull Request for review. + +If you encounter bugs, need help, or have feature requests: + +- Please open an issue in this repository providing detailed information. +- Describe the problem clearly and include any relevant logs or screenshots. + +We appreciate your feedback and contributions! + +This project is licensed under the GNU General Public License v3.0. +See the [LICENSE](LICENSE) file for details. + +--- + +## πŸ’ͺ Thanks To All Contributors + +Thanks a lot for spending your time helping SocialShareButton grow. Keep rocking πŸ₯‚ + +[![Contributors](https://contrib.rocks/image?repo=AOSSIE-Org/SocialShareButton)](https://github.com/AOSSIE-Org/SocialShareButton/graphs/contributors) - \ No newline at end of file +Β© 2025 AOSSIE From 497a954b4f51bb0207d521ea05ca6b68626714ef Mon Sep 17 00:00:00 2001 From: sneha-techiee Date: Mon, 13 Apr 2026 14:18:24 +0530 Subject: [PATCH 3/3] Fix review comments: improve HTML comment and refactor demo config --- index.html | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index d01048d..1411e88 100644 --- a/index.html +++ b/index.html @@ -592,7 +592,7 @@

πŸ§ͺ Sneha Custom Demo

My Share Button

Custom example added by Sneha

- +
@@ -778,24 +778,25 @@

Ready to Get Started?

buttonHoverColor: "#db2777", buttonText: "Share", }); + const snehaBaseConfig = { + url: demoUrl, + title: "Sneha's Project πŸ”₯", + buttonStyle: "primary", + buttonText: "Share My Project", + }; + new SocialShareButton({ - container: "#share-button", - url: "https://github.com/AOSSIE-Org/SocialShareButton", - title: "Sneha's Project πŸ”₯", - description: "Testing my custom integration πŸš€", - buttonStyle: "primary", - buttonText: "Share My Project", -}); - -// πŸ”₯ Sneha Custom Demo -new SocialShareButton({ - container: "#demo-sneha", - url: "https://github.com/AOSSIE-Org/SocialShareButton", - title: "Sneha's Project πŸ”₯", - description: "Custom demo added by Sneha πŸš€", - buttonStyle: "primary", - buttonText: "Share My Project", -}); + ...snehaBaseConfig, + container: "#share-button", + description: "Testing my custom integration πŸš€", + }); + + // Sneha Custom Demo + new SocialShareButton({ + ...snehaBaseConfig, + container: "#demo-sneha", + description: "Custom demo added by Sneha πŸš€", + }); // Copy to Clipboard Functionality const copyButtons = document.querySelectorAll(".copy-btn");