Getting Fediverse Comments on My Blog Posts

I’ve been wanting to show comments on my blog for a while now, but I didn’t want to throw some heavyweight commenting system onto the site and I also didn’t want to use anything that would claim ownership of any of the comments. My feeling is that there are far smarter people out there and the comments they make to my posts would be interesting and add mopre context to the posts themselves.

Since I’m a big fan of the Fediverse and post links to my new posts there, it made sense to use that as my commenting system.

The Plan

Since I’m not so good at web development, I needed the path of least resistance (the lazy way). There’s already been alot of good work done on the Indieweb and there was code out there to display webmentions on a hugo blog. This means the only thing I needed to do was to get fediverse comments and reactions to show up as webmentions and viola!

The path of the comments would be:

• I post a link to my post with my fediverse account
• Replys to that post would be turned into a webmention. For this I used a lovely free service called brid.gy
• Now the webmentions need to be collected somewhere (because they can be generated through other mechanisms). Another lovely free service is webmention.io
• To pull and display the webmentions from webmention.io I found some javascript that did the job

The Build

Webmention.io

The first step is to sign up to webmention.io. For this you need to put two lines of code into the header of your blog.

<link href="mailto:<YOUR EMAIL>" rel="me">

Putting this in your header and putting your email address between the <> will give webmention.io a way to authenticate you and prove you own the domain. They will send you an email and you will need to click on a link to validate yourself.

<link rel="webmention" href="https://webmention.io/<USERNAME>/webmention" />

This line enables webmention.io to know that your site is accepting webmentions. They will provide you a username so that they can determine which webmentions are yours.

Brid.gy

With bridge, you sign up with any accounts you want webmentions from. I chose the mastodon one (which supported my Akkoma instance). You can chose to treat your blog as a seperate entity on the fediverse, but I instead opted to go for associating the blog with my account. That makes it easier for me to reply to comments and have them show up on my posts too. To make sure brid.gy works, you need to have a link to your site in your fediverse profile.

Hugo

Everyone’s hugo theme works differently so these instructions may not work for you, but I hope they provide a good starting point. To start you need to download webmention.min.js and put it into the /static/js/ directory of your blog. That pretty much enables your site to receive webmentions. You just need a way to display them! Blowfish is the theme I use and I can add a comment section to each of my posts by creating a comments.html file in the /layouts/partials directory of my blog. In that file, the only code I need is:

<div id="webmentions" >
</div>

{{- $js := resources.GetRemote "https://omaramin.me/js/webmention.min.js" | js.Build (dict "minify" true) -}}
<script type='text/javascript' data-page-url="https://omaramin.me{{ .RelPermalink}}">
    {{ $js.Content | safeJS }}
</script>

The <script> block looks complicated, but that is because I needed to pass it into my theme safely. You might be able to get away with only using the following:

<div id="webmentions" ></div>
<script src="/path/to/webmention.min.js" async></script>

In order to make the comments look nice, you will need some CSS to format them properly. In my theme, I just need to create a custom.css file in the /assets/css/ directory of my blog and put the code there.

#webmentions .comments {
   
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 80%;
    max-width: 100%;
}

#webmentions h2 {
    font-size: larger;
    margin: 0;
    padding: 2px;
}

#webmentions .reacts img {
    margin: 5px -1ex 1px 0;
}

#webmentions img.missing {
    background: white;
    border: dashed black 1px;
}

#webmentions ul {
    list-style-type: none;
    margin: 2;
    padding: 4px;
}

#webmentions li {
    text-indent: -1em;
    padding-left: 1em;
}

#webmentions a.reaction {
    position: relative;
    text-decoration: none;
    margin-right: 0;
    letter-spacing: -1ex;
    margin-right: 2ex;
}

#webmentions a.reaction img {
    max-height: 2em;
    width: auto;
    margin-right: -1ex;
    border-radius: 25%;
    display: inline;
}

#webmentions a.reaction sub {
    font-size: 50%;
}

#webmentions .comments li {
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 1em;

}

#webmentions .comments li .text {
    color: #a9b3b8;
    font-style: italic;
    text-decoration: none;
}

#webmentions .comments li .name {
    color: #111;
}

Just make sure id="webmentions" in your comments.html matches the #webmentions in your CSS.