Social Share Button

⚠️ IMPORTANT

All project discussions happens on Discord.

Please join the server before opening PRs or Issues and notify/tag the maintainer.
Failing to do so may cause delays in review.

Maintainer: @kpj2006

Social Share Button

Lightweight social sharing component for web applications. Zero dependencies, framework-agnostic. One script and one stylesheet add a share button and a clean share modal to any website.

🌐 Website & live demo: social-share-button.aossie.org

🚀 Project's Features

🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest, Discord
🎯 Zero dependencies: pure vanilla JavaScript
⚛️ Framework support: React, Preact, Next.js, Qwik, Vue, Angular, or plain HTML
🔄 SPA-aware: auto-detects the current URL and page title, and follows client-side route changes
📱 Responsive: fully responsive and mobile-ready
🎨 Customizable: dark/light themes, four button styles, custom colors and classes
📊 Privacy-first analytics: emits events only — adapters for Google Analytics 4, Mixpanel, Segment, Plausible and PostHog
⚡ Lightweight: ≈15 KB gzipped for the JS + CSS (unminified; the website computes the exact figure at build time)

💻 Tech Stack

Part	Stack
Library (`src/`)	Vanilla JavaScript, plain CSS, no runtime dependencies. Delivered via jsDelivr and npm. Formatted with Prettier.
Framework wrappers	React (`social-share-button-react.jsx`), Preact (`social-share-button-preact.jsx`), Qwik (`social-share-button-qwik.tsx`)
Website (`landing-page/`)	Next.js 16 (App Router, static export), React 19, Tailwind CSS v4, TypeScript, `next-intl` (i18n/l10n), `next-themes`, Lenis, `sugar-high`
CI/CD	GitHub Actions — lint & build, GitHub Pages deployment, Lighthouse/SEO audit, dependency review, CodeRabbit AI review

📋 Project Maturity Checklist

Status of the GSoC / AOSSIE project checklist:

See also the OpenSSF-based best practices checklist.

🚀 Website's Features

The website in landing-page/ is built from the AOSSIE Next.js webpage template:

Dogfooded: the “Share” button in the navigation and the “Click to Try Demo” live preview run the real library from src/, copied in at build time.
Copy-paste installation guide: pick a framework and get the exact snippets, with a copy button on every code block and beginner-friendly tooltips.
Next.js 16 & React 19: Server Components, static export, async routing.
Tailwind CSS v4: semantic design tokens with a design language inspired by tailwindcss.com.
Dual Theme System: flash-free light and dark themes with next-themes; first-time visitors start on their OS preference.
Robust i18n & l10n: English at / and Hindi at /hi with next-intl, localized metadata, hreflang alternates and a localized sitemap.
SEO & AI discoverability: Open Graph, JSON-LD (SoftwareApplication, FAQPage), robots.txt, sitemap.xml, llms.txt, .well-known/ai-plugin.json.
Accessibility: keyboard-navigable listbox and dialog, focus management, skip link, WCAG AA color contrast.
AI Agent Pairing Ready: includes AGENTS.md and CLAUDE.md.

📂 Project Structure

