This blog now has comments!

That might not sound particularly impressive, since I think most people would consider "comments on blogs" to be a Solved Problem. But I decided to go about it in a bit of a different way - all the comments are fetched directly from Bluesky. And I think the ease with which I did that goes a long way to demonstrating the power of Bluesky's Open Network, and is possibly worth talking about a little bit.

Bluesky is completely open

When I say "Bluesky is completely open", I really mean it. You don't even need an API key to query the AppView. Combined with the excellent tooling that Bluesky provides meant that implementating this feature took about hour, from scratch. Granted, I've been working with the API for a while now, but I think that's still pretty impressive.

Here's the code I used to fetch the comments (slightly simplified for clarity):

1// pass it the URI of the post you want to fetch replies for
2export const CommentSection = async ({ uri }: { uri: string }) => {
3  if (!uri) return <p className="text-center">No comments</p>;
4
5  const agent = new BskyAgent({ service: "https://public.api.bsky.app" });
6  const response = agent.getPostThread({ uri });
7
8  const thread = response.data.thread;
9
10  if (!AppBskyFeedDefs.isThreadViewPost(data.thread)) {
11    return <p className="text-center">Could not find thread</p>;
12  }
13
14  if (!thread.replies || thread.replies.length === 0) {
15    return <p className="text-center">No comments yet</p>;
16  }
17
18  return (
19    <div className="space-y-8">
20      {thread.replies.map((reply) => {
21        // if the reply is blocked/deleted, skip it
22        if (!AppBskyFeedDefs.isThreadViewPost(reply)) return null;
23        return <Comment key={reply.post.uri} comment={reply} />;
24      })}
25    </div>
26  );
27};

In the actual implementation, I don't use BskyAgent in favour of using fetch directly, due to Next.js overriding the fetch function, but this version is a bit more readable and typesafe. And it's basically the same under the hood.

Simply make a <Comment /> component that renders a Bluesky post, and you're done! It's really that simple.

See my other blog post for a step-by-step guide on how to render a Bluesky post. My blog comments take it one step futher by rendering the replies recursively, to make a threaded comment section.

What this means

"The organization is a future adversary"
- Paul Frazee

Bluesky talks a lot about being "Billionaire-proof", and I think the open API is a critical part of that. Due to it's decentralised nature, it's not just open, it's "locked open" - Bluesky (the company) couldn't start locking off access even if they wanted to. This is in harsh contrast to X (formerly Twitter) turning off the free API, and making the paid API much more expensive, and Reddit suddenly charging 3rd party apps like Apollo $20 million a year for it's previously free API (instantly killing the 3rd party ecosystem).

This is critical to building trust in the platform among the developer community that Bluesky is trying to foster, and I think it's a big part of why Bluesky has seen an explosion of community projects. It's also a big part of why I'm so excited to be building on it. I don't have to worry that Bluesky will get bought out and "pull a Reddit" on me, because they literally can't. This matters, whether you want to add a little comment section to your blog, all the way up to building a full-fledged client.

I think this is also great for non-developers too. I completely stopped using Reddit when they killed Apollo, because the official app is garbage. That's not something you have to worry about with Bluesky, and it goes so much deeper than just the app. Every part of the platform can be swapped out, and that's a really powerful thing. We've watched platform after platform succumb to enshittification, and even if Bluesky (the company) follows suit, Bluesky (the community) doesn't have to.

This little comments section project - sure, it's pretty frivolous, but I love that Bluesky doesn't shy away from creativity. They want you to build cool things with what they've built. I think that's great.

Overall, I'm really optimistic about the future of Bluesky, and I'm excited to see what else is possible.

Let me know what you think in the all-new comments!

- Samuel (@mozzius.dev)

73 likes - 18 reposts

Comments

Comments are fetched directly from this post - reply there to add your own comment.

Rafael @rflrkn.de

So that means when I comment here under this BlueSky post, that comment will also be shown below the respective blog post?

1

0

11

Graysky ☁️ @graysky.app

yep!

2

1

11

Rafael @rflrkn.de

Oh, that's really cool!

0

0

8

handbrake.bsky.social @handbrake.bsky.social

ttttttttttttteeeest

0

0

1

Shreyan @shreyanjain.net

pretty nice! Just FYI @snarfed.org is also running a service to make this kind of thing simple for other blogs

2

1

7

Graysky ☁️ @graysky.app

Oh neat, I didn’t release the scope of that project tbh @rebelalliancebriefingroom.kailejohansen.us is this closer to what you’re looking for?

1

0

3

Rebel Alliance Briefing Room @rebelalliancebriefingroom.kailejohansen.us

Well yes in a way. My "blog" is just a webpage I maintain. I edit and post the HTML myself. I do not use a blog site. and it is more like a listing posted for my latest podcast episode with an outline of the podcast. https://rabr.kailejohansen.us to get an idea

1

0

1

Graysky ☁️ @graysky.app

Ah gotcha, I didn’t know if you were using Wordpress or something

1

0

2

Rebel Alliance Briefing Room @rebelalliancebriefingroom.kailejohansen.us

that is understandable, since I did use the word blog... I was just using it because it was part of the context of the post. I would want something that is generic, so I don't have to modify the main code every post, but I have each post get unique comments

0

0

1

Ryan @snarfed.org

Thanks, yes! Backfeed like this is deceptively difficult to do well. Congrats @graysky.app, we love seeing more independent implementations like this!

1

0

3

Ryan @snarfed.org

@graysky.app next step, likes and reposts and quotes! 😁

1

0

3

Graysky ☁️ @graysky.app

haha I thought about it but I already have enough trouble doing support for people logging in on one app, not sure I can do a second

0

0

2

Kyle (Federated) @kyle.stack.party

