Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 99 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ Lightweight social sharing component for web applications. Zero dependencies, fr

- 🌐 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
- βš›οΈ Framework support: React, Preact, Next.js, Nuxt.js, Qwik, Vue, Angular, WordPress or plain HTML
Comment thread
coderabbitai[bot] marked this conversation as resolved.
- πŸ”„ Auto-detects current URL and page title
- πŸ“± Fully responsive and mobile-ready
- 🎨 Customizable themes (dark/light)
Expand Down Expand Up @@ -103,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 `<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`) |
| Step | What to do | Where |
| -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
| **1️⃣ Load Library** | Add CSS + JS (CDN links) | Global layout file β€” `index.html` / `layout.tsx` / `_document.tsx` / `functions.php` |
| **2️⃣ Add Container** | Place `<div id="share-button"></div>` | The UI component or WordPress `wp_footer` hook |
| **3️⃣ Initialize** | Call `new SocialShareButton({ container: "#share-button" })` | Inside that component or WordPress `wp_footer` hook |

> πŸ’‘ Pick your framework below for the full copy-paste snippet:

Expand Down Expand Up @@ -437,12 +437,12 @@ new window.SocialShareButton({
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/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>
<script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script>
</body>
```

Expand Down Expand Up @@ -486,6 +486,95 @@ export default function Header() {

</details>

<details>
<summary><b>πŸ”· WordPress</b></summary>

### Step 1: Enqueue in `functions.php`

Add the following to your theme's `functions.php` to load the library directly from this repository via jsDelivr CDN:

> **Note:** This package is not published to npm. Use the jsDelivr + GitHub CDN link below to load the correct distributable from the [AOSSIE-Org/SocialShareButton](https://github.com/AOSSIE-Org/SocialShareButton) repository.

```php
function enqueue_social_share_button() {
wp_enqueue_style(
'social-share-button',
'https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css'
);
wp_enqueue_script(
'social-share-button',
'https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js',
[],
null,
true // Load in footer
);
}
add_action('wp_enqueue_scripts', 'enqueue_social_share_button');
```

### Step 2: Initialize in `functions.php` (Footer Hook)

Use the `wp_footer` hook with a **priority of 21** to inject the container and initialization script. The priority must be higher than the default (10) so WordPress prints the enqueued footer scripts _before_ this function runs:

```php
function init_social_share_button() { ?>
<div id="share-button"></div>
<script>
new SocialShareButton({
container: '#share-button',
url: window.location.href,
title: document.title,
theme: 'dark',
buttonText: 'Share'
});
</script>
<?php }
add_action('wp_footer', 'init_social_share_button', 21);
// ↑ Priority 21 ensures wp_footer scripts are printed (priority 20) before this runs.
```

</details>

<details>
<summary><b>πŸ’š Nuxt.js</b></summary>

### Step 1: Add CDN to your layout file (e.g., `app.vue` or `layouts/default.vue`)

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

### Step 2: Obtain the Nuxt wrapper component
Currently, the wrapper is not available via CDN and must be added manually. Copy the `src/social-share-button-nuxt.vue` file from this repository into your Nuxt project's `components/` folder. Rename it to `SocialShareButton.vue` to match the usage below.

### Step 3: Use the component in your page or component
Open an **existing** page β€” typically `pages/index.vue`. Since the component is in the `components/` folder, Nuxt 3 will auto-import it.

```vue
<template>
<SocialShareButton
url="https://your-website.com"
title="Check this out!"
theme="dark"
buttonText="Share"
/>
</template>

<script setup>
// Component is auto-imported from components/ in Nuxt 3
</script>
```

</details>
Comment thread
amankv1234 marked this conversation as resolved.

---

## Configuration
Expand Down Expand Up @@ -814,6 +903,8 @@ new SocialShareButton({
Open `index.html` in your browser to see all features.
Tutorial: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM

Nuxt.js Integration Demo: https://drive.google.com/file/d/1ItSRZnlNxMAeskWXpk-egVKyNs_Vrs2k/view?usp=sharing

---

## Contributing
Expand Down
64 changes: 60 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
margin-bottom: 10px;
font-weight: 700;
}

.brand {
display: flex;
align-items: center;
Expand Down Expand Up @@ -256,6 +257,7 @@
}
</style>
</head>

<body>
<div class="container">
<header>
Expand Down Expand Up @@ -451,9 +453,9 @@ <h2>βš›οΈ Preact Integration</h2>
></span>
<code>
&lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"&gt;
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"&gt;
&lt;script
src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"&gt;&lt;/script&gt;
src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"&gt;&lt;/script&gt;
</code>
</div>

Expand All @@ -474,6 +476,55 @@ <h2>βš›οΈ Preact Integration</h2>
</code>
</div>
</div>

<!-- WordPress Integration -->
<div class="demo-section">
<h2>πŸ”· WordPress Integration</h2>
<p>Integrate SocialShareButton into your WordPress theme without any extra plugins.</p>

<p><strong>Step 1:</strong> Enqueue the CSS and JS in <code>functions.php</code></p>
<div class="code-block">
<button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
<span
class="copy-status"
aria-live="polite"
style="position: absolute; left: -9999px"
></span>
<code>
function enqueue_social_share_button() {
wp_enqueue_style(
'social-share-button',
'https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css'
);
wp_enqueue_script(
'social-share-button',
'https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js',
[],
null,
true // Load in footer
);
}
add_action('wp_enqueue_scripts', 'enqueue_social_share_button');
</code>
</div>

<p><strong>Step 2:</strong> Initialize the button in the footer</p>
<div class="code-block">
<button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
<span
class="copy-status"
aria-live="polite"
style="position: absolute; left: -9999px"
></span>
<code>
function init_social_share_button() { ?&gt; &lt;div id="share-button"&gt;&lt;/div&gt;
&lt;script&gt; new SocialShareButton({ container: '#share-button', url:
window.location.href, title: document.title, theme: 'dark', buttonText: 'Share' });
&lt;/script&gt; &lt;?php } add_action('wp_footer', 'init_social_share_button',
21);</code
>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>
Expand Down Expand Up @@ -753,8 +804,13 @@ <h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>

copyButtons.forEach((button) => {
button.addEventListener("click", () => {
const codeBlock = button.closest(".code-block")?.querySelector("code");
const text = codeBlock ? codeBlock.innerText : "";
const codeBlockContainer = button.closest(".code-block");
const codeBlocks = codeBlockContainer
? codeBlockContainer.querySelectorAll("code")
: [];
const text = Array.from(codeBlocks)
.map((code) => code.textContent)
.join("\n");
const originalText = button.textContent;

const statusSpan = button.nextElementSibling;
Expand Down
86 changes: 86 additions & 0 deletions src/social-share-button-nuxt.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<template>
<div ref="container"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';

const props = defineProps({
url: { type: String, default: '' },
title: { type: String, default: '' },
description: { type: String, default: '' },
hashtags: { type: Array, default: () => [] },
via: { type: String, default: '' },
platforms: { type: Array, default: () => ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit', 'pinterest'] },
theme: { type: String, default: 'dark' },
buttonText: { type: String, default: 'Share' },
customClass: { type: String, default: '' },
onShare: { type: Function, default: null },
onCopy: { type: Function, default: null },
buttonStyle: { type: String, default: 'default' },
modalPosition: { type: String, default: 'center' },
buttonColor: { type: String, default: '' },
buttonHoverColor: { type: String, default: '' },
showButton: { type: Boolean, default: true },
// Analytics
analytics: { type: Boolean, default: true },
onAnalytics: { type: Function, default: null },
analyticsPlugins: { type: Array, default: () => [] },
componentId: { type: String, default: null },
debug: { type: Boolean, default: false }
});
Comment thread
amankv1234 marked this conversation as resolved.

const container = ref(null);
let shareButton = null;

onMounted(() => {
// SSR guard β€” Nuxt pre-renders on the server
if (typeof window !== 'undefined' && window.SocialShareButton) {
shareButton = new window.SocialShareButton({
container: container.value,
url: props.url || window.location.href,
title: props.title || document.title,
description: props.description,
hashtags: props.hashtags,
via: props.via,
platforms: props.platforms,
theme: props.theme,
buttonText: props.buttonText,
customClass: props.customClass,
onShare: props.onShare,
onCopy: props.onCopy,
buttonStyle: props.buttonStyle,
modalPosition: props.modalPosition,
buttonColor: props.buttonColor,
buttonHoverColor: props.buttonHoverColor,
showButton: props.showButton,
analytics: props.analytics,
onAnalytics: props.onAnalytics,
analyticsPlugins: props.analyticsPlugins,
componentId: props.componentId,
debug: props.debug
});
}
});

onBeforeUnmount(() => {
if (shareButton) {
shareButton.destroy();
shareButton = null;
}
});

// Sync prop changes to the underlying vanilla JS instance (e.g. Nuxt route changes)
watch(props, (newProps) => {
if (shareButton) {
const currentUrl = newProps.url || (typeof window !== 'undefined' ? window.location.href : '');
const currentTitle = newProps.title || (typeof document !== 'undefined' ? document.title : '');

shareButton.updateOptions({
...newProps,
url: currentUrl,
title: currentTitle
});
}
}, { deep: true });
</script>
2 changes: 1 addition & 1 deletion src/social-share-button-preact.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function SocialShareButton({
description = "",
hashtags = [],
via = "",
platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "discord"],
platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "pinterest", "discord"],
theme = "dark",
buttonText = "Share",
customClass = "",
Expand Down
Loading
Loading