Home/Innovation
InnovationAutomation

How to Add Bluesky Comments to Your Blog

How to Add Bluesky Comments to Your Blog

Traditional comment systems are broken. They require constant moderation, attract spam, and often feel disconnected from where real conversations happen—on social media.

But what if your blog comments could come directly from Bluesky? Every reply to your post becomes a comment. Every like and repost becomes visible engagement. No database, no moderation queue, no spam filters needed.

Here's how to make it happen.

The Concept

Bluesky is built on the AT Protocol, an open and decentralized social networking standard. Unlike closed platforms, Bluesky exposes a public API that anyone can query—no authentication required for reading public data.

When you share a blog post on Bluesky, people reply. Those replies live on the Bluesky network, but they're accessible via API. Your blog can fetch that thread and display the replies as comments.

The result: a comment system that's:

  • Zero maintenance – No database to manage
  • Spam-resistant – Bluesky accounts require verification
  • Always current – Fetched client-side, so comments are never stale
  • Decentralized – Your comments aren't locked into a proprietary service

How It Works

The technical implementation is straightforward:

  1. You share your article on Bluesky
  2. You grab the post's AT Protocol URI (a unique identifier like at://username/app.bsky.feed.post/abc123)
  3. Your blog stores that URI in the post's metadata
  4. Client-side JavaScript fetches the thread from Bluesky's public API
  5. Replies render as comments on your blog

The API endpoint you need is:

https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread

Pass it your post's URI and desired depth, and you get back the full thread—including nested replies, like counts, author info, and avatars.

Implementation Approaches

Static Site Generators (Hugo, Jekyll, Eleventy)

For static sites, you'll need a client-side component. Create a JavaScript module that:

  1. Reads the Bluesky URI from your page's data attributes
  2. Fetches the thread on page load
  3. Recursively renders replies

Since static sites don't have server-side processing, all fetching happens in the browser. This is actually ideal—it means comments are always fresh without requiring rebuilds.

React / Next.js

Create a client component that takes the Bluesky URI as a prop:

'use client';
import { useState, useEffect } from 'react';

export function BlueskyComments({ uri }) {
  const [thread, setThread] = useState(null);
  
  useEffect(() => {
    fetch(`https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=${encodeURIComponent(uri)}&depth=10`)
      .then(res => res.json())
      .then(data => setThread(data.thread));
  }, [uri]);
  
  // Render thread.replies as comments
}

WordPress

For WordPress, you'd create a shortcode or Gutenberg block that:

  1. Accepts the Bluesky URI as a parameter
  2. Enqueues JavaScript to fetch and render comments
  3. Provides styling that matches your theme

Vue / Nuxt

Similar to React, create a client-only component that fetches on mount. Nuxt users can mark it with the .client suffix to ensure it only runs in the browser.

Parsing the Thread

The API returns a nested structure. Each reply has:

  • post.author – Display name, handle, avatar
  • post.record.text – The comment content
  • post.record.createdAt – Timestamp
  • post.likeCount, post.replyCount – Engagement metrics
  • replies – Nested array of replies to this comment

You'll want a recursive component to handle arbitrary nesting depth. Most implementations cap at 3-4 levels to keep the UI manageable.

Getting the AT Protocol URI

When you post on Bluesky, you can find the URI by:

  1. Clicking the "..." menu on your post
  2. Selecting "Copy post link"
  3. Converting the URL format:
    • From: https://bsky.app/profile/username/post/abc123
    • To: at://username/app.bsky.feed.post/abc123

Or, if you have access to the Bluesky developer tools, you can grab the URI directly from the post's data.

The User Experience

When someone visits your blog post:

  1. The article loads normally (server-rendered or static)
  2. After hydration, the comments component fetches from Bluesky
  3. A loading state shows briefly
  4. Comments appear with author avatars, timestamps, and nested replies
  5. A "Reply on Bluesky" link invites new comments

If there are no comments yet, prompt readers to be the first by replying on Bluesky.

Advantages Over Traditional Comments

No moderation burden. Bluesky's account system and community guidelines handle abuse. You're not running a forum—you're displaying a conversation that's already happening.

Real identity. People comment with their Bluesky accounts, not throwaway emails. This tends to improve discourse quality.

Engagement visibility. Readers see likes and reposts, adding social proof to your content.

Discoverability. When someone replies on Bluesky, their followers see it. Comments become distribution.

Portability. Your comments live on the open AT Protocol network. They're not locked in a proprietary database.

Limitations to Consider

  • Requires Bluesky adoption. If your audience isn't on Bluesky, you won't get comments.
  • No anonymous comments. Some prefer the barrier-free nature of traditional comments.
  • API dependency. You're relying on Bluesky's public API remaining available and free.
  • Thread discovery. You need to manually add the URI for each post—there's no auto-discovery yet.

Getting Started

  1. Set up a Bluesky account if you haven't already
  2. Implement the comment component for your blog framework
  3. Share your next article on Bluesky
  4. Add the URI to your post's metadata
  5. Watch the conversation flow in

The future of blog comments isn't a database—it's a protocol. And with Bluesky, that future is already here.


We've implemented this exact system on SDABusiness. Every article you see with a Bluesky thread linked will display replies as comments. Try it out—reply to one of our posts on Bluesky and watch it appear here.

Free Operations Tool

How much manual labor is costing your business?

Calculate your team's savings potential with AI Agents in seconds. No email required.

Open ROI Calculator →

🦋 Comments

Loading comments...
← Previous Post
The Data Silo Problem: How Multi-Agent Systems Connect Your Apps

The Data Silo Problem: How Multi-Agent Systems Connect Your Apps

Integration
Next Post →
How to Audit Your Business Workflows for AI Readiness (Free Checklist)

How to Audit Your Business Workflows for AI Readiness (Free Checklist)

Guide