Skip to main content


I may have found an alternative solution to my blog's commenting system! ๐Ÿ˜บ

The synchronization of comments from my Mastodon account. It's something I tried and abandoned, but I'm giving it another try after reading your comments. Well, I explain more on the blog and also share the source code:

Blog post, source code, and demo:
โ†’ https://www.davidrevoy.com/article981/i-may-have-found-an-alternative-solution-to-my-blogs-comment-system

Bonus: Because I'm happy, here's a happy Mastodon mascot as a postman that I painted this morning.
#blog #selfhosting #php
A digital painting of  the Mastodon mascot as a postman, happy delivering message. 

License:  "Mastodon mascot as postman" by David Revoy, based on mascot of joinmastodon.org โˆ’ CC-BY-4.0
Iโ€™m rebuilding a content platform of mine and Iโ€™m all over this. Iโ€™ve always wanted a comments board that could be in multiple places at once!
the postman mascot is simply beautiful ๐Ÿ˜
I am sure you also looked into โ€œwebmentionโ€? It also does what you would like to do but require a bit of setup.
@bitinn Hey, I'm totally discovering it with your message. Thanks, I only read the introduction on https://www.w3.org/TR/webmention/ and I'm really interested. I'll try to find more real life example and integration in PHP.
great I had it setup on one of my blog, with a bridge, you could copy not just replies but also favorites to your blog.

See a quick example on my site (integrated via JavaScript): https://marisa.club/a-new-adventure/
@adora Thanks. Yes, I think even proprietary system like Disqus need to set an account, and I see a lot of blog using this. Getting an account might not be a big barrier. (maybe big enough to not get too much trolls ๐Ÿ˜‡)
Testing ๐Ÿ™‚

Thank you for sharing the source code!
@gunchleoc ๐Ÿ˜Š I'll flush the cache so your message will be in-sync faster on the blog.
Thanks!

An improvement idea: A JavaScript "Copy" button to copy the post's URL. Or copy it as an on-click event on the link's text.

Instructions: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
@gunchleoc ๐Ÿ˜ Oh, that's a great idea. I'll do that. Thank you for the link.
I just discovered your comic from this conversation and I'm reading it now it's adorable
It's a very good idea !
Thanks for sharing the code ๐Ÿ˜„
I feel like Lemmy or Kbin would make more sense for this but I guess ActivityPub makes it irrelevant since they can interact anyway

Excellent idea!
@jherazob I tried to answer from my Lemmy account (a bit abandoned), and I can't. But it's quite possible that I'm not going about it the right way.

@davidrevoy
Glad you're back. hope everything will go fine. ๐Ÿ‘๐Ÿป
Un poil plus compliquรฉ pour poster, mais c'est un faible prix ร  payer pour la tranquillitรฉ d'esprit.
J'espรจre que l'on aura, ร  terme, plus d'implรฉmentation activityPub depuis les sites de blog (je crois que WordPress le propose depuis peu) pour que le post avec un lien vers le billet de blog puisse รชtre directement le contenu du blog. Ce serait gรฉnial d'arriver jusque lร  !
@touhoppai Oui, le va-et-vient aprรจs avoir fini l'article d'aller poster sur mastodon, rรฉcupรฉrer l'ID, et l'entrer dans l'admin est du taf supplรฉmentaire de mon cรดtรฉ. Il y a certainement des faรงons d'automatiser tout รงa, je vais y regarder afin de pouvoir poster plus fluidement.
And that's a win! Congrats ๐Ÿ˜ ๐Ÿ‘
Sounds like an amazing way to strengthen participation, good job! ๐ŸŽ‰
It's nice to see another implementation of blog comments using the Mastodon "context" API. ๐Ÿ˜€ I use it for https://fietkau.blog in a similar way. I additionally filter the replies by visibility and only show the ones set to "public".

If you'd like to read more about how to render custom emoji and other details, I recommend @cassidy's blog post about his implementation: https://cassidyjames.com/blog/fediverse-blog-comments-mastodon/
@julian Thank you for the link! Very interesting. ๐Ÿ‘

@cassidy
*me searching for the xss in your code* :meru_lul:

but it looks fine so far. :meru_headpat:
@bloodywing Oh thanks for checking. I'm really not really skilled at coding PHP, it's limited for my personal use and my blog and Pepper&Carrot website. It you ever see a big mistake in the code I post, do not hesitate to tell me. Thanks.
I love how it looks exactly the same as the old system. Do you think that after a few years worth of new blog posts that it will ever get to the point where it pings your mastodon instance constantly? Itโ€™s cool that it updates every hour, but do you think blog posts will get old enough that you can be safe updating it daily or weekly to avoid this?
@yoyunix Thanks. To be fair, I doubt it will last long. Accidents of instance can happen, losing all comments, or the service might also go sunset and be replaced by a new tech more lightweight in the future. Maybe the API will change too with the new versions, up to a point it's too hard to follow for my low skill.

Right now my system on the blog has a cache of 1h for the post of the week, 4h for the post of the month, and 12h after that. Let see in 5 years if If Mastodon IDs are stable ๐Ÿ˜‰
any idea what could be a replacement if this fails?
@yoyunix No idea ๐Ÿ˜‡ The future time will bring new challenges but also probably new solutions. I'll study that when it will happen.
Merci pour vos oeuvres et vos contributions ร  l'Open source.

๐Ÿ˜‰
I'm having troubles creating account on that gitlab instance, but I wanted to let you know that lines 83 and 177 can be removed. You already confirmed that `$mastodon_post_id` only contains numbers, and you don't need a content-type header since it's a GET request
@ApisNecros Thank you for the advice. I'll note the changes and edit it them soon!
Nice job! Nice news!
I love all your crรฉations, they are so joyful !
nice happy ending, let's hope troll will stay away. Nice postman โค๏ธ
@nomis38 Thanks! Yes, I hope too. I also know the contributors and readers of the blog may help now and take action if they find something to report. It should give a harder time for the trolls and haters to get a message in there with a long life time.
Love the image!
oh nice! Great you've found the reason of missing posts on framapiaf ๐Ÿ™‚
Great. I was gonna suggest that adding activitypub replies to the post was best till you said you'd already tried it.

Glad you've found a way that works.
It's a somewhat roundabout way to comment, but otherwise the experience actually feels nice! Just needs some standard so a browser extension could inject the instance reply UI or something.
@farcaller Thanks, and a standard or a browser extension for that would be indeed a cool idea.
Why are our avatars replaced with chatons on the website? Is this because of copyrights?
@utopify_org Hey, Good question. I thought a lot about this. It's because of five good reasons:

1. Bandwidth (with many visitors, hot-linking them to all instance all the time is pretty heavy)
2. Privacy. Hotlinking them would give also log to instance owners of who connect to my website.
3. Loading speed: waiting for all servers to get pictures.
4. Copyright, and/or trolling possibly with p0rn or gore.
5. Aesthetic: I love the cat avatars https://www.peppercarrot.com/extras/html/2016_cat-generator/index.php ๐Ÿ™‚
wow, okay, a lot of stuff I wouldn't even thought of until I would run into it.

Thanks for the explanation.
@utopify_org No worry. I ran into all of them deeply and hard. That's why I keep them in mind now.
Seems to work smoothly, congrats!
โ€” Oh, fascinating!

Now I'm wondering if the ActivityPub plugin for WordPress allows for comments. (I should really get that re-set up on my web site, the first time I didn't use the right username, and never got back to it...)
@breitensteinart Thanks! I had a look at the ActivityPub plugin for WordPress; but as far as I understood it, it transforms the website in a full Instance. Where the new post are auto-posted and where the comments and moderation is managed by the owner of the WordPress. Here I wanted to profit from the moderation of my instance and the way they manage federation and blocklists and not to have to do that manually.
@coin Yes, and I would avoid Github, because Microsoft would log all my visitor's data (their browser, geography, operating system and habit of connection to my website) and profile them. A bit too much in exchange of a comment system.
And now I'm happy too ๐Ÿ˜€
Cool that you managed to get this to work!

I think the authentication token is also necessary for mastodon instances that have authorized fetch enabled, because the point of that is to ensure randos don't just get to have info without the server being sure said rando isn't trying to block evade or whatever, but not 100% sure.
@Wolthera Thanks! Oh, that's a good point. I'll report this in the blog-post.
This is awesome! ๐Ÿ‘๐Ÿค“

Given you said spam was a problem with the previous commenting system, does this mean you consider Mastodon to be reasonably free from spam?

I sort of live in fear that Mastodon might suffer an influx of bots. Especially given it's decentralised, so presumably any instance could contribute unless your instance admin defederates from them.
@ollie Thanks! Yes, I think the moderation and collective works of all user here with the report buttons makes the place pretty safe.
I received insult, p0rn, spam, but very rarely, and it was removed after a simple click on the three dots and reporting them. Actually, I wish this post will attract one or two post of this type. I'm curious if the API would list the message if I block an account.
Awesome! I've been wanting for something like this, because didn't get hang of the webmentions. Thank you so much for sharing the code, might as well implement it.

see also https://mastodon.blaede.family/@cassidy/110669429936617026


Iโ€™ve promised enough people this, so I had to do it! ๐Ÿ˜

Hereโ€™s my write-up of how I added client-side Fediverse-powered comments to my Jekyll blog using the Mastodon API.

Huge props to @jwildeboer for the initial inspiration, as well as @julian and everyone who provided feedback for inspiring the design improvements.

https://cassidyjames.com/blog/fediverse-blog-comments-mastodon/

โœจ๐Ÿ’ฌ Reply to this thread then check the blog post comments to see it in action!

#Mastodon #Jekyll #WebDevelopment #ActivityPub #design


Thanks for the link. I discovered it this evening thanks to another comment. I'm now curious about his method for fetching the custom emojis ๐Ÿ™‚
This entry was edited (1 year ago)
Cool, I skimmed through the replies but didnโ€™t see it. I figured it my be worth a review in case there were any useful nuggets like that.
thanks for sharing! Iโ€™ve experimented with Mastodon-powered comments on my tiny site too. not quite finished with it yet, will definitely look at your code for inspiration.
Merci de nous avoir encouragรฉ ร  garder les commentaires sur nos blogs, voire ร  les intรฉgrer ร  #Mastodon. Le mien n'est pas codรฉ avec PHP mais je crois avoir trouvรฉ qui me servira. ร€ suivre...
En passant, je suis ravi que tu aies trouvรฉ un autre moyen de rester au courant des opinions de tes lecteurs.
how is GDPR content removal request handled? I assume deleting the comment from the mastodon instance delete it in your blog too.
@raghukamath Hey, yes. The listing on the blog is just a copy of the Mastodon API, so every edit or removal should be reflected on the blog as soon as the blog updates.
The only thing to keep is a cache of maximum 24h so it is always removing or applying the edit into the due 24h legal date.

I'm planning to add soon an 'emergency refresh' button (just an action that force a cache update for the current article. It might be convenient in case of a very nasty comment. ๐Ÿ˜บ
Carl's post inspired me too ๐Ÿ˜‰

Well done ๐Ÿ‘
Quand je suis content, je partage un smiley. Et toi tu nous offre une peinture ๐Ÿ˜
that is great solution! Bravo!!! Keep up your great job!
Hell yeah! The legendary FOSS artist found a FOSS solution! I look forwards to commenting on the next Pepper&Carrot with this system!
aren't the old comments re-federated? There might be a chance you can still get them back. Except those made by people in the instance that had the problem, I would guess the others should federate again.

Or maybe there is an issue with that as the initial post you made is lost? (So all comments along with it have no real reference).
@danielsiepmann ๐Ÿ™‚
I'll try to update a tiny bit the display part of the code this afternoon/evening (on the same page) : I had feedback on how to improve security and also I found aesthetic improvements for situations I met on the way (eg. differentiate video/image/other in attachment, or removing direct/private message from the listing with the token).
@danielsiepmann ... And it is done. I updated the blog post and live demo https://www.davidrevoy.com/article981/i-may-have-found-an-alternative-solution-to-my-blogs-comment-system , but the most important is now that I moved the script to its own git repository https://framagit.org/Deevad/mastocomblog , it will be easier to maintain and push on it the feedback I receive.
@tcit @cassidy Hey! True, I studied it, this one is really full-featured, with correct indentation of replies, custom emojis support, and all the features.
I've done something similar for my blog although the solution is entirely client side JavaScript. It did take me on a deep dive into xss server metadata though for my previously fully static site.
@remram44
Oh, that's a really good idea! I struggle a bit with accounts all over the place, so I avoid creating any that isn't necessary. Because of this I had never commented on your blog, even though many articles interest me greatly!
@aki_goupil ๐Ÿ™‚ Yes, same. Difficult to keep many accounts. Your comment just got sync on the blog, btw: https://www.davidrevoy.com/article981/i-may-have-found-an-alternative-solution-to-my-blogs-comment-system/show#110819217168609542 (if you want to check the concept working 'live'), my reply will now take 4h to appear.
I did! I opened the blog link even before, because I wanted to see how it looked. I really like this new system.
@amino Thanks for sharing and for taking the extra effort of documenting it in a blog-post! ๐Ÿ‘
@bitinn
โ‡ง