diff --git a/README.md b/README.md index bf8c605..526c221 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,6 @@
- > ⚠️ **IMPORTANT** > > All project discussions happens on **[Discord](https://discord.com/channels/1022871757289422898/1479012884209078365)**. @@ -73,7 +72,7 @@ Lightweight social sharing component for web applications. Zero dependencies, fr - 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email - 🎯 Zero dependencies - pure vanilla JavaScript -- ⚛️ Framework support: React, Next.js, Vue, Angular, or plain HTML +- ⚛️ Framework support: React, Next.js, Vue, Angular, Rails, Django, Laravel, or plain HTML - 🔄 Auto-detects current URL and page title - 📱 Fully responsive and mobile-ready - 🎨 Customizable themes (dark/light) @@ -86,7 +85,10 @@ Lightweight social sharing component for web applications. Zero dependencies, fr ### Via CDN (Recommended) ```html - + ``` @@ -101,11 +103,11 @@ Lightweight social sharing component for web applications. Zero dependencies, fr 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`) | +| 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: @@ -132,8 +134,8 @@ No matter which framework you use, integration always follows the same 3 steps: 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 +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. @@ -146,7 +148,7 @@ function Header() { if (initRef.current || !window.SocialShareButton) return; shareButtonRef.current = new window.SocialShareButton({ - container: "#share-button", + container: '#share-button', }); initRef.current = true; @@ -184,13 +186,9 @@ function Header() { ### Step 1: Add CDN to `app/layout.tsx` ```tsx -import Script from "next/script"; +import Script from 'next/script'; -export default function RootLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( @@ -216,10 +214,10 @@ export default function RootLayout({ 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. ```tsx -"use client"; +'use client'; -import { useEffect, useRef } from "react"; -import { usePathname } from "next/navigation"; +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. @@ -231,11 +229,10 @@ export default function Header() { useEffect(() => { const initButton = () => { - if (initRef.current || !window.SocialShareButton || !containerRef.current) - return; + if (initRef.current || !window.SocialShareButton || !containerRef.current) return; shareButtonRef.current = new window.SocialShareButton({ - container: "#share-button", + container: '#share-button', }); initRef.current = true; }; @@ -299,7 +296,7 @@ declare global { ### Step 1: Add CDN to `pages/_document.tsx` ```tsx -import { Html, Head, Main, NextScript } from "next/document"; +import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( @@ -325,8 +322,8 @@ export default function Document() { 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"; +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. @@ -338,11 +335,10 @@ export default function Header() { useEffect(() => { const initButton = () => { - if (initRef.current || !window.SocialShareButton || !containerRef.current) - return; + if (initRef.current || !window.SocialShareButton || !containerRef.current) return; shareButtonRef.current = new window.SocialShareButton({ - container: "#share-button", + container: '#share-button', }); initRef.current = true; }; @@ -426,12 +422,80 @@ Open your root or layout component (e.g., `App.vue`, `app.component.html`, or `A // 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", + container: '#share-button', }); ``` +
+🖥️ Rails / Django / Laravel + +No wrapper file is needed — all three frameworks generate HTML on the server. +The integration pattern is identical: add CDN `` and ` +
+ +``` + +### Django — `templates/base.html` + +```html +{# In #} + + +{# Before #} + +
+ +``` + +### Laravel — `resources/views/layouts/app.blade.php` + +```blade +{{-- In --}} + + +{{-- Before --}} + +
+ +``` + +
+ --- ## Configuration @@ -440,13 +504,13 @@ new window.SocialShareButton({ ```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 + 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 }); ``` @@ -481,12 +545,12 @@ 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 + 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 }); ``` @@ -506,8 +570,8 @@ new SocialShareButton({ ```jsx new SocialShareButton({ - container: "#share-button", - buttonStyle: "primary", // or 'default', 'compact', 'icon-only' + container: '#share-button', + buttonStyle: 'primary', // or 'default', 'compact', 'icon-only' }); ``` @@ -517,9 +581,9 @@ 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 + container: '#share-button', + buttonColor: '#ff6b6b', // Button background color + buttonHoverColor: '#ff5252', // Hover state color }); ``` @@ -529,9 +593,9 @@ For more complex styling, use a custom CSS class: ```jsx new SocialShareButton({ - container: "#share-button", - buttonStyle: "primary", - customClass: "my-custom-button", + container: '#share-button', + buttonStyle: 'primary', + customClass: 'my-custom-button', }); ``` @@ -555,23 +619,23 @@ Then in your CSS file: ```jsx // Material Design Red new SocialShareButton({ - container: "#share-button", - buttonColor: "#f44336", - buttonHoverColor: "#da190b", + container: '#share-button', + buttonColor: '#f44336', + buttonHoverColor: '#da190b', }); // Tailwind Blue new SocialShareButton({ - container: "#share-button", - buttonColor: "#3b82f6", - buttonHoverColor: "#2563eb", + container: '#share-button', + buttonColor: '#3b82f6', + buttonHoverColor: '#2563eb', }); // Custom Brand Color new SocialShareButton({ - container: "#share-button", - buttonColor: "#your-brand-color", - buttonHoverColor: "#your-brand-color-dark", + container: '#share-button', + buttonColor: '#your-brand-color', + buttonHoverColor: '#your-brand-color-dark', }); ``` @@ -588,12 +652,12 @@ new SocialShareButton({ ```jsx new SocialShareButton({ - container: "#share-button", + container: '#share-button', onShare: (platform, url) => { console.log(`Shared on ${platform}: ${url}`); }, onCopy: (url) => { - console.log("Link copied:", url); + console.log('Link copied:', url); }, }); ``` @@ -605,11 +669,11 @@ new SocialShareButton({ ### Using npm Package ```javascript -import SocialShareButton from "social-share-button-aossie"; -import "social-share-button-aossie/src/social-share-button.css"; +import SocialShareButton from 'social-share-button-aossie'; +import 'social-share-button-aossie/src/social-share-button.css'; new SocialShareButton({ - container: "#share-button", + container: '#share-button', }); ``` @@ -618,10 +682,10 @@ new SocialShareButton({ If you want a reusable React component, copy `src/social-share-button-react.jsx` to your project: ```jsx -import { SocialShareButton } from "./components/SocialShareButton"; +import { SocialShareButton } from './components/SocialShareButton'; function App() { - return ; + return ; } ``` @@ -640,7 +704,7 @@ const shareButton = useRef(null); useEffect(() => { shareButton.current = new window.SocialShareButton({ - container: "#share-button", + container: '#share-button', }); }, []); @@ -676,7 +740,7 @@ useEffect(() => { ```jsx if (window.SocialShareButton) { - new window.SocialShareButton({ container: "#share-button" }); + new window.SocialShareButton({ container: '#share-button' }); } ``` @@ -729,14 +793,14 @@ if (window.SocialShareButton) { ```jsx // Professional networks only new SocialShareButton({ - container: "#share-button", - platforms: ["linkedin", "twitter", "email"], + container: '#share-button', + platforms: ['linkedin', 'twitter', 'email'], }); // Messaging apps only new SocialShareButton({ - container: "#share-button", - platforms: ["whatsapp", "telegram"], + container: '#share-button', + platforms: ['whatsapp', 'telegram'], }); ``` @@ -744,9 +808,9 @@ new SocialShareButton({ ```jsx new SocialShareButton({ - container: "#share-button", - buttonStyle: "icon-only", - theme: "light", + container: '#share-button', + buttonStyle: 'icon-only', + theme: 'light', }); ``` diff --git a/docs/client-guide.md b/docs/client-guide.md index 6b49350..da7d57d 100644 --- a/docs/client-guide.md +++ b/docs/client-guide.md @@ -8,12 +8,12 @@ Your audience is already sharing. Give them a button worth clicking. -| What you get | What you skip | -|---|---| -| One-line install | Backend servers | +| What you get | What you skip | +| ---------------------- | --------------------------- | +| One-line install | Backend servers | | Works on any framework | Tracking or data collection | -| Fully customizable | Lock-in or licensing fees | -| Lightweight & fast | Build step (CDN option) | +| Fully customizable | Lock-in or licensing fees | +| Lightweight & fast | Build step (CDN option) | --- diff --git a/docs/quick-integration-prompt.md b/docs/quick-integration-prompt.md new file mode 100644 index 0000000..5ae87b9 --- /dev/null +++ b/docs/quick-integration-prompt.md @@ -0,0 +1,71 @@ +# SocialShareButton — Quick Integration Prompt + +> Use this simple prompt with any AI (ChatGPT, Claude, OpenCode, Copilot, etc.) to integrate SocialShareButton into your project in seconds. + +--- + +## The Simple Prompt + +Copy and paste this into any AI: + +``` +Read the full integration instructions from: +https://github.com/AOSSIE-Org/SocialShareButton/blob/main/.github/copilot/integrate-social-share-button.prompt.md + +My project uses Next.js App Router. +Add the SocialShareButton to my existing Navbar component. +Also enable debug: true to see analytics events in the console. +``` + +--- + +## What This Does + +The AI will automatically: + +1. Add the CDN CSS link to your layout file (``) +2. Add the CDN JS script to your layout file (`beforeInteractive`) +3. Add the share button container `
` to your Navbar +4. Add the initialization code with `useEffect` (Next.js safe) +5. Enable `debug: true` so you can see analytics events in browser console + +--- + +## What You'll See + +### Console Events (with debug: true) + +``` +[SocialShareButton Analytics] { eventName: 'social_share_popup_open', ... } +[SocialShareButton Analytics] { eventName: 'social_share_click', platform: 'twitter', ... } +[SocialShareButton Analytics] { eventName: 'social_share_copy', ... } +``` + +--- + +## Framework Options + +Change the prompt based on your framework: + +| Framework | Prompt Change | +| -------------------- | -------------------------------------- | +| Next.js App Router | "My project uses Next.js App Router" | +| Next.js Pages Router | "My project uses Next.js Pages Router" | +| React (CRA) | "My project uses Create React App" | +| Vite / Vue / Angular | "My project uses Vite" | +| Vanilla HTML | "My project is plain HTML" | + +--- + +## Full Documentation + +- Integration Guide: [.github/copilot/integrate-social-share-button.prompt.md](../.github/copilot/integrate-social-share-button.prompt.md) +- Analytics Guide: [.github/copilot/integrate-analytics.prompt.md](../.github/copilot/integrate-analytics.prompt.md) +- README: [../README.md](../README.md) + +--- + +## Tutorial Videos + +- **Video 1 — AI-Powered Integration**: https://youtu.be/xNDE-Y6h_Qo +- **Video 2 — Live Preview**: https://youtu.be/3s6ZxDcHanI diff --git a/docs/tutorial-video.md b/docs/tutorial-video.md new file mode 100644 index 0000000..327f5b4 --- /dev/null +++ b/docs/tutorial-video.md @@ -0,0 +1,206 @@ +# Tutorial Video: SocialShareButton + Analytics Integration + +> Related issue: [#94 — Record a Tutorial Video for SocialShareButton Analytics Integration](https://github.com/AOSSIE-Org/SocialShareButton/issues/94) +> Reference PR: [#65 — Analytics Integration](https://github.com/AOSSIE-Org/SocialShareButton/pull/65) + +--- + +## Video Links + +**Video 1 — Setup & Code Integration** +https://youtu.be/xNDE-Y6h_Qo + +**Video 2 — Live Preview on AOSSIE Website** +https://youtu.be/3s6ZxDcHanI + +_Uploaded to YouTube (unlisted). Anyone with the link can view._ + +--- + +## What the Video Covers + +This tutorial is split into **two videos** (authentic screen-recordings, no simulations, no heavy edits): + +**Video 1 — AI-Powered Integration (Using OpenCode/AI Prompt)** + +- Opening the AOSSIE-Org/Website project in OpenCode +- Giving an AI prompt to integrate SocialShareButton +- AI automatically reads the integration guide and writes all the code +- CDN links added, Navbar component modified automatically +- Enabling `debug: true` to see analytics events in browser console +- Running the project and verifying the button works + +**Video 2 — Live Preview on AOSSIE Website** + +- Full working UI of the share button on the live website +- Share modal opening with all platforms (WhatsApp, Facebook, Twitter, LinkedIn, etc.) +- Copy link functionality working +- Console showing analytics events (`social_share_popup_open`, `social_share_click`) in real-time + +--- + +## Timestamped Breakdown + +### Video 1 — AI-Powered Integration (Using OpenCode/AI Prompt) + +| Timestamp | What is shown | +| --------- | ------------------------------------------------------------------------- | +| 0:00–0:10 | Opening VS Code / OpenCode in AOSSIE-Org/Website project folder | +| 0:10–0:20 | Opening the integration prompt file from SocialShareButton | +| 0:20–0:30 | Giving AI prompt: "integrate SocialShareButton into this Next.js project" | +| 0:30–0:40 | AI reads the prompt file, automatically adds CDN links to layout | +| 0:40–0:50 | AI modifies Navbar component, adds container div and initialization code | +| 0:50–1:00 | Adding `debug: true` option to enable analytics | +| 1:00–1:10 | Running `npm run dev` to start the development server | +| 1:10–1:20 | Browser showing share button appearing, clicking to open modal | + +### Video 2 — Live Preview on AOSSIE Website + +| Timestamp | What is shown | +| --------- | ----------------------------------------------------------- | +| 0:00–0:10 | Full AOSSIE website with share button visible in Navbar | +| 0:10–0:20 | Clicking share button → modal opens with all platforms | +| 0:20–0:30 | Clicking Twitter → opens Twitter share window | +| 0:30–0:40 | Clicking WhatsApp → opens WhatsApp share window | +| 0:40–0:50 | Clicking "Copy link" → link copied, toast/feedback shown | +| 0:50–1:00 | Console panel: showing analytics events firing in real-time | +| 1:00–1:10 | Summary: button fully functional, analytics tracking works | + +--- + +## Code Used in the Video + +The code in Video 1 was automatically generated by AI using the prompt from `.github/copilot/integrate-social-share-button.prompt.md`. + +### Step 1 — AI Prompt + +The prompt given to AI was essentially: + +``` +Read the full integration instructions from: +https://github.com/AOSSIE-Org/SocialShareButton/blob/main/.github/copilot/integrate-social-share-button.prompt.md + +I am using AOSSIE-Org/Website which is Next.js App Router. +Add the share button to the existing Navbar component. +``` + +The AI automatically produced all the code below. + +### Step 2 — Debug mode (zero-config, all events to console) + +Add `debug: true` to the existing `SocialShareButton` init call in the host project: + +```js +// In AOSSIE-Org/Website's Navbar component (or your existing layout component) +shareButtonRef.current = new window.SocialShareButton({ + container: '#share-button', + debug: true, // single addition — logs every event to the browser console +}); +``` + +**Events you will see in the console:** + +```text +[SocialShareButton Analytics] { eventName: 'social_share_popup_open', platform: null, url: '...', ... } +[SocialShareButton Analytics] { eventName: 'social_share_click', platform: 'twitter', url: '...', ... } +[SocialShareButton Analytics] { eventName: 'social_share_copy', platform: null, url: '...', ... } +``` + +--- + +### Step 2 — Google Analytics 4 adapter (production-ready) + +Load the analytics adapter from the CDN, then pass the adapter via `analyticsPlugins`: + +```html + + + + +``` + +This calls `window.gtag('event', 'social_share_click', { share_platform: 'twitter', ... })` automatically for every interaction. + +--- + +### Step 3 — Listening via DOM CustomEvent (framework-agnostic alternative) + +If you prefer not to use adapters, listen to the `social-share` DOM event directly: + +```js +document.addEventListener('social-share', (e) => { + console.log('Share event:', e.detail); + // Forward to your own analytics pipeline + fetch('/api/analytics', { + method: 'POST', + body: JSON.stringify(e.detail), + }); +}); +``` + +--- + +## Analytics Events Reference + +| Event Name | Trigger | +| -------------------------- | ------------------------------------------------------------ | +| `social_share_popup_open` | User clicked the share button and the modal opened | +| `social_share_popup_close` | User dismissed the modal (button, overlay click, or Esc key) | +| `social_share_click` | User clicked a platform inside the modal (intent to share) | +| `social_share_success` | Platform share window opened successfully | +| `social_share_copy` | User clicked "Copy link" | +| `social_share_error` | An error prevented sharing or copying | + +Every event carries the same payload schema: + +```json +{ + "version": "1.0", + "source": "social-share-button", + "eventName": "social_share_click", + "interactionType": "share", + "platform": "twitter", + "url": "https://example.com/page", + "title": "My Page Title", + "timestamp": 1710000000000, + "componentId": null +} +``` + +--- + +## Host Repository Used + +**AOSSIE-Org/Website** — Next.js + Tailwind CSS official AOSSIE website. + +This repo was chosen because: + +- It is the official AOSSIE organization website (real production project). +- Built with Next.js App Router — the most common modern web framework. +- The SocialShareButton README already documents Next.js integration steps directly. +- Easy to demonstrate working UI on a real public-facing website. + +> Per the issue rules, the SocialShareButton repository itself was **not** used as the host. + +--- + +## Recording Setup + +- **Tool:** OBS Studio (free, open-source) +- **Resolution:** 1920×1080 @ 30fps +- **Duration:** ≤ 150 seconds (as required by Issue #94) +- **Style:** No simulations. No synthetic walkthroughs. Pure authentic screen-recording. + +--- + +## Additional Resources + +- [SocialShareButton README — Analytics section](../README.md) +- [Analytics adapter source — `src/social-share-analytics.js`](../src/social-share-analytics.js) +- [Reference PR #65 — Analytics integration](https://github.com/AOSSIE-Org/SocialShareButton/pull/65) +- [AOSSIE Discord](https://discord.gg/hjUhu33uAn) diff --git a/index.html b/index.html index 90db0da..e41742a 100644 --- a/index.html +++ b/index.html @@ -189,6 +189,12 @@ white-space: pre; } + .inline-code { + background: rgba(0, 0, 0, 0.3); + padding: 2px 6px; + border-radius: 4px; + } + .cta-section { text-align: center; padding: 40px 20px; @@ -397,7 +403,7 @@

🚀 Quick Start

Get started in seconds with minimal setup

- + <link rel="stylesheet" href="social-share-button.css"> @@ -419,10 +425,10 @@

⚛️ React Integration

First-class React support with hooks

- + -import SocialShareButton from 'social-share-button'; +import SocialShareButton from 'social-share-button'; function App() { return ( @@ -438,6 +444,85 @@

⚛️ React Integration

+ +
+

🖥️ Server-Rendered Frameworks (Rails / Django / Laravel)

+

+ Ruby on Rails, Django, and Laravel generate HTML on the server. + The integration pattern is identical across all three: include the CDN CSS in + <head>, + add the JS and initialisation script before + </body> + in your base layout template. +

+ +

Ruby on Rails — app/views/layouts/application.html.erb

+
+ + + +<%# In <head> %> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"> + +<%# Before </body> %> +<script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script> +<div id="share-button"></div> +<script> + new SocialShareButton({ + container: '#share-button', + url: window.location.href, + title: document.title, + theme: 'dark', + buttonText: 'Share' + }); +</script> +
+ +

Django — templates/base.html

+
+ + + +{# In <head> #} +<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"> + +{# Before </body> #} +<script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script> +<div id="share-button"></div> +<script> + new SocialShareButton({ + container: '#share-button', + url: window.location.href, + title: document.title, + theme: 'dark', + buttonText: 'Share' + }); +</script> +
+ +

Laravel — resources/views/layouts/app.blade.php

+
+ + + +{{-- In <head> --}} +<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"> + +{{-- Before </body> --}} +<script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script> +<div id="share-button"></div> +<script> + new SocialShareButton({ + container: '#share-button', + url: window.location.href, + title: document.title, + theme: 'dark', + buttonText: 'Share' + }); +</script> +
+
+

Ready to Get Started?