Testing out a comment from a small, self-hosted PDS

1

0

4

Graysky ☁️ @graysky.app

👀

0

0

0

Rebel Alliance Briefing Room @rebelalliancebriefingroom.kailejohansen.us

This is awesome stuff. so I just need to change the URI and my blog/webpage will pull the comments directly from bsky? " const response = agent.getPostThread({ uri }); " " I don't use BskyAgent in favour of using fetch directly... "

1

0

3

Graysky ☁️ @graysky.app

yeah, the URI is the identifier of the post that you want to display. I have another tutorial which goes into a lot more detail about how to do this. graysky.app/blog/2023-10...

1

0

3

Rebel Alliance Briefing Room @rebelalliancebriefingroom.kailejohansen.us

I will have to deep dive into this later, I skimmed it over. without a "client" how do I make this work for a blog/web post? I wonder if there could be an option when drafting a post that I click to paste a url that points to said blog post and with a bit of code on the blog it starts happening?

2

1

1

Graysky ☁️ @graysky.app

yeah this would definitely be possible. I'm using React/Next.js but you could also just do it in plain JavaScript too. @mary.my.id made a tool to embed a single post - you could definitely extend the concept to embed replies of a post instead bsky.app/profile/mary...

1

0

2

Rebel Alliance Briefing Room @rebelalliancebriefingroom.kailejohansen.us

I have seen Mary's option and I like it. I am excited to see all this around displaying and consuming bsky posts everwhere.

0

0

2

Rebel Alliance Briefing Room @rebelalliancebriefingroom.kailejohansen.us

hey @tokimeki.blue can we get this feature? option to capture comments for blog post. I embed my bsky post on web. use this feature to add comments to blog when the bsky post is replied to? not sure.. how would we get the did from bsky to blog? it would have to be entered manually?

2

0

0

🌈 TOKIMEKI Bluesky @tokimeki.blue

The embedding feature is not in our plans at this time, as it would essentially be better implemented as an official feature.

0

0

2

someone @someone814.bsky.social

Not sure if this is what you want, but maybe it helps: bluesky.lol

1

0

1

Rebel Alliance Briefing Room @rebelalliancebriefingroom.kailejohansen.us

Yes and no. Thank you for the kind thoughts. I want to make a post to blue sky that also is embedded on my website. Then use resolvers idea to port the replys to the bottom of that post. I also what the ability to embed my most recent profile posts to a box on my web page. I ask kindly

0

0

0

snaka @snaka.bsky.social

Bluesky のpostへのリプライがそのままブログへのコメントとして反映されるのかー 従来のブログパーツの埋め込みとは違った面白いAPIの使い方

0

0

2

Bossett @bossett.social

this is pretty cool 👀

0

0

2

Matti Sarjakoski @sinitaivas.msrjksk.fi

Very nice!

0

0

2

jack @jglypt.net

Wooohooooo

0

0

2

Kot @kot.pink

This is really cool! Especially Bsky having an open API

0

0

1

🍂 Jim Schofield 🍁 @jschof.dev

So cool. Reminds me of utterances utteranc.es

0

0

1

Monica Rose @monicarose.ca

This is great

0

0

1

Harald Klinke @harald-klinke.de

😎

0

0

1

Tim Aidley @tim.aidley.com

I wonder if it's possible to embed a reply box in the webpage that will submit a reply via Bluesky if you are logged in?

0

0

1

Mark Bennett 🏳️‍🌈🧑🏻‍💻🏃🏻 @markbennett.ca

It totally works! Comments straight from the Bluesky post replies. 🔥🔥🔥

0

0

1

Mark Bennett 🏳️‍🌈🧑🏻‍💻🏃🏻 @markbennett.ca

Wait, this will show up as a comment on the site?

0

0

1

at://oops.wtf @oops.wtf

Neat!

0

0

1

The Doctor @lucidillusions.in

I should try this and connect it with the short stories. @r4l.lucidillusions.in

1

0

1

The Doctor @lucidillusions.in

Wondering if I can somehow make this work with Jekyll (since each story is just a markdown page - just thinking out loud)

1

0

1

Graysky ☁️ @graysky.app

I mean this could just be a script tag at the bottom of the page

1

0

0

The Doctor @lucidillusions.in

iDunno what that is 😔🤭 But now I'll definitely know what to search for 😁

1

0

0

Graysky ☁️ @graysky.app

I mean just making a JavaScript script that puts it at the bottom of the page

0

0

1

Boris @bmann.ca

Nice work! I wonder if this will show replies from people you’ve muted? Basically, does it inherit the settings of your account, or is this just an unauthenticatwd call?

1

0

1

Graysky ☁️ @graysky.app

It doesn’t hide mutes because that data is private, and this uses the public unauthenticated API. if you really want to do that you could change it so it logs in first before fetching

1

0

3

Graysky ☁️ @graysky.app

If you don’t want someone showing up in your replies, you should just block them

1

0

2

Boris @bmann.ca

Right. Blocks vs mutes. Just thinking through comment spam ;)

0

0

3

ΔĐΔΜATIC 🌍 @adamatic.bsky.social

Wow! That is cool as heck! Testing the latency of likes on Bksy -> likes on the blog view and it's instant! Which I guess is obvious, but still super cool to see happen.

0

0

0

hanan @hanan.my.id

nice article! 👍

0

0

0

justin maurer dot dev @justinmaurer.dev

Just found this. Very cool. I think I will try to build a WordPress plugin to replace the default WP comment system with something like this.

1

1

0

justin maurer dot dev @justinmaurer.dev

Goal would be to also include auto-posting for posts, which would tie a WP post to an AT post, which could then be used to create the comments thread.

0

0

0

ulrischa @ulrischa.de

Pretty cool how open bluesky is

0

0

0