Enhancement: Add Server-Rendered Framework Integration (Rails / Django / Laravel) — demo page section and CDN usage guide #53
Description
🎯 Direction
SocialShareButton is a lightweight, zero-dependency, framework-agnostic social sharing component. Ruby on Rails, Django, and Laravel are the three most popular server-rendered web frameworks — they generate HTML on the server and send it to the browser, making CDN-based widget integration the standard approach. This issue adds a single combined demo section covering all three, since the integration pattern is near-identical across them.
📹 See the button in action: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM
📁 Files to Create / Modify
ℹ️ No New Wrapper File Needed
Integration is done by placing CDN <link> and <script> tags in the server-rendered base layout template of each framework. No JavaScript wrapper is required.
✅ Existing File: index.html — Add Server-Rendered Frameworks Section
Add a new section with:
- Section heading:
🖥️ Server-Rendered Frameworks (Rails / Django / Laravel) - A brief note that the pattern is the same across all three — include CSS in
<head>, JS before</body>, initialize with a script
Ruby on Rails (app/views/layouts/application.html.erb):
<%# In <head> %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css">
<%# Before </body> %>
<script src="https://cdn.jsdelivr.net/npm/social-share-button/dist/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/npm/social-share-button/dist/social-share-button.css">
{# Before </body> #}
<script src="https://cdn.jsdelivr.net/npm/social-share-button/dist/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/npm/social-share-button/dist/social-share-button.css">
{{-- Before </body> --}}
<script src="https://cdn.jsdelivr.net/npm/social-share-button/dist/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>✅ Acceptance Criteria
- No new wrapper file required — integration is template/CDN only
-
index.htmlupdated with a server-rendered frameworks section containing separate code snippets for Rails, Django, and Laravel - Copy-to-clipboard button present on new code blocks in
index.html - README updated to mention Rails, Django, and Laravel as supported integration patterns
⚠️ Planned — Not Final
This issue represents a planned enhancement and is not guaranteed to be implemented. It may be dropped if it does not align with the repository's direction. Before opening a pull request, please discuss with the maintainers in this issue thread.