Code Samples for Top Platforms
Here are specific snippets for the most common platforms, ordered by popularity.
1. WordPress
Platform Type: Self-Hosted CMS
Where to Paste: In your theme's single.php or content-single.php file.
<?php
// WordPress uses template tags to get the post URL and title.
$share_url = urlencode(get_permalink());
$share_text = urlencode(get_the_title());
$sharelette_link = "https://sharelette.cloudbreak.app/?url=" . $share_url . "&text=" . $share_text;
?>
<a href="<?php echo $sharelette_link; ?>" style="display:inline-block; padding:12px 20px; background-color:#007bff; color:#ffffff; border-radius:5px; font-weight:bold; text-decoration:none; text-align:center;">
Share this Post
</a>
2. Next.js (React)
Platform Type: JavaScript Framework
Where to Paste: Create this as a reusable component (e.g., components/ShareletteButton.js).
// components/ShareletteButton.js
'use client'; // Ensures this component runs on the client-side
import { useState, useEffect } from 'react';
export default function ShareletteButton({ title }) {
const [shareLink, setShareLink] = useState('');
// The link is constructed on the client to get the final window URL.
useEffect(() => {
const pageUrl = window.location.href;
const pageTitle = title || document.title;
const encodedUrl = encodeURIComponent(pageUrl);
const encodedText = encodeURIComponent(pageTitle);
setShareLink(`https://sharelette.cloudbreak.app/?url=${encodedUrl}&text=${encodedText}`);
}, [title]);
if (!shareLink) return null; // Or a loading placeholder
return (
<a href={shareLink} style={{display:'inline-block', padding:'12px 20px', backgroundColor:'#007bff', color:'#ffffff', borderRadius:'5px', fontWeight:'bold', textDecoration:'none', textAlign:'center'}}>
Share this Post
</a>
);
}
3. Ghost
Platform Type: Hosted/Self-Hosted CMS
Where to Paste: In your theme's post.hbs file.
{{!-- Ghost uses Handlebars with helpers like 'url' and 'encode'. --}}
{{#post}}
<a href="https://sharelette.cloudbreak.app/?url={{url absolute="true"}}&text={{encode title}}" style="display:inline-block; padding:12px 20px; background-color:#007bff; color:#ffffff; border-radius:5px; font-weight:bold; text-decoration:none; text-align:center;">
Share this Post
</a>
{{/post}}
4. Hugo
Platform Type: Static Site Generator
Where to Paste: In your theme's content layout file (e.g., layouts/_default/single.html).
<!-- Hugo provides the .Permalink and .Title variables for each page. -->
<a href="https://sharelette.cloudbreak.app/?url={{ .Permalink }}&text={{ .Title | urlquery }}" style="display:inline-block; padding:12px 20px; background-color:#007bff; color:#ffffff; border-radius:5px; font-weight:bold; text-decoration:none; text-align:center;">
Share this Post
</a>
Other Platforms & Frameworks
Jekyll
Platform Type: Static Site Generator
Where to Paste: In your post layout file (e.g., _layouts/post.html).
<!-- Jekyll uses Liquid templating. The url_encode filter is crucial. -->
<a href="https://sharelette.cloudbreak.app/?url={{ page.url | absolute_url }}&text={{ page.title | url_encode }}" style="display:inline-block; padding:12px 20px; background-color:#007bff; color:#ffffff; border-radius:5px; font-weight:bold; text-decoration:none; text-align:center;">
Share this Post
</a>
Nuxt.js (Vue)
Platform Type: JavaScript Framework
Where to Paste: Create a reusable component (e.g., components/ShareletteButton.vue).
<!-- components/ShareletteButton.vue -->
<template>
<a v-if="shareLink" :href="shareLink" style="display:inline-block; padding:12px 20px; background-color:#007bff; color:#ffffff; border-radius:5px; font-weight:bold; text-decoration:none; text-align:center;">
Share this Post
</a>
</template>
<script>
export default {
props: { title: { type: String, default: '' } },
data() { return { shareLink: '' }; },
mounted() {
const pageUrl = window.location.href;
const pageTitle = this.title || document.title;
this.shareLink = `https://sharelette.cloudbreak.app/?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(pageTitle)}`;
}
};
</script>
Eleventy (11ty)
Platform Type: Static Site Generator
Where to Paste: In a Liquid (.liquid) or Nunjucks (.njk) template.
{# The 'page' object holds the URL; front matter data holds the title. #}
<a href="https://sharelette.cloudbreak.app/?url={{ page.url | url | absoluteUrl(eleventy.server.url) }}&text={{ title | url_encode }}" style="display:inline-block; padding:12px 20px; background-color:#007bff; color:#ffffff; border-radius:5px; font-weight:bold; text-decoration:none; text-align:center;">
Share this Post
</a>
Website Builders (Webflow, Squarespace, etc.)
For platforms that are more UI-driven, you'll add a button and use their interface to set the link and styling rather than pasting code.
- Add a Button: Drag a Button element onto your blog post template page.
- Set the Link: In the button's settings, set the link URL. You will need to construct it using the platform's dynamic content/CMS variables. The structure will be:
https://sharelette.cloudbreak.app/?url= + (variable for Post URL) + &text= + (variable for Post Title)
- Apply Styling: Use the platform's built-in style editor to set the button's appearance.
