Sharing buttons for Bluesky

Bluesky's action intent links can be used to create "Share on Bluesky" links and buttons. They currently support one intention, which is composing a post, via the compose endpoint.

It's all delightfully simple stuff. From a webpage, create a link to https://bsky.app/intent/compose. And that's it. Apps can use bluesky://intent/compose.

If you want to prepopulate the post composer (which you usually do!) send the initial text along on the URL as a query using ?text=

This text needs to be percent-encoded (URL-encoded). Here's an example:

<a href="https://bsky.app/intent/compose?text=I%20reccommend20%https%3//theplan.co.uk">Share this on Bluesky</a>

And here's what it does when Bluesky is loaded:

If you need help encoding, there are lots of services out there.

Set and forget Bluesky sharing

The share link really needs to send the current page URL to the composer to be practically useful. You could manually write out (and percent-encode) a link to the current webpage every time you add a share link to a page, but that's not really practical, is it?

• Even if you are pulling in a pre-written snippet for the share link from your own clippings file, you need to add/edit the URL each time
• If the share link is part of a template in your CMS it won't be editable

So what you need to do is to get the URL of the current page and add it to the Bluesky compose URL. Here's one way to do that.

The link

Your sharing link needs to include the text query, so include some placeholder text for the post, for example:

<a href="https://bsky.app/intent/compose?text=I%20found%20a%20great%20resource%20here">Share on Bluesky</a>

The JavaScript

The JavaScript will get the URL of the current page (currentUrl) and add it to the Bluesky compose URL. Every on-page link to https://bsky.app/intent/compose will have the URL added. No other URLs will be affected.

This script needs to go at the end of your page, just before the closing </body> tag.

<script>
    const shareLinks = document.querySelectorAll('a[href^="https://bsky.app/intent/compose"]');
    const currentUrl = window.location.href;
    const encodedUrl = encodeURIComponent(currentUrl);
    shareLinks.forEach(shareLink => {
        shareLink.href = `${shareLink.href}+${encodedUrl}`;
    });
</script>

Where can you go from here?

A common pattern for sharing links is to populate the suggested message with post titles, excerpts, or the name of the author... and you'll be able to pull these out and add them to the JavaScript. So start building out that percent-encoded text string with content from your page. The Bluesky share link itself is simple—it's down to you to make it powerful.

I'd love you to say "Hi" on Bluesky—@jonhickman