Page Share

Share buttons that stick to a corner of your page. Unlike the usual ones, they set no cookies and send no data anywhere. You choose the corner, whether they sit open or behind a button, and which platforms appear.

The problem this solves

Share buttons used to come from services like AddThis and ShareThis. They were free because they were not really share buttons. Each one loaded code from another company onto your page, set cookies on your visitors, and reported back what those visitors were reading. AddThis shut down in 2023.

That model has three costs. It slows your pages, because every visit loads someone else's code. It creates a privacy disclosure you have to make. And it hands data about your audience to a company that is not you.

None of that is necessary. A share button is just a link. When someone clicks the X button, they go to an address that opens X with your headline and page address already filled in. That is all it has ever needed to be.

This does exactly that and nothing else. No cookies, no tracking, no data sent anywhere, and after the first visit no network request at all.

What it looks like

Captured from a page carrying the widget. The colours come from the host page through custom properties, which is why these match this site rather than shipping a look of their own.

An article page with a single round share button resting in the bottom right corner.
expandable, at rest One control, 44 by 44 pixels. Covers almost nothing until it is asked to.
The same page with the share panel open, showing X, LinkedIn, Reddit and copy link stacked above the trigger, with the first control focused.
expandable, open Opens away from the corner. Focus lands on the first control, which is the ring visible in this capture.
The same page with the share controls always visible as a vertical stack in the bottom right corner.
expanded, vertical Nothing to discover and nothing to click first.
The share controls as a labelled horizontal row pinned below the site header in the top right.
expanded, horizontal, labelled Top right, with an offset clearing the sticky header. Labels cost width and earn clicks.
Six labelled share controls stacked in the bottom left corner of the page.
six platforms, bottom left The left corner is usually free. Bottom right is where chat widgets, cookie banners and back to top buttons already live.
The same widget on a narrow phone viewport, rendered as a full width bar fixed along the bottom edge.
mobile Any corner becomes a bottom bar under 640 pixels. A vertical rail is unusable at 390, and bottom placements clear the home indicator.

Set it up

One line, pasted just before the closing </body> tag. Most CMSs have a footer scripts field for exactly this. Change the four values to whatever you want, or delete them to accept the defaults.

<script src="https://cdn.jakelabate.com/page-share/v1/share.js"
        data-position="bottom-right"
        data-mode="expandable"
        data-orientation="vertical"
        data-platforms="x,linkedin,reddit,copy"
        defer></script>

Nothing else is required. It works out what to share by reading your page: the address from your canonical tag, and the headline from your Open Graph title, falling back to your h1 and then the page title. You do not have to tell it anything about the page it is on.

If your pages have good Open Graph tags, this is already correct. If they do not, that is worth fixing anyway, and the Open Graph service does it.

Options

AttributeValues
data-positionbottom-right default, bottom-left, top-left, top-right.
data-modeexpandable default, or expanded to show every control at rest.
data-orientationvertical default, or horizontal.
data-platformsComma separated: x, linkedin, facebook, reddit, bluesky, threads, whatsapp, telegram, hackernews, pinterest, email, copy, native.
data-labelson to show text beside each icon.
data-offsetDistance from the edge in pixels, 0 to 400. Default 24. This is how you clear a sticky header.
data-mobilebar default, full width along the bottom. Or hide, or inherit to keep the desktop placement.
data-url, data-title, data-imageOverride what gets shared.
data-labelAccessible name for the trigger. Default is "Share this page".

You cannot break it with a typo. A misspelled corner, an unrecognised mode, a platform name that does not exist: each is ignored and the default is used instead. The buttons still appear.

What it costs your site

One small file, once. The address contains a version number and the contents of a version never change, so a browser downloads it on the first visit and then reuses its copy. On every visit after that, it makes no network request at all.

Nothing is measured and nothing is sent. When the page loads, the script reads your headline and address out of tags already in the page and builds the share links from them. There is no request to me, no request to X or LinkedIn, and no cookie set. Nothing here needs a consent banner entry.

It also cannot break your design, and your design cannot break it. The buttons live in a sealed container, so your site's styling rules do not reach inside and nothing inside reaches out. Colours are the one deliberate exception, so you can still match your brand.

Why this needs JavaScript when a link would do

Technical reasoning. Skip unless you care why it is built this way.

A row of share buttons that is always visible really is just a list of links, and could be plain markup you paste with no script at all.

Letting it collapse behind a single button changes that. A control that opens and closes owes people who do not use a mouse a real button, a state that screen readers can announce, focus that moves into the panel when it opens, Escape to close it again, and a click outside to dismiss. Doing that properly needs code. Since collapsing is one of the options, the script exists.

What it does not need is to phone home, and it does not.

Things worth knowing about the platforms

  • Facebook and LinkedIn ignore any headline you send them. Both go and read your page's Open Graph tags instead, so this does not bother sending text it knows will be thrown away. The practical consequence: if your share preview looks wrong on LinkedIn, no share button can fix it. Fix the tags on the page.
  • X moved address. The old twitter.com one still forwards, but a forward is an extra step for every person who clicks, so this points at the current one.
  • The phone share option hides itself when it cannot work. If you include native, which opens the phone's own share menu, it appears only on browsers that have one. A button that does nothing is worse than no button.
  • Copy link works everywhere, including on sites not yet served over HTTPS, where it falls back to an older method automatically.

Source

MIT licensed and self-hostable. The widget and the worker that serves it are both small enough to read in one sitting.

Share Buttons Should Not Cost Your Readers Anything

No third-party script, no cookies, nothing measured. If your current share widget cannot say that, it is worth replacing.