Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<!-- Free Social Follow Buttons widget by haynes lab — https://hayneslab.dev/tools/widgets/social-follow-buttons -->
<script data-hl-linkedin="https://www.linkedin.com/company/hayneslab" data-hl-x="https://x.com/hayneslab" data-hl-instagram="https://www.instagram.com/hayneslab" data-hl-youtube="https://www.youtube.com/@hayneslab" data-hl-github="https://github.com/hayneslab">
/*!
* haynes lab — Social Follow Buttons widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/social-follow-buttons
*/
(function () {
'use strict';
var PREFIX = 'hlw-social-follow-buttons';
var STYLE_ID = 'hlw-social-follow-buttons-styles';
var SVG_NS = 'http://www.w3.org/2000/svg';
var NETWORKS = [
{ key: 'linkedin', attr: 'data-hl-linkedin', label: 'LinkedIn' },
{ key: 'x', attr: 'data-hl-x', label: 'X' },
{ key: 'instagram', attr: 'data-hl-instagram', label: 'Instagram' },
{ key: 'facebook', attr: 'data-hl-facebook', label: 'Facebook' },
{ key: 'youtube', attr: 'data-hl-youtube', label: 'YouTube' },
{ key: 'github', attr: 'data-hl-github', label: 'GitHub' }
];
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/social-follow-buttons.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }' +
'.' + PREFIX + '__link { display: inline-flex; align-items: center; justify-content: center;' +
' width: 40px; height: 40px; border-radius: 50%; background: var(--hlw-accent); color: #ffffff;' +
' text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; }' +
'.' + PREFIX + '__link:hover { transform: translateY(-2px); opacity: 0.88; }' +
'.' + PREFIX + '__link:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__link svg { display: block; width: 20px; height: 20px; fill: currentColor; }' +
'.' + PREFIX + '__credit { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;' +
' font-size: 11px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
'@media (max-width: 480px) { .' + PREFIX + '__link { width: 36px; height: 36px; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
// Simple brand-ish glyphs (not official assets). Each returns an <svg> node.
function networkSvg(key) {
var svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function path(d) {
var p = document.createElementNS(SVG_NS, 'path');
p.setAttribute('d', d);
svg.appendChild(p);
}
if (key === 'linkedin') {
path('M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05C20.6 8.65 21 11.2 21 14.1V21h-4v-6.1c0-1.45-.03-3.32-2.02-3.32-2.03 0-2.34 1.58-2.34 3.21V21H9z');
} else if (key === 'x') {
path('M18.9 2H22l-6.77 7.74L23.2 22h-6.23l-4.88-6.38L6.5 22H3.34l7.24-8.28L2.8 2h6.39l4.41 5.83L18.9 2zm-1.1 18.1h1.72L7.7 3.8H5.85L17.8 20.1z');
} else if (key === 'instagram') {
path('M12 2c2.72 0 3.04.01 4.11.06 2.8.13 4.09 1.45 4.22 4.22.05 1.07.06 1.39.06 4.11s-.01 3.04-.06 4.11c-.13 2.77-1.42 4.09-4.22 4.22-1.07.05-1.39.06-4.11.06s-3.04-.01-4.11-.06c-2.8-.13-4.09-1.45-4.22-4.22C3.62 15.04 3.61 14.72 3.61 12s.01-3.04.06-4.11C3.8 5.12 5.09 3.8 7.89 3.67 8.96 3.62 9.28 3.61 12 3.61V2zm0 1.8c-2.67 0-2.99.01-4.04.06-1.92.09-2.95 1.02-3.04 3.04-.05 1.05-.06 1.37-.06 4.04s.01 2.99.06 4.04c.09 2.02 1.12 2.95 3.04 3.04 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c1.92-.09 2.95-1.02 3.04-3.04.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.09-2.02-1.12-2.95-3.04-3.04-1.05-.05-1.37-.06-4.04-.06zm0 3.06a5.14 5.14 0 1 1 0 10.28 5.14 5.14 0 0 1 0-10.28zm0 8.48a3.34 3.34 0 1 0 0-6.68 3.34 3.34 0 0 0 0 6.68zm6.55-8.68a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z');
} else if (key === 'facebook') {
path('M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.45h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z');
} else if (key === 'youtube') {
path('M23.5 7.2a3.02 3.02 0 0 0-2.12-2.14C19.5 4.55 12 4.55 12 4.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 7.2 31.6 31.6 0 0 0 0 12a31.6 31.6 0 0 0 .5 4.8 3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14A31.6 31.6 0 0 0 24 12a31.6 31.6 0 0 0-.5-4.8zM9.6 15.6V8.4l6.27 3.6-6.27 3.6z');
} else if (key === 'github') {
path('M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55 0-.27-.01-1.17-.02-2.12-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.75 2.69 1.25 3.34.95.1-.74.4-1.25.72-1.53-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.78 0c2.21-1.49 3.18-1.18 3.18-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.42-2.7 5.39-5.26 5.68.41.35.78 1.05.78 2.12 0 1.53-.01 2.76-.01 3.14 0 .3.2.67.8.55A11.52 11.52 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z');
}
return svg;
}
function logoSvg() {
var svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(SVG_NS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
function build(script) {
var accent = script.getAttribute('data-hl-accent') || '#f97316';
var links = [];
NETWORKS.forEach(function (n) {
var url = script.getAttribute(n.attr);
if (url && /^https?:\/\//i.test(url)) {
links.push({ label: n.label, url: url, key: n.key });
}
});
if (!links.length) {
console.warn('[haynes lab social-follow-buttons] No network URLs set (data-hl-linkedin, data-hl-x, data-hl-instagram, data-hl-facebook, data-hl-youtube, data-hl-github). Nothing rendered.');
return;
}
injectStyles();
var root = el('nav', PREFIX);
root.setAttribute('aria-label', 'Follow us on social media');
root.style.setProperty('--hlw-accent', accent);
links.forEach(function (l) {
var a = el('a', PREFIX + '__link');
a.href = l.url;
a.target = '_blank';
a.rel = 'noopener';
a.setAttribute('aria-label', 'Follow us on ' + l.label);
a.appendChild(networkSvg(l.key));
root.appendChild(a);
});
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/social-follow-buttons';
credit.target = '_blank';
credit.rel = 'noopener';
root.appendChild(credit);
if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
script.insertAdjacentElement('afterend', root);
} else {
document.body.appendChild(root);
}
}
function init() {
var script = findScript();
if (!script) {
console.warn('[haynes lab social-follow-buttons] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>