├── .github/
│   ├── ISSUE_TEMPLATE/          # Bug, feature and good-first-issue templates
│   ├── copilot/                 # AI-agent prompts for integrating the library
│   └── workflows/               # CI, GitHub Pages deploy, SEO audit, labels, template sync
├── src/                         # 📦 The library (published to npm / jsDelivr)
│   ├── social-share-button.js           # Core
│   ├── social-share-button.css          # Styles
│   ├── social-share-analytics.js        # Optional analytics adapters
│   └── social-share-button-{react,preact,qwik}.*  # Optional framework wrappers
├── index.html                   # Local demo page for the library
├── docs/                        # Roadmap and guides
├── landing-page/                # 🌐 The website (Next.js 16)
│   ├── next.config.ts           # Static export + next-intl; injects library version & size
│   ├── scripts/sync-library.mjs # Copies ../src into public/vendor before dev/build
│   ├── public/
│   │   ├── .well-known/         # ai-plugin.json, assetlinks.json
│   │   ├── brand/               # Brand.md, logos, favicon, Open Graph image
│   │   └── llms.txt, robots.txt, openapi.yaml, site.webmanifest
│   └── src/
│       ├── app/
│       │   ├── (default)/       # "/" — default locale (English), canonical
│       │   ├── [locale]/        # "/en", "/hi" + localized error & not-found pages
│       │   ├── globals.css      # Tailwind v4 theme tokens (light/dark)
│       │   └── sitemap.ts       # Localized sitemap
│       ├── components/          # site/, sections/, demo/, ui/, providers/
│       ├── config/              # languages.ts, site.ts
│       ├── content/install.ts   # Per-framework installation snippets
│       ├── i18n/                # routing, request, navigation, metadata, messages
│       ├── lib/                 # Library constants and React bindings
│       └── messages/            # en.json, hi.json
├── AGENTS.md / CLAUDE.md        # Guidance for AI coding agents
├── BestPracticesChecklist.md    # OpenSSF-based checklist
├── CONTRIBUTING.md, MAINTAINERS.md, SECURITY.md
├── COPYRIGHT.md, DCO.md, LICENSE
└── .coderabbit.yaml             # CodeRabbit AI review configuration

📦 Installation

Via CDN (Recommended)

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"
/>
<script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"></script>

⚡ 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 `<div id="share-button"></div>`	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`

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"
  />
</head>
<body>
  <div id="root"></div>
  <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"></script>
</body>

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.

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 (
    <header>
      <div id="share-button"></div>
    </header>
  );
}

▲ Next.js (App Router)

Step 1: Add CDN to `app/layout.tsx`

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"
        />
      </head>
      <body>
        {children}
        <Script
          src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"
          strategy="beforeInteractive"
        />
      </body>
    </html>
  );
}

Step 2: Add to a Client Component (Header, Navbar, or similar)

Because SocialShareButton manipulates the DOM, it must run inside a Client Component (note the "use client" directive at the top). Add the snippet below to an existing component such as app/components/Header.tsx or app/components/Navbar.tsx — any component already included in your layout.

"use client";

import { useEffect, useRef } from "react";
import { usePathname } from "next/navigation";

// ⬇️ 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<any>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const initRef = useRef(false);
  const pathname = usePathname();

  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 (
    <header>
      <div id="share-button" ref={containerRef}></div>
    </header>
  );
}

declare global {
  interface Window {
    SocialShareButton: any;
  }
}

📄 Next.js (Pages Router)

Step 1: Add CDN to `pages/_document.tsx`

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
        <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"></script>
      </body>
    </Html>
  );
}

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.

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<any>(null);
  const containerRef = useRef<HTMLDivElement>(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 (
    <header>
      <div id="share-button" ref={containerRef}></div>
    </header>
  );
}

declare global {
  interface Window {
    SocialShareButton: any;
  }
}

⚡ Vite / Vue / Angular

Step 1: Add CDN to `index.html`

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"
  />
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"></script>
</body>

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 <div> where you want the button to appear, then initialize the button after the DOM is ready:

// Add <div id="share-button"></div> 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`

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"
  />
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"></script>
</body>

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.

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 (
    <header>
      <div id="share-button" ref={containerRef}></div>
    </header>
  );
}

⚙️ Configuration

Basic Options

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

Customize Share Message/Post Text

Control the text that appears when users share to social platforms:

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
Discord: title + description + hashtags + link

Customize Button Color & Appearance

Option 1: Use Pre-built Styles (Easiest)

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:

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:

new SocialShareButton({
  container: "#share-button",
  buttonStyle: "primary",
  customClass: "my-custom-button",
});

Then in your CSS file:

/* 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:

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

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

import SocialShareButton from "@aossie-org/social-share-button";
import "@aossie-org/social-share-button/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:

import { SocialShareButton } from "./components/SocialShareButton";

function App() {
  return <SocialShareButton platforms={["twitter", "linkedin"]} />;
}

Update URL Dynamically (SPA)

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

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 <head>
Match container ID: container: '#share-button' = <div id="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

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

Custom Platforms

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

new SocialShareButton({
  container: "#share-button",
  buttonStyle: "icon-only",
  theme: "light",
});

🎬 Demo

Try the live, configurable demo at social-share-button.aossie.org (“Click to Try Demo”), or open index.html in your browser to see all features locally. Tutorial: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM

🌐 Website Development and Deployment

cd landing-page
npm install
npm run dev

Open http://localhost:3000. npm run dev and npm run build first copy the library from ../src, so the site always showcases your local changes. npm run build produces a static export in landing-page/out, deployed to GitHub Pages by .github/workflows/nextjs.yml. See landing-page/README.md for adding languages, translating text and theming.

🤝 Contributing

We welcome contributions of all kinds! To contribute:

Fork the repository and create your feature branch (git checkout -b feature/AmazingFeature).
Run code quality checks:
- npm run test:coverage — library unit and property tests, 90% coverage gate (repository root)
- npm run format:check / npm run format — library formatting (repository root)
- npm run lint and npm run build — website (inside landing-page/)
Try your changes by opening index.html in your browser, or run the website locally.
Commit your changes with a sign-off (git commit -s -m 'Add some AmazingFeature').
Push your branch (git push origin feature/AmazingFeature).
Open a Pull Request for review.

Please read CONTRIBUTING.md and DCO.md first. If you encounter bugs, need help, or have feature requests, please open an issue with detailed information, logs or screenshots.

This project is licensed under the GNU General Public License v3.0. See the LICENSE file and COPYRIGHT.md for details.

💪 Thanks To All Contributors

Thanks a lot for spending your time helping Social Share Button grow. Keep rocking 🥂

(back to top)

Name		Name	Last commit message	Last commit date
.github		.github
badges		badges
docs		docs
landing-page		landing-page
public		public
scripts		scripts
src		src
tests		tests
.coderabbit.yaml		.coderabbit.yaml
.editorconfig		.editorconfig
.gitignore		.gitignore
.lighthouserc.json		.lighthouserc.json
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
.templatesyncignore		.templatesyncignore
AGENTS.md		AGENTS.md
BestPracticesChecklist.md		BestPracticesChecklist.md
CLAUDE.md		CLAUDE.md
CONTRIBUTING.md		CONTRIBUTING.md
COPYRIGHT.md		COPYRIGHT.md
DCO.md		DCO.md
LICENSE		LICENSE
MAINTAINERS.md		MAINTAINERS.md
README.md		README.md
SECURITY.md		SECURITY.md
VERSION		VERSION
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
vitest.config.js		vitest.config.js

Latest commit

History

Folders and files

Repository files navigation

Social Share Button

🚀 Project's Features

💻 Tech Stack

📋 Project Maturity Checklist

🚀 Website's Features

📂 Project Structure

📦 Installation

Via CDN (Recommended)

⚡ Quick Start Guide

🗺️ Integration Overview

Step 1: Add CDN to public/index.html

Step 2: Add to your layout or header component

Step 1: Add CDN to app/layout.tsx

Step 2: Add to a Client Component (Header, Navbar, or similar)

Step 1: Add CDN to pages/_document.tsx

Step 2: Add to your Header, Navbar, or shared layout component

Step 1: Add CDN to index.html

Step 2: Add a container element and initialize in your component

Step 1: Add CDN to index.html

Step 2: Add to a layout or header component

⚙️ Configuration

Basic Options

All Available Options

Customize Share Message/Post Text

Customize Button Color & Appearance

Button Styles

Callbacks

🧠 Advanced Usage

Using npm Package

React Wrapper Component (Optional)

Update URL Dynamically (SPA)

🩺 Troubleshooting

🧪 Examples

Mobile Menu

Custom Platforms

Custom Styling

🎬 Demo

🌐 Website Development and Deployment

🤝 Contributing

💪 Thanks To All Contributors

About

Resources

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Releases

Sponsor this project

Packages

Contributors

Languages

Step 1: Add CDN to `public/index.html`

Step 1: Add CDN to `app/layout.tsx`

Step 1: Add CDN to `pages/_document.tsx`

Step 1: Add CDN to `index.html`

Step 1: Add CDN to `index.html`