Free Social Share Buttons Widget for Websites

A lightweight share bar that lets visitors post your page to X, Facebook, LinkedIn, Pinterest, or email, plus a copy-link button with instant feedback. Ideal for blogs, news sites, and small businesses that want more reach without heavy plugins. Paste one script tag where you want the buttons and it renders inline — no libraries, no accounts.

Embed this widget

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.

<script src="https://hayneslab.dev/widgets/social-share-buttons.js" data-hl-url="https://hayneslab.dev" data-hl-title="haynes lab — websites, web apps & hosting that actually work" data-hl-style="buttons" async></script>
<!-- Free Social Share Buttons widget by haynes lab — https://hayneslab.dev/tools/widgets/social-share-buttons -->

<!-- Free Social Share Buttons widget by haynes lab — https://hayneslab.dev/tools/widgets/social-share-buttons -->
<script data-hl-url="https://hayneslab.dev" data-hl-title="haynes lab — websites, web apps & hosting that actually work" data-hl-style="buttons">
/*!
 * haynes lab — Social Share Buttons widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/social-share-buttons
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-social-share-buttons';
  var STYLE_ID = 'hlw-social-share-buttons-styles';
  var svgNS = 'http://www.w3.org/2000/svg';

  var NETWORKS = {
    x: {
      label: 'X',
      color: '#000000',
      url: function (u, t) { return 'https://twitter.com/intent/tweet?url=' + u + '&text=' + t; },
      icon: ['M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z']
    },
    facebook: {
      label: 'Facebook',
      color: '#1877f2',
      url: function (u) { return 'https://www.facebook.com/sharer/sharer.php?u=' + u; },
      icon: ['M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z']
    },
    linkedin: {
      label: 'LinkedIn',
      color: '#0a66c2',
      url: function (u) { return 'https://www.linkedin.com/sharing/share-offsite/?url=' + u; },
      icon: ['M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z']
    },
    pinterest: {
      label: 'Pinterest',
      color: '#e60023',
      url: function (u, t) { return 'https://pinterest.com/pin/create/button/?url=' + u + '&description=' + t; },
      icon: ['M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.367 18.62 0 12.017 0z']
    },
    email: {
      label: 'Email',
      color: '#4b5563',
      url: function (u, t) { return 'mailto:?subject=' + t + '&body=' + u; },
      icon: ['M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5zm2.3 0 7.7 6.2L19.7 5H4.3zM20 7.1l-8 6.4-8-6.4V19h16V7.1z']
    }
  };

  var COPY_ICON = ['M10.6 13.4a1 1 0 0 0 1.4 1.4l4-4a3.5 3.5 0 0 0-4.95-4.95l-2.2 2.2a1 1 0 0 0 1.42 1.42l2.2-2.2a1.5 1.5 0 0 1 2.12 2.12l-4 4z', 'M13.4 10.6a1 1 0 0 0-1.4-1.4l-4 4a3.5 3.5 0 0 0 4.95 4.95l2.2-2.2a1 1 0 0 0-1.42-1.42l-2.2 2.2a1.5 1.5 0 0 1-2.12-2.12l4-4z'];
  var CHECK_ICON = ['M9.55 15.85 5.7 12l-1.4 1.4 5.25 5.25L20.5 7.7 19.1 6.3z'];

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/social-share-buttons.js"]');
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var css =
      '.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
      '.' + PREFIX + ' { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0;' +
      ' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
      ' font-size: 14px; line-height: 1.4; color: #1f2937; }' +
      '.' + PREFIX + '__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;' +
      ' border: 0; border-radius: 999px; cursor: pointer; padding: 0;' +
      ' font-family: inherit; font-size: 13px; font-weight: 600; color: #ffffff;' +
      ' background: var(--hlw-net); transition: opacity 0.15s ease; }' +
      '.' + PREFIX + '__btn:hover { opacity: 0.85; }' +
      '.' + PREFIX + '__btn:focus-visible { outline: 2px solid var(--hlw-net); outline-offset: 2px; }' +
      '.' + PREFIX + '--icons .' + PREFIX + '__btn { width: 38px; height: 38px; }' +
      '.' + PREFIX + '--buttons .' + PREFIX + '__btn { padding: 9px 16px; }' +
      '.' + PREFIX + '__btn svg { display: block; fill: currentColor; }' +
      '.' + PREFIX + '__btn--copy { background: #f3f4f6; color: #374151; }' +
      '.' + PREFIX + '__btn--copy:hover { background: #e5e7eb; opacity: 1; }' +
      '.' + PREFIX + '__btn--copy:focus-visible { outline-color: #9ca3af; }' +
      '.' + 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; }';
    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;
  }

  function icon(paths, size) {
    var svg = document.createElementNS(svgNS, 'svg');
    svg.setAttribute('viewBox', '0 0 24 24');
    svg.setAttribute('width', String(size));
    svg.setAttribute('height', String(size));
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
    paths.forEach(function (d) {
      var p = document.createElementNS(svgNS, 'path');
      p.setAttribute('d', d);
      svg.appendChild(p);
    });
    return svg;
  }

  function logoSvg() {
    var svg = document.createElementNS(svgNS, '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(svgNS, '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 parseNetworks(raw) {
    if (!raw) return ['x', 'facebook', 'linkedin', 'pinterest', 'email'];
    var list = raw.split(',').map(function (s) { return s.trim().toLowerCase(); }).filter(function (s) {
      return Object.prototype.hasOwnProperty.call(NETWORKS, s);
    });
    if (!list.length) {
      console.warn('[haynes lab social-share-buttons] data-hl-networks has no valid networks (x, facebook, linkedin, pinterest, email). Using defaults.');
      return ['x', 'facebook', 'linkedin', 'pinterest', 'email'];
    }
    return list;
  }

  function copyText(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      return navigator.clipboard.writeText(text);
    }
    return new Promise(function (resolve, reject) {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand('copy') ? resolve() : reject(new Error('copy failed'));
      } catch (e) { reject(e); }
      document.body.removeChild(ta);
    });
  }

  function build(script) {
    var pageUrl = script.getAttribute('data-hl-url') || window.location.href;
    var pageTitle = script.getAttribute('data-hl-title') || document.title || pageUrl;
    var style = script.getAttribute('data-hl-style') === 'buttons' ? 'buttons' : 'icons';
    var networks = parseNetworks(script.getAttribute('data-hl-networks'));

    var encUrl = encodeURIComponent(pageUrl);
    var encTitle = encodeURIComponent(pageTitle);

    injectStyles();

    var root = el('div', PREFIX + ' ' + PREFIX + '--' + style);
    root.setAttribute('role', 'group');
    root.setAttribute('aria-label', 'Share this page');

    networks.forEach(function (key) {
      var net = NETWORKS[key];
      var btn = el('button', PREFIX + '__btn');
      btn.type = 'button';
      btn.style.setProperty('--hlw-net', net.color);
      btn.setAttribute('aria-label', 'Share on ' + net.label);
      btn.appendChild(icon(net.icon, 18));
      if (style === 'buttons') btn.appendChild(el('span', null, net.label));
      btn.addEventListener('click', function () {
        window.open(net.url(encUrl, encTitle), '_blank', 'noopener,width=600,height=540');
      });
      root.appendChild(btn);
    });

    var copyBtn = el('button', PREFIX + '__btn ' + PREFIX + '__btn--copy');
    copyBtn.type = 'button';
    copyBtn.setAttribute('aria-label', 'Copy link to this page');
    var copyIcon = icon(COPY_ICON, 18);
    copyBtn.appendChild(copyIcon);
    if (style === 'buttons') copyBtn.appendChild(el('span', null, 'Copy link'));
    var resetTimer = null;
    copyBtn.addEventListener('click', function () {
      copyText(pageUrl).then(function () {
        copyBtn.setAttribute('aria-label', 'Link copied');
        if (copyIcon.parentNode) copyBtn.replaceChild(icon(CHECK_ICON, 18), copyIcon);
        var label = copyBtn.querySelector('span');
        if (label) label.textContent = 'Copied!';
        clearTimeout(resetTimer);
        resetTimer = setTimeout(function () {
          copyBtn.setAttribute('aria-label', 'Copy link to this page');
          copyIcon = icon(COPY_ICON, 18);
          copyBtn.replaceChild(copyIcon, copyBtn.firstChild);
          if (label) label.textContent = 'Copy link';
        }, 2000);
      }).catch(function (e) {
        console.warn('[haynes lab social-share-buttons] Could not copy link.', e);
      });
    });
    root.appendChild(copyBtn);

    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-share-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-share-buttons] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

  if (document.body) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();

</script>

Configuration

Every option is an attribute on the script tag — the same attributes the customizer above exposes. All attributes are optional unless marked required — defaults apply when omitted.

Attribute	Default	Description
`data-hl-url`	(current page URL)	The URL visitors share. Defaults to the page the widget is on; set it to share a canonical or campaign link instead.
`data-hl-title`	(current page title)	Text prefilled as the post title or email subject. Defaults to the page title.
`data-hl-networks`	"x,facebook,linkedin,pinterest,email"	Comma-separated list of networks to show, in order. Unknown names are ignored.
`data-hl-style`	"icons"	"icons" renders compact round icon buttons; "buttons" adds the network name next to each icon.

Frequently asked questions

How do I install the social share buttons?

Copy the embed snippet and paste it where you want the buttons to appear — the bar renders inline at that spot. With no attributes set, it shares the current page URL and title automatically.

How do I choose which networks appear?

Set data-hl-networks to a comma-separated list like "x,linkedin,email" — only those networks render, in that order. Use data-hl-style="buttons" if you want text labels next to the icons instead of icon-only circles.

Does it work on WordPress, Shopify, or Squarespace?

Yes. The widget is a single dependency-free vanilla JS file, so it runs anywhere you can paste a script tag — a WordPress Custom HTML block, a Shopify theme template, Squarespace code injection, Webflow, or plain HTML.

More free widgets

Marketing & Social

Need a custom widget?

We build custom widgets, integrations, and whole products. Tell us what your site needs and we'll scope it.

Get in Touch

Free Social Share Buttons Widget