Blog comments via Mastodon

For quite a while, I've wanted to enable some way to comment on my blog posts as that can provide a great way to get more opinions, points of views and corrections to the content I've written. I didn't want people to need to make a new account to a new service just to write a comment.

Over the time, I've run into many great stories of people building something similar. In December, Yusuf Bouzekri shared how he added webmentions to his blog. In January, Andy Bell shared improvements he made for the "likes" section in his blog. Then there was Jan Wildeboer and his Mastodon-based approach and finally this week in July, Cassidy James' story of him implementing comments based on Jan's work finally gave me the push needed.

Since writing this originally, I've also found that Carl Schwan and Veronica Olsen have implemented Mastodon comments to their blogs in the past as well.

My approach

I decided to start with a basic approach and then I'll iterate upon it over time as I see what I like and what not.

I use Eleventy and Ghost CMS to run my blog. When I want to enable comments on my blog post, I first write it and publish it, then toot about it in the fediverse. Once that is done, I can capture the Mastodon post ID and add that to my post's front matter:

---
# other front matter first, then
mastodon_id: "110740556042408938"
---

On build time, I inject this ID into the HTML for in the blog post page:

    <section id="comment-section">
      <h2>Comments</h2>
      <div class="comment-ingress">
        Comment by replying to <a href="https://mastodon.world/@hamatti/110779197470760541">this post in Mastodon</a>.
      </div>
      <div id="comments" data-id="110779197470760541"">
        <p>Loading comments...</p>
      </div>
      <div class="continue-discussion">
        <p>Continue discussion in <a href="https://mastodon.world/@hamatti/110779197470760541">Mastodon</a> &#187;</p>
    </section>

For this first version, I ended up hard coding my account information and just storing the ID of the individual post. This is different from Jan's approach in which he always put the host, the account and the ID into the post's front matter. I might implement that at some point to get a bit more flexibility.

I also added a <template> tag for an individual comment:

<template id="comment-template">
  <article class="blog-comment">
    <div>
      <img />
    </div>
    <div class="comment-content">
      <div>
        <div class="author"></div>
        <div class="publish-date"></div>
      </div>
      <div class="comment"></div>
    </div>
  </article>
</template>

On the runtime, I then check if there is a Mastodon ID in the data-id attribute and if there is, I do two calls to the Mastodon API: one to https://[DOMAIN]/api/v1/statuses/[MASTODON_ID] to get the original post and another to https://[DOMAIN]/api/v1/statuses/[MASTODON_ID]/context to get the replies.

For each comment from these, I then copy the template, fill it in and render that to the page.

Considerations

I'm pretty happy by how this turned out and how I was able to build most of it in a short time while sipping a drink in a local pub. I love these kind of small projects to get started with something and then improving upon it over time.

Mastodon approach still requires people to have an account to comment but I hope it's gonna be a good tradeoff since a lot of my audience already is in Fediverse. And maybe this will encourage others to join.

Sign up for Syntax Error, a monthly newsletter that helps developers turn a stressful debugging situation into a joyful exploration.