Share to Social Button for Bluesky

I am pretty happy to see Bluesky take off. I’ve ranted many times on this blog about how I’m annoyed that my favorite social network began to devolve into some ugliness pre-Musk (I’d say 2016 is when it started getting really bad) but since the Musk takeover, it’s just been awful.

However I love the idea of what that service can be. I’ve enjoyed Mastodon but understand the friction for non-technical folks. That’s ok, some friction can be good. Bluesky seems to fit this really neat place of “very accessible for every day folks” with “technical features if you want them”.

I like the simple “share to social” buttons on sites so I made one for Bluesky. There are 2 links I used to get this all built out. The first is the Bluesky docs for the Action Intent Links. https://docs.bsky.app/docs/advanced-guides/intent-links. The feature itself is quite simple. Basically this link, “https://bsky.app/intent/compose” along with a text query parameter will compose a post for you. Here is an example.

https://bsky.app/intent/compose?text=HelloWorld

That should open Bluesky and compose a “HelloWorld” post.

However, that doesn’t really get us all the way there. So when referring to Chris Pieschmann’s post on the topic, I noticed he set up his link using JavaScript, which seemed pretty smart. If you wanted to make this a component to use on every page, you’d want to grab the URL of the page you are on and use that as a variable to actually set the link in the share button. I didn’t do that for the CodePen but I am setting the link with JavaScript. Since I used CodePen, I also did not set the OpenGraph values on the page itself…because it’s not my site. But it is pulling those values to create the card.

Here is the pen.

See the Pen Share to BlueSky by Andrew O’Connor (@AndrewOnTheWeb) on CodePen.

This functionality can be as basic or as fancy as you desire it to be. I appreciate Bluesky’s approach on this.