A Tiny Share Bar That Quietly Boosts Your Traffic (and How to Add It)

Learning

8 Oct

When a reader finishes a blog post and thinks “I should share this,” you win. A simple share bar removes friction at that exact moment, turning good content into free distribution across Facebook, LinkedIn, and X, or letting the reader copy the link instantly.

That’s what the Forever Callie Media Share Bar does: zero libraries, tiny footprint, accessible, fast to load, and easy to restyle.

Why this matters

More reach, same content. Sharing buttons lift secondary traffic without paid media.
No heavy widgets. Third-party share scripts can add 100–300KB, tracking, and layout shifts. This is plain HTML/CSS/JS—tiny and private.
Brand-consistent. Inline SVG icons inherit your styles; no mismatched iframes or external styles.
Accessible and safe. Buttons have aria-labels; external links use rel="noopener".

The code (auto-fills your URL and title)

Drop this anywhere in your post (or page) and it will detect the current URL and title automatically.

<div class="fc-share" data-fc-share>
<span class="fc-share__label">Share</span>

<a class="fc-share__btn" data-network="facebook"
href="#" target="_blank" aria-label="Share on Facebook" rel="noopener">
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
<path d="M22.675 0h-21.35C.597 0 0 .597 0 1.326v21.348C0 23.403.597 24 1.326 24h11.494v-9.294H9.691V11.01h3.129V8.414c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.795.143v3.24l-1.918.001c-1.505 0-1.797.716-1.797 1.765v2.314h3.587l-.467 3.696h-3.12V24h6.116C23.403 24 24 23.403 24 22.674V1.326C24 .597 23.403 0 22.675 0z"/>
</svg>
</a>

<a class="fc-share__btn" data-network="linkedin"
href="#" target="_blank" aria-label="Share on LinkedIn" rel="noopener">
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
<path d="M19 0h-14C2.24 0 0 2.24 0 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5V5c0-2.76-2.24-5-5-5zM7.12 20.45H3.56V9h3.56v11.45zM5.34 7.54a2.07 2.07 0 110-4.14 2.07 2.07 0 010 4.14zm15.11 12.91h-3.56v-5.61c0-1.34-.03-3.06-1.87-3.06-1.88 0-2.17 1.47-2.17 2.97v5.7H9.29V9h3.42v1.56h.05c.48-.9 1.66-1.85 3.42-1.85 3.66 0 4.33 2.41 4.33 5.54v6.2z"/>
</svg>
</a>

<a class="fc-share__btn" data-network="x"
href="#" target="_blank" aria-label="Share on X" rel="noopener">
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
<path d="M18.36 0H22L14.08 9.41 23.12 24h-7.09l-5.54-8.69L4.97 24H1.33l8.44-10.24L.88 0h7.25l5 7.83L18.36 0zM17.12 21.64h1.97L7.05 2.21H5.02l12.1 19.43z"/>
</svg>
</a>

<button class="fc-share__btn" data-action="copy" aria-label="Copy link">
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
<path d="M3.9 12a5.1 5.1 0 015.1-5.1h3v2H9a3.1 3.1 0 100 6.2h3v2H9a5.1 5.1 0 01-5.1-5.1zm6-1h4v2h-4v-2zm5-4h-3v-2h3a5.1 5.1 0 010 10.2h-3v-2h3a3.1 3.1 0 000-6.2z"/>
</svg>
</button>
</div>
<style>
.fc-share {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.5rem 0;
color: #111; /* icons inherit this via currentColor */
}
.fc-share__label {
font-weight: 600;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: .02em;
}
.fc-share__btn {
background: transparent;
border: none;
padding: 0.25rem;
cursor: pointer;
display: inline-flex;
align-items: center;
line-height: 1;
transition: transform .12s ease, opacity .2s ease;
}
.fc-share__btn:hover { transform: scale(1.06); opacity: .8; }
.fc-share__btn:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
</style>
<script>
(function () {
var root = document.querySelector('[data-fc-share]');
if (!root) return;
var url = encodeURIComponent(window.location.href);
var title = encodeURIComponent(document.title);
var map = {
facebook: 'https://www.facebook.com/sharer/sharer.php?u=' + url,
linkedin: 'https://www.linkedin.com/sharing/share-offsite/?url=' + url,
x: 'https://twitter.com/intent/tweet?url=' + url + '&text=' + title
};
root.querySelectorAll('[data-network]').forEach(function (a) {
var net = a.getAttribute('data-network');
if (map[net]) a.setAttribute('href', map[net]);
});
var copyBtn = root.querySelector('[data-action="copy"]');
if (copyBtn) {
copyBtn.addEventListener('click', function () {
var permalink = window.location.href;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(permalink).then(function () {
copyBtn.setAttribute('aria-label', 'Link copied');
});
} else {
var temp = document.createElement('input');
temp.value = permalink;
document.body.appendChild(temp);
temp.select();
document.execCommand('copy');
document.body.removeChild(temp);
}
});
}
})();
</script>

Icons use fill="currentColor" so they automatically match your text colour; change the whole bar’s colour by styling .fc-share { color: #000; }.

External links use rel="noopener" for security.
Buttons have aria-labels for screen readers.

How to add this to your Squarespace (7.1)

Edit your blog post.
Add a Code block where you want the share bar to appear.
Paste the entire snippet.
Save and test.
Tip: If your template strips <script> tags from Code blocks, place the <script> part in Settings → Advanced → Code Injection → Footer and leave the HTML/CSS in the Code block. The script auto-detects the bar via [data-fc-share].

Styling it to your brand

Change icon size by adjusting the width/height on the <svg>s (e.g., 18–24).
Change hover effect in .fc-share__btn:hover.
Want labels under icons? Wrap each <a> in a small <span class="fc-share__text">LinkedIn</span> and style with display:flex; flex-direction:column;.

Optional enhancements

UTM tags for share attribution (append &utm_source=linkedin&utm_medium=social_share).
Add more networks (e.g., WhatsApp on mobile: https://api.whatsapp.com/send?text=TITLE%20URL).
Event tracking with your analytics (add click listeners that push events to your dataLayer).

Troubleshooting

Buttons don’t open the right URL: Ensure JavaScript isn’t blocked. The auto-fill script sets the hrefs on load.
Icons not visible: Your theme may set color to match the background; set .fc-share { color: #111; }.
Script stripped: Some CMSes restrict scripts in rich text—use header/footer code injection for the <script> and keep the HTML/CSS in the post.

Why we built it this way

Performance first: Inline SVGs and no external libraries.
Privacy-respecting: No trackers from third-party share widgets.
Accessible by default: Labels, focus states, and keyboard-friendly.

Callie Poston

I am the founder of Forever Callie Media, A Content Creation Agency in Essex England. My main focus is to make sure small independent businesses get professional marketing that makes them stand out from the crowd.

https://forevercallie.com