Skip to main content
You can use Mastodon to add comments to your static blog engine.

https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ #webdev #fediverse

Adding comments to your static blog with Mastodon

One of the biggest disadvantages of static site generators is that they are static and can’t include comments. There are multiples solutions to solve this problem.
carlschwan.eu

Coffee (Team CW) reshared this.

Iacopo Moles
Iacopo Moles  
•
Thank you so much for this idea. Loving it
retiolus
retiolus  
•
This is absolutely amazing, thank you for that!
retiolus
retiolus  
•
Hey @carlschwan, I know this article is from a long time ago, but if you have a minute, I'm trying to add mstdn responses as comments on my blog. I use the hugo-coder theme.

I added your code in layouts/partials/comments.html

"{{ partial "comments.html" . }}" in layouts/posts/single.html

and added
"
[comments] host = "mamot.fr"
username = "retiolus
id = "107245995000136554""
to one of my posts.

The new comments section appears, but once you click on "Load comments" nothing happens…
@Carl Schwan :kde:
Carl Schwan :kde:
Carl Schwan :kde:  
•
Do you have some source code to share? I'll look at it locally when I get some time :D
Carl Schwan :kde:
Carl Schwan :kde:  
•
You are missing <script src="/assets/js/purify.min.js"></script> You can download the file here: https://github.com/cure53/DOMPurify/blob/main/dist/purify.min.js

DOMPurify/purify.min.js at main · cure53/DOMPurify

DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo: - DOMPurify/pur...
GitHub
apetresc
apetresc  
•
Nice 😀 So what's your workflow - you publish the post first, then the toot, then edit the published post to include the frontmatter with the toot id?
Carl :kde:
Carl :kde:  
•
yes :) I just need to be quick so that nobody notice :)
Paul :python: :django:
Paul :python: :django:  
•
Thanks again for the writeup -- I implemented it on my blog and deployed tonight. Initially I balked at quasi-race-condition aspect (updating the blog post after posting to Mastodon), but I decided I can live with it.

I inaugurated the feature by enabling comments on the half-dozen posts I had already tooted about.
Marian
Marian  
•
This is great! I'm currently making an attempt to adapt it to my site. Thanks for sharing!

Have you made any efforts to develop this further since you posted about it initially?

Also I wonder how I would moderate comments which I clearly wouldn't want to have in my blog. Like Spam.
An :sparkles:
An :sparkles:  
•
thanks for the great tutorial!!
pmurphs
pmurphs  
•
Hmm.. Your comments dont seem to be loading for me. Its been a couple years.. maybe something broke?
gholk
gholk  
•
Hey, I came up with this idea and find your post, though it has been 2 years. Your code does not declare the variable `mastodonComment`. This may not cause problem outside the js strict mode (it will silently create a global variable). You can fix this by replacing `mastodonComment =` with `const mastodonComment =`
Michael Roberts
Michael Roberts  
•
This doesn't seem to work for me on Firefox. I click "Load comments" from the original page and nothing appears.

Here's my console log - looks like it's not finding DOMPurify?

Front-end stuff is not my strong suit...
Carl Brown
Carl Brown  
•
Thanks for this - I was wondering if this was possible, and your write-up was very timely.
Zak
Zak  
•
I've been using this on a couple sites, but Mastodon 4 has removed the /interact/ URLs.

I haven't found a good solution yet other than to just link to the post and let people get to their own server from there.
anarcat
anarcat  
•
for what it's worth, i adapted your idea to #ikiwiki https://anarc.at/blog/2023-01-19-mastodon-comments-in-ikiwiki/ comments welcome in https://kolektiva.social/@Anarcat/109718569330648379 ;)

anarcat (@Anarcat@kolektiva.social)

Mastodon comments in ikiwiki https://anarc.at/blog/2023-01-19-mastodon-comments-in-ikiwiki/ #mastodon #ikiwiki #embed #comment #blog #bringbackblogging
kolektiva.social
#ikiwiki
anarcat
anarcat  
•
also, the "reply" button doesn't work on your site anymore, seems like that was removed in #mastodon4 and the only fix is to just remove it (which is what i did)
#Mastodon4
Esi Jóhannes G.
Esi Jóhannes G.  
•
Note that pressing the Reply button on the page takes me to https://linuxrocks.online/interact/105463655803971969?type=reply which gives me a "The page you are looking for isn't here." error. Clicking the link in the post body itself works fine.
⇧