Bluesky Comments Fixed

17 May, 2025

If you followed my previous guide to add Bluesky comments to Bearblog, you’ve probably noticed the whole thing’s been broken for a while. It went flaky before and then sorted itself out, but this time it looks like it’s gone for good.

Here’s how we can fix it.

The Problem

The old method relied on the bluesky-comments feature where you pass only your handle. Behind the scenes it hit a public Bluesky endpoint, guessed which of your posts linked back to the article (usually the one with the most engagement) and embedded that thread.

Bots hammered that endpoint; Bluesky throttled it; public access will likely be shut down.

Luckily the plugin has a fallback: give it the exact Bluesky post URL instead. That hits a different, still-open endpoint.

Why this is awkward on Bearblog

Bearblog lets you define only one global footer. You could paste the bluesky-comments snippet plus the URL into every post, but:

• Comments would appear above the footer / up-vote button / tags (theme-dependent).
• It’s a big chunk of code to paste every time—annoying.

How to fix it

We need a way to pass the Bluesky post URL to the footer on a per-post basis. We can piggy-back on a hidden tag. Add this near the top of every post that should have comments:

<meta name="bsky-post" content="{URL_TO_THE_BSKY_POST}"> 

Then, in the footer script:

const meta = document.querySelector('meta[name="bsky-post"]'); 

The URL lives in meta.content. If the tag is missing, no comments appear—perfect when you don’t want a comment thread.

Putting it all together

Let’s wire up a minimal solution and bump the plugin version while we’re at it.

Dashboard → Settings → Header and footer directives → Header directive:

<link rel="stylesheet" href="https://unpkg.com/bluesky-comments@0.11.0/dist/bluesky-comments.css"> 

(0.11.0 is current as I write; check the GitHub repo for newer versions.)

On the same settings page, paste the React import map:

<script type="importmap"> {   "imports": {     "react": "https://esm.sh/react@18",     "react-dom/client": "https://esm.sh/react-dom@18/client"   } } script> 

Now the main module:

<script type="module">   import { createElement } from 'react';   import { createRoot } from 'react-dom/client';   import { BlueskyComments, BlueskyFilters } from 'https://unpkg.com/bluesky-comments@0.11.0/dist/bluesky-comments.es.js';    document.addEventListener('DOMContentLoaded', () => {     // Only run on blog-post pages (Bearblog sets body.post)     if (!document.body.classList.contains('post')) return;      const author = 'YOUR-BLUESKY-HANDLE';  // ← change this     const meta = document.querySelector('meta[name="bsky-post"]');     const container = document.getElementById('bluesky-comments');      if (!meta) {       container.textContent = 'Comments on this post are disabled.';       return;     }      createRoot(container).render(       createElement(BlueskyComments, {         author,         uri: meta.content,         onEmpty: details => {           console.error('Failed to load comments:', details);           container.textContent =             'Failed to load comments. Check console for details.';         },         commentFilters: [           BlueskyFilters.NoPins,           BlueskyFilters.MinCharacterCountFilter(1),         ],       })     );   }); script>  <div id="bluesky-comments">div> 

Conclusion

1. Add a tag to each post (yes, retro-actively).
2. Load the plugin’s CSS in the header.
3. Drop the React import map and the script above into the global footer.
4. Remember that meta tag for all future posts.

That’s it—comments should be solid again. Let me know how it works for you!

#bearblog #meta