A share button for the open social web

One script tag. Zero dependencies. Share to ATProto clients, Fediverse, and more.

Add a share button to your site that lets readers pick their destination: Bluesky, other ATProto clients, Mastodon or any Fediverse instance, traditional social networks, or just copy to clipboard. Their choice is remembered automatically. If they sign in with their ATProto handle, the preference syncs across every site running atShare — stored on their own server, not yours.

The component above is a live <atshare-selector>. Here's the markup:

<atshare-selector
  url="https://atshare.social"
  text="Check out atShare:">
</atshare-selector>

<script type="module"
  src="https://atshare.social/dist/atshare-selector.js">
</script>

Quick Start

Copy this snippet into your page's HTML, anywhere you want a share button:

<atshare-selector url="https://yoursite.com/post">
</atshare-selector>

<script type="module"
  src="https://atshare.social/dist/atshare-selector.js">
</script>

Change the url to the page you want shared.
Done. Your readers can now share to Bluesky, Mastodon, and other supported destinations.

<atshare-selector
  url="https://yoursite.com/post/123"
  text="Check this out:"
  label="Share this post">
</atshare-selector>

<script type="module"
  src="https://atshare.social/dist/atshare-selector.js">
</script>

Attribute	Required	Default	Description
`url`	yes	current page URL	The URL to share
`text`	no	--	Text prepended to the URL
`label`	no	`"Share"`	Button label

ES module, ~19 KB. Shadow DOM encapsulated — styles don't leak in or out. Works with any framework or vanilla HTML.

Theming

atShare picks up your site's look automatically, or you can customize it with a few CSS variables to match your brand.

Default

Dark

Custom

Property	Default	Description
`--atshare-bg`	`#ffffff`	Background
`--atshare-bg-hover`	`#f8fafc`	Hover background
`--atshare-color`	`#0f172a`	Text color
`--atshare-border`	`#e2e8f0`	Border & dividers
`--atshare-accent`	`#1d4ed8`	Accent (buttons, checkmark)
`--atshare-radius`	`6px`	Border radius
`--atshare-font-size`	`14px`	Font size

Example dark theme:

atshare-selector {
  --atshare-bg: #1e293b;
  --atshare-bg-hover: #334155;
  --atshare-color: #f8fafc;
  --atshare-border: #334155;
  --atshare-accent: #60a5fa;
}

Remembers your readers' favorite network

Automatic: When a reader shares, their choice is remembered on that device. Next time, their network shows a checkmark.
Sign in to sync: Readers can sign in with their ATProto handle (e.g. a Bluesky account) to sync their preference across every site running atShare. One-time setup, works everywhere.
Private by design: No account on your site needed. No tracking. The preference is stored on the reader's own AT Protocol server (PDS), not yours.

Preference System

Local layer: Every share action writes to localStorage key atshare.preference with { primaryNetwork, networks[] }. Automatic, no sign-in required.

AT Protocol layer: OAuth sign-in writes a social.atshare.preference record to the user's PDS at rkey self. Any site embedding atShare can read it back via public getRecord.

Cross-origin: Authenticated API calls route through a hidden iframe proxy on atshare.social via postMessage, avoiding third-party cookie restrictions. The OAuth popup sends the session token back to the embedding page via postMessage; the server accepts Bearer tokens alongside cookies.