Skip to content

feat(server-rendered): add Rails, Django, and Laravel CDN integration… #124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Abhinandankaushik wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(server-rendered): add Rails, Django, and Laravel CDN integration… #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bcafbf9
feat(server-rendered): add Rails, Django, and Laravel CDN integration…
Abhinandankaushik Mar 21, 2026
130e7dd
implemented coderabbit suggestion
Abhinandankaushik Mar 21, 2026
a6203df
added visually-hidden class
Abhinandankaushik Mar 21, 2026
4f9a9a9
removed duplicate comment
Abhinandankaushik Mar 21, 2026
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
69 changes: 68 additions & 1 deletion README.md
View file
Open in desktop
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
- 🎯 Zero dependencies - pure vanilla JavaScript
- ⚛️ Framework support: React, Preact, Next.js, Vue, Angular, or plain HTML
- ⚛️ Framework support: React, Preact, 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)
Expand Down Expand Up @@ -111,6 +111,73 @@ No matter which framework you use, integration always follows the same 3 steps:

> 💡 Pick your framework below for the full copy-paste snippet:

For server-rendered apps like **Rails**, **Django**, and **Laravel**, use the same CDN pattern in your base layout template: CSS in `<head>`, JS before `</body>`, then initialize `new SocialShareButton(...)`.

<details>
<summary><b>🖥️ Server-Rendered Frameworks (Rails / Django / Laravel)</b></summary>

### Ruby on Rails (`app/views/layouts/application.html.erb`)

```erb
<%# In <head> %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share-button-aossie/src/social-share-button.css">

<%# Before </body> %>
<script src="https://cdn.jsdelivr.net/npm/social-share-button-aossie/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`)

```django
{# In <head> #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share-button-aossie/src/social-share-button.css">

{# Before </body> #}
<script src="https://cdn.jsdelivr.net/npm/social-share-button-aossie/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`)

```blade
{{-- In <head> --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share-button-aossie/src/social-share-button.css">

{{-- Before </body> --}}
<script src="https://cdn.jsdelivr.net/npm/social-share-button-aossie/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>
```

</details>

<details>
<summary><b>📦 Create React App</b></summary>

Expand Down
121 changes: 103 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,16 @@
white-space: pre;
}

.framework-snippet-title {
color: #fff;
margin-top: 10px;
}

.visually-hidden {
position: absolute;
left: -9999px;
}

.cta-section {
text-align: center;
padding: 40px 20px;
Expand Down Expand Up @@ -403,11 +413,7 @@ <h2>🚀 Quick Start</h2>

<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>
<span class="copy-status visually-hidden" aria-live="polite"></span>
<code>
&lt;link rel="stylesheet" href="social-share-button.css"&gt; &lt;script
src="social-share-button.js"&gt;&lt;/script&gt; // Initialize new SocialShareButton({
Expand All @@ -424,11 +430,7 @@ <h2>⚛️ React Integration</h2>

<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>
<span class="copy-status visually-hidden" aria-live="polite"></span>

<code
>import SocialShareButton from 'social-share-button'; function App() { return (
Expand All @@ -444,11 +446,7 @@ <h2>⚛️ Preact Integration</h2>

<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>
<span class="copy-status visually-hidden" aria-live="polite"></span>
<code>
&lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.css"&gt;
Expand All @@ -474,6 +472,66 @@ <h2>⚛️ Preact Integration</h2>
</code>
</div>
</div>

<!-- Server-Rendered Frameworks Integration (Rails / Django / Laravel) -->
<div class="demo-section">
<h2>🖥️ Server-Rendered Frameworks (Rails / Django / Laravel)</h2>
<p>
Integration pattern is the same for all three: include CSS in <code>&lt;head&gt;</code>,
include JS before <code>&lt;/body&gt;</code>, add a container, then initialize with a
small script.
</p>

<h3 class="framework-snippet-title">
Ruby on Rails (app/views/layouts/application.html.erb)
</h3>
<div class="code-block">
<button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
<span class="copy-status visually-hidden" aria-live="polite"></span>
<code>
&lt;%# In &lt;head&gt; %&gt; &lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"&gt;
&lt;%# Before &lt;/body&gt; %&gt; &lt;script
src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"&gt;&lt;/script&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;
</code>
</div>

<h3 class="framework-snippet-title">Django (templates/base.html)</h3>
<div class="code-block">
<button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
<span class="copy-status visually-hidden" aria-live="polite"></span>
<code>
{# In &lt;head&gt; #} &lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"&gt;
{# Before &lt;/body&gt; #} &lt;script
src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"&gt;&lt;/script&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;
</code>
</div>

<h3 class="framework-snippet-title">
Laravel (resources/views/layouts/app.blade.php)
</h3>
<div class="code-block">
<button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
<span class="copy-status visually-hidden" aria-live="polite"></span>
<code>
{{-- In &lt;head&gt; --}} &lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"&gt;
{{-- Before &lt;/body&gt; --}} &lt;script
src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"&gt;&lt;/script&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;
</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 @@ -676,7 +734,7 @@ <h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>
clearTimeout(button.copyResetTimer);
}

navigator.clipboard.writeText(text).then(() => {
const handleCopySuccess = () => {
if (statusSpan && statusSpan.classList.contains("copy-status")) {
statusSpan.textContent = "Code copied to clipboard";
}
Expand All @@ -690,7 +748,9 @@ <h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>
statusSpan.textContent = "";
}
}, 2000);
}).catch((error) => {
};

const handleCopyFailure = (error) => {
console.error("Failed to copy to clipboard", error);

button.textContent = originalText;
Expand All @@ -706,7 +766,32 @@ <h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>
statusSpan.textContent = "";
}
}, 2000);
});
};

if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
navigator.clipboard.writeText(text).then(handleCopySuccess).catch(handleCopyFailure);
} else {
const tempTextArea = document.createElement("textarea");
tempTextArea.value = text;
tempTextArea.setAttribute("readonly", "");
tempTextArea.style.position = "absolute";
tempTextArea.style.left = "-9999px";
document.body.appendChild(tempTextArea);
tempTextArea.select();

try {
const copied = document.execCommand("copy");
if (copied) {
handleCopySuccess();
} else {
handleCopyFailure(new Error("Legacy copy command failed"));
}
} catch (error) {
handleCopyFailure(error);
} finally {
document.body.removeChild(tempTextArea);
}
}
});
});
});
Expand Down
2 changes: 2 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading