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 may have found an alternative solution to my blog's comment system.

David Revoy
#php #selfhosting #Blog
Sheldon Chang ๐Ÿ‡บ๐Ÿ‡ธ
Sheldon Chang ๐Ÿ‡บ๐Ÿ‡ธ  
•
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!
Andrea Grandi ๐Ÿฆ•
Andrea Grandi ๐Ÿฆ•  
•
the postman mascot is simply beautiful ๐Ÿ˜
David Frank
David Frank  
•
I am sure you also looked into โ€œwebmentionโ€? It also does what you would like to do but require a bit of setup.
David Revoy
David Revoy  
•
@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.

Webmention

www.w3.org
@David Frank
David Frank
David Frank  
•
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/

A new adventure on static site generation

A post on setting up the Zola static content generator for my personal site.
marisa.club
David Revoy
David Revoy  
•
@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 ๐Ÿ˜‡)
@Adora (She/Her) :flag_transgender:
GunChleoc :verified_gaelic:
GunChleoc :verified_gaelic:  
•
Testing ๐Ÿ™‚

Thank you for sharing the source code!
David Revoy
David Revoy  
•
@gunchleoc ๐Ÿ˜Š I'll flush the cache so your message will be in-sync faster on the blog.
@GunChleoc :verified_gaelic:
GunChleoc
GunChleoc  
•
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

How To Copy to Clipboard

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
David Revoy
David Revoy  
•
@gunchleoc ๐Ÿ˜ Oh, that's a great idea. I'll do that. Thank you for the link.
@GunChleoc
Adora (She/Her) :flag_transgender:
Adora (She/Her) :flag_transgender:  
•
I just discovered your comic from this conversation and I'm reading it now it's adorable
:terminyal: ๐™น๐šŽ๐š›๐šŽ๐š–๐šข :~$
:terminyal: ๐™น๐šŽ๐š›๐šŽ๐š–๐šข :~$  
•
It's a very good idea !
Thanks for sharing the code ๐Ÿ˜„
Jaime Herazo
Jaime Herazo  
•
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!
lebout2canap โš
lebout2canap โš  
•
@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
@David Revoy @Jaime Herazo
Marco Bresciani
Marco Bresciani  
•
Glad you're back. hope everything will go fine. ๐Ÿ‘๐Ÿป
Touhoppai
Touhoppai  
•
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ร  !
David Revoy
David Revoy  
•
@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.
@Touhoppai
Nartance
Nartance  
•
And that's a win! Congrats ๐Ÿ˜ ๐Ÿ‘
Nemiryah
Nemiryah  
•
Sounds like an amazing way to strengthen participation, good job! ๐ŸŽ‰
Julian Fietkau
Julian Fietkau  
•
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โ€™s Blog

This is my place for long-form writing on technology, academia, games, and whatever else I may be thinking about.
Julian Fietkau
@Cassidy James Blaede
David Revoy
David Revoy  
•
@julian Thank you for the link! Very interesting. ๐Ÿ‘

@cassidy
@Julian Fietkau @Cassidy James Blaede
Bloodywing
Bloodywing  
•
*me searching for the xss in your code* :meru_lul:

but it looks fine so far. :meru_headpat:
David Revoy
David Revoy  
•
@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.
@Bloodywing
YoYunix
YoYunix  
•
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?
David Revoy
David Revoy  
•
@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 ๐Ÿ˜‰
@YoYunix
YoYunix
YoYunix  
•
any idea what could be a replacement if this fails?
David Revoy
David Revoy  
•
@yoyunix No idea ๐Ÿ˜‡ The future time will bring new challenges but also probably new solutions. I'll study that when it will happen.
@YoYunix
nunux
nunux  
•
Merci pour vos oeuvres et vos contributions ร  l'Open source.

๐Ÿ˜‰
ApisNecros
ApisNecros  
•
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
David Revoy
David Revoy  
•
@ApisNecros Thank you for the advice. I'll note the changes and edit it them soon!
@ApisNecros
jcarnu ๐Ÿ˜๐Ÿง
jcarnu ๐Ÿ˜๐Ÿง  
•
Nice job! Nice news!
I love all your crรฉations, they are so joyful !
Nomis
Nomis  
•
nice happy ending, let's hope troll will stay away. Nice postman โค๏ธ
David Revoy
David Revoy  
•
@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.
@Nomis
Dad
Dad  
•
Love the image!
Valvin (framapiaf)
Valvin (framapiaf)  
•
oh nice! Great you've found the reason of missing posts on framapiaf ๐Ÿ™‚
Adam Dalliance
Adam Dalliance  
•
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.
farcaller
farcaller  
•
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.
David Revoy
David Revoy  
•
@farcaller Thanks, and a standard or a browser extension for that would be indeed a cool idea.
@farcaller
maxmoon ๐ŸŒฑ
maxmoon ๐ŸŒฑ  
•
Why are our avatars replaced with chatons on the website? Is this because of copyrights?
David Revoy
David Revoy  
•
@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 ๐Ÿ™‚

Cat Avatar Generator

www.peppercarrot.com
@maxmoon ๐ŸŒฑ
maxmoon ๐ŸŒฑ
maxmoon ๐ŸŒฑ  
•
wow, okay, a lot of stuff I wouldn't even thought of until I would run into it.

Thanks for the explanation.
David Revoy
David Revoy  
•
@utopify_org No worry. I ran into all of them deeply and hard. That's why I keep them in mind now.
@maxmoon ๐ŸŒฑ
Noe ๐Ÿโœจ
Noe ๐Ÿโœจ  
•
Seems to work smoothly, congrats!
Marlene Breitenstein Art
Marlene Breitenstein Art  
•
โ€” 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...)
David Revoy
David Revoy  
•
@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.
@Marlene Breitenstein Art
David Revoy
David Revoy  
•
@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.
@Token
Rupert Reynolds
Rupert Reynolds  
•
And now I'm happy too ๐Ÿ˜€
Wolthera
Wolthera  
•
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.
David Revoy
David Revoy  
•
@Wolthera Thanks! Oh, that's a good point. I'll report this in the blog-post.
@Wolthera
Ollie
Ollie  
•
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.
David Revoy
David Revoy  
•
@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.
@Ollie
Roni Laukkarinen
Roni Laukkarinen  
•
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.
Anthony Bosio
Anthony Bosio  
•

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

Cassidy James Blaede

2023-07-06 22:11:27


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



Toot toot! Mastodon-powered Blog Comments

The Fediverseโ€”and Mastodonโ€™s APIโ€”is magic for static Jekyll sites
Cassidy James Blaede

David Revoy
David Revoy  
•
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)
Anthony Bosio
Anthony Bosio  
•
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.
AppleTalk
AppleTalk  
•
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.
Klebs (Les Ateliers PHV)
Klebs (Les Ateliers PHV)  
•
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.
#mastodon
Raghukamath
Raghukamath  
•
how is GDPR content removal request handled? I assume deleting the comment from the mastodon instance delete it in your blog too.
David Revoy
David Revoy  
•
@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. ๐Ÿ˜บ
@Raghukamath
๐Ÿ–‹ ~hyde
๐Ÿ–‹ ~hyde  
•
Carl's post inspired me too ๐Ÿ˜‰

Well done ๐Ÿ‘
Nartagnan โš
Nartagnan โš  
•
Quand je suis content, je partage un smiley. Et toi tu nous offre une peinture ๐Ÿ˜
Kosmimatis๐Ÿ”ฅ๐Ÿ’
Kosmimatis๐Ÿ”ฅ๐Ÿ’  
•
that is great solution! Bravo!!! Keep up your great job!
loaExMachina
loaExMachina  
•
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).
David Revoy
David Revoy  
•
@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).
@Daniel Siepmann
David Revoy
David Revoy  
•
@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.

David Revoy / MastoComBlog ยท GitLab

A Php script that fetch and displays the comments received from the Fediverse. It requires a Mastodon account and posting on it to get the post ID.
GitLab
@Daniel Siepmann
David Revoy
David Revoy  
•
@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.
@Cassidy James Blaede
Alex
Alex  
•
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
@Rรฉmi Rampin
Aki Goupil
Aki Goupil  
•
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!
David Revoy
David Revoy  
•
@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 may have found an alternative solution to my blog's comment system.

110781413323024163
David Revoy
@Aki Goupil
Aki Goupil
Aki Goupil  
•
I did! I opened the blog link even before, because I wanted to see how it looked. I really like this new system.
David Revoy
David Revoy  
•
@amino Thanks for sharing and for taking the extra effort of documenting it in a blog-post! ๐Ÿ‘
@bitinn
@amino @David Frank
โ‡ง