diff --git a/README.md b/README.md index 59b9d99..e48c1bb 100644 --- a/README.md +++ b/README.md @@ -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 - 🔄 Auto-detects current URL and page title - 📱 Fully responsive and mobile-ready - 🎨 Customizable themes (dark/light) @@ -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 `
` | 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 `
` | 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: @@ -437,12 +437,12 @@ new window.SocialShareButton({
- + ``` @@ -486,6 +486,95 @@ export default function Header() { +
+🔷 WordPress + +### 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() { ?> +
+ + + +
+💚 Nuxt.js + +### Step 1: Add CDN to your layout file (e.g., `app.vue` or `layouts/default.vue`) + +```html + + + + + + +``` + +### 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 + + + +``` + +
+ --- ## Configuration @@ -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 diff --git a/index.html b/index.html index ce23d40..aab49db 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,7 @@ margin-bottom: 10px; font-weight: 700; } + .brand { display: flex; align-items: center; @@ -256,6 +257,7 @@ } +
@@ -451,9 +453,9 @@

⚛️ Preact Integration

> <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"> <script - src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"></script> + src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script>
@@ -474,6 +476,55 @@

⚛️ Preact Integration

+ + +
+

🔷 WordPress Integration

+

Integrate SocialShareButton into your WordPress theme without any extra plugins.

+ +

Step 1: Enqueue the CSS and JS in functions.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 the button in the footer

+
+ + + + 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); +
+

Ready to Get Started?

@@ -753,8 +804,13 @@

Ready to Get Started?

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; diff --git a/src/social-share-button-nuxt.vue b/src/social-share-button-nuxt.vue new file mode 100644 index 0000000..0658fc4 --- /dev/null +++ b/src/social-share-button-nuxt.vue @@ -0,0 +1,86 @@ + + + diff --git a/src/social-share-button-preact.jsx b/src/social-share-button-preact.jsx index 5de3b55..28428e6 100644 --- a/src/social-share-button-preact.jsx +++ b/src/social-share-button-preact.jsx @@ -15,7 +15,7 @@ export default function SocialShareButton({ description = "", hashtags = [], via = "", - platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "discord"], + platforms = ["whatsapp", "facebook", "twitter", "linkedin", "telegram", "reddit", "pinterest", "discord"], theme = "dark", buttonText = "Share", customClass = "", diff --git a/src/social-share-button.js b/src/social-share-button.js index c3dd721..cd01f3d 100644 --- a/src/social-share-button.js +++ b/src/social-share-button.js @@ -66,6 +66,10 @@ class SocialShareButton { } init() { + if (!this._getContainer()) { + return; + } + if (this.options.showButton) { this.createButton(); } @@ -86,15 +90,10 @@ class SocialShareButton { `; this.button = button; - if (this.options.container) { - const container = - typeof this.options.container === "string" - ? document.querySelector(this.options.container) - : this.options.container; + const container = this._getContainer(); - if (container) { - container.appendChild(button); - } + if (container) { + container.appendChild(button); } } @@ -699,9 +698,26 @@ class SocialShareButton { _getContainer() { if (!this.options.container) return null; if (typeof document === "undefined") return null; - return typeof this.options.container === "string" - ? document.querySelector(this.options.container) - : this.options.container; + + let container = null; + try { + container = + typeof this.options.container === "string" + ? document.querySelector(this.options.container) + : this.options.container; + } catch (error) { + this._debugWarn("Invalid container selector provided in _getContainer", error); + return null; + } + + // Safety check: ensure the resolved value is actually a DOM Element. + // This prevents crashes if a user passes a non-DOM object to the container option. + if (container && !(container instanceof Element || container.nodeType === 1)) { + this._debugWarn(`Provided container is not a valid DOM Element: ${container}`, null); + return null; + } + + return container; } /**