How to use Bluesky posts as Ghost comments

Today I ran into a couple of interesting posts that focused on the benefits of bluesky as an open platform. One of the use cases shared focused on using bluesky for blog comments^[1]. This shows the potential for using bluesky comments as a way to engage with readers that doesn't require the reader to sign up for an account to use the native comments^[2] integration or resorting to disqus^[3].

So I came up with a way to use them as comments on a Ghost blog by wrapping the comments in a web component. The code is available on Github for details on how it works. You can include the code in your site through code injection by including the content of dist/bluesky-thread.js in a script tag.

<script>
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  ...
</script>

This adds a <bluesky-feed> element to your page. Which you can include by adding html to your post which should include the post you wish to include.

<bluesky-feed post-url="..."> </bluesky-feed>

This should render comments on your post. Like the comment thread below. You probably want to disable native comments if you have them enabled. There's no feature to disable this for one off posts^[4], so the work around is to hide them by injecting a css script.

<style>
#ghost-comments-root {
    display: none;
}
</style>

Comments

Reply on Bluesky to join the conversation.