I may have found an alternative solution to my blog's comment system.

Published on

Artwork source: "Mastodon mascot as postman" by David Revoy, based on the mascot of joinmastodon.org − CC-BY 4.0

Two days ago I decided to give up on my blog's commenting system. I wrote about a solution that I had tried but abandoned along the way: synchronizing comments from my Mastodon account. I abandoned it because I thought that my instance automatically flushed all posts older than 30 days, and it was too ephemeral to be a long-term solution.

But here is an update: I was wrong. The instance doesn't auto delete the message and an admin on my Mastodon instance contacted me to tell me the reason: they had an accident that resulted in the loss of comments older than that date. And he assured me that they don't plan to do it again.

So, in light of this new element, I've decided to give my solution another try, even if it only affects the last five articles published on my blog after 25 June 2023. The solution works (you can see it in the footer of my recent posts) and I'm happy to have an alternative commenting system back here.

As many of you understood from my previous post, removing them was really emotionally difficult for me.

I'll share my code and method if you want to get something similar on your blog:

Demo page

Demo of the Php code (public mode).

The Php code

A single file that requires pretty common php libraries (Json, Curl).

https://framagit.org/Deevad/mastocomblog/-/blob/main/index.php , (MIT License).

Git repository: https://framagit.org/Deevad/mastocomblog

Changelog:
2023-07-29:

  • Move from the Snippet on Invent.kde.org to a Git repository on Framagit.org.
  • Privacy: Hide DM(direct) and Followers Only(private) messages.
  • Security: prevent harder code injections.
  • Support more attachement type.
  • Security: prevent page flooding with high character limit.
  • Display account address for readability of quoted discussions.
  • Decorate :custom_emojis: everywhere and (status) in display name.


a screenshot of a sample of the (v1alpha) code

Setup

The script needs to be in a directory with write permissions to write the cached json files. You can customize the path to this directory with $cache_target at the start of the CACHE section in the code.

$mastodon_post_id The 18 numbers of your Mastodon post. You'll find this number on the URL of your post on Mastodon.
$mastodon_server Your Mastodon instance URL.
$mastodon_account Your account.

Token and authentification:
$your_mastodon_access_token (optional) This is a token you can get in your Mastodon account by going to Settings → Development and registering your site here. Without this token, the API will run in "public mode" and will limit the number of messages you can list (~60 for my instance). Instances of Mastodon might have no public mode enabled. In this case the authentication token method might be mandatory to connect to your messages.

Cache: I wrote a caching system because with more than 13K daily visitors to my blog (which sometimes peaks at over 300K), I did not want to be a problem for the bandwidth of my Mastodon instance. The default in the code is set to 24h. You can extend it with something more complex if your blog system gives you a date. I use 1h for this week's blog post, then 4h for the month and 12h after that. Just be kind to the bandwidth of your Mastodon instance and donate to them to help cover the server costs.

Inspiration

The inspiration for this system came from Carl Schwan's blog post "Adding comments to your static blog with Mastodon". If you are looking for a Javascript client-side method, check out his post.

I also found a real-life example of authentication by token to be very useful, found on "MastodonBotPHP" by Grimstack aka Eleirbag89 on Github.

Also very useful is the official Mastodon API documentation, well done to the contributors who maintain this kind of detailed documentation.

Bonus artwork: because I'm happy, here's a happy Mastodon mascot as a postman that I painted this morning.


89 comments

link Sheldon Chang 🇺🇸   - Reply
sysop408@sfba.social

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!

link Fabián Fucci   - Reply
fabianfucci@socel.net

Super cute!

link bison ✅   - Reply
bison@mastodon.social

this is so cool :BlobhajTinyHeart:
and cute mascot interpretation :BlobhajHeart:

link Andrea Grandi 🦕   - Reply
andreagrandi@mastodon.social

the postman mascot is simply beautiful 😍

link David Revoy Author, - Reply
davidrevoy

@andreagrandi 😊 Thank you.

link GunChleoc :verified_gaelic: Contributor - Pepper&Carrot dev, - Reply
gunchleoc@ailbhean.co-shaoghal.net

Testing 🙂

Thank you for sharing the source code!

link David Revoy Author, - Reply
davidrevoy

@gunchleoc 😊 I'll flush the cache so your message will be in-sync faster on the blog.

link GunChleoc Contributor - Pepper&Carrot dev, - Reply
gunchleoc@mastodon.scot

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: w3schools.com/howto/howto_js_c

link David Revoy Author, - Reply
davidrevoy

@gunchleoc 😍 Oh, that's a great idea. I'll do that. Thank you for the link.

link hairylarry   - Reply
hairylarry@gamerplus.org

@davidrevoy@framapiaf.org

This is really cool and may work as a commenting system for my Plain Text Blog which is written in php.

link David Frank   - Reply
bitinn@mastodon.gamedev.place

I am sure you also looked into “webmention”? It also does what you would like to do but require a bit of setup.

link David Revoy Author, - Reply
davidrevoy

@bitinn Hey, I'm totally discovering it with your message. Thanks, I only read the introduction on w3.org/TR/webmention/ and I'm really interested. I'll try to find more real life example and integration in PHP.

link David Frank   - Reply
bitinn@mastodon.gamedev.place

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 very lite JavaScript): marisa.club/a-new-adventure/

link amino   - Reply
amino@omaramin.me

@bitinn I think I went the same route as you. I wrote up a very simple tutorial on how to get comments from the fediverse to webmentions then onto a blog post - https://omaramin.me/posts/fediversecomments/

link David Revoy Author, - Reply
davidrevoy

@amino Thanks for sharing and for taking the extra effort of documenting it in a blog-post! 👍
@bitinn

3 ★

link LilaTequila   - Reply
LilaTequila


Stylé !!

link :terminyal: 𝙹𝚎𝚛𝚎𝚖𝚢 :~$   - Reply
nnjeremy@social.wakemu.fr


It's a very good idea !
Thanks for sharing the code 😄

link Craig Maloney ☕ Contributor - Pepper&Carrot admin, - Reply
craigmaloney@octodon.social

Nice! Hoping it works out!

link Jaime Herazo   - Reply
jherazob@mastodon.ie


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!

link lebout2canap ⏚   - Reply
lebout2canap@mastodon.tedomum.net

@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.

link David Revoy Author, - Reply
davidrevoy

@lebout2canap @jherazob Interesting. Let me know if you find a way.

link Marco Bresciani   - Reply
AAMfP@fosstodon.org


Glad you're back. hope everything will go fine. 👍🏻

link /lib/sys   - Reply
libsys@chilemasto.casa

cool

link Wolthera Krita dev, - Reply
Wolthera@mastodon.art

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.

link David Revoy Author, - Reply
davidrevoy

@Wolthera Thanks! Oh, that's a good point. I'll report this in the blog-post.

link Basil   - Reply
basil@trivial.observer

this is the way 😃

link Touhoppai   - Reply
touhoppai@mastodon.social

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à !

link David Revoy Author, - Reply
davidrevoy

@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.

link Popolon 🇵🇸☮️🌳🎋 ᠫᠣᠫᠣᠯᠣᠨ🐎抱抱龙🐉 ⏚φ   - Reply
popolon@pleroma.popolon.org

@touhoppai Wordpress supporte le Fediverse (Mastodon n’est qu’un des acteurs) depuis au moins 1 ou 2 ans. Il y en a aussi dans NextCloud, parmi les gros moteurs connus, ou encore Hubzilla. Il y a aussi plein de moteurs très spécialisés dans le Fediverse, qui vont pouvoir être lu dans les fils Mastodon (comme Funkwhale pour la musique, PeerTube pour la vidéo, PixelFed pour les images, etc).

Il y a quelques références ici, mais ça aurait besoin d’une mise à jour : https://fr.wikipedia.org/wiki/Fediverse#Membres_du_Fediverse

link Nartance Contributor - Author of Pepper&Carrot Mini - French translation, - Reply
Nartance

And that's a win! Congrats :D \o/

link David Revoy Author, - Reply
davidrevoy

@Nartance Thank you 👍

link Nemiryah   - Reply
nemiryah@s.ilustre.li

Looks like an amazing way to strengthen participation, good job! 🎉

link Token   - Reply
coin@asimon.org

I saw a tech site that uses github comments as a system, but if you do that with Fedi replies, that's also cool.

link David Revoy Author, - Reply
davidrevoy

@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.

3 ★

link Token   - Reply
coin@asimon.org

Fore sure. Yours is better since you have full control. I just remember that the tech site was using github because it had a good spam filter.

link potatoxel   - Reply
potatoxel@pleroma.potatoxel.org

@coin thanks for avoiding github c::::

link Julian Fietkau   - Reply
julian@fietkau.social

It's nice to see another implementation of blog comments using the Mastodon "context" API. 😀 I use it for 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: cassidyjames.com/blog/fedivers

link David Revoy Author, - Reply
davidrevoy

@julian Thank you for the link! Very interesting. 👍

@cassidy

2 ★

link Sloppy Tentacles 🦑   - Reply
bloodywing@eggplant.social

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

but it looks fine so far. :meru_headpat:

2 ★

link David Revoy Author, - Reply
davidrevoy

@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.

2 ★

link YoYunix   - Reply
yoyunix@mastodon.social

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?

link David Revoy Author, - Reply
davidrevoy

@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 😉

link YoYunix   - Reply
yoyunix@mastodon.social

any idea what could be a replacement if this fails?

link David Revoy Author, - Reply
davidrevoy

@yoyunix No idea 😇 The future time will bring new challenges but also probably new solutions. I'll study that when it will happen.

link nunux   - Reply
nunux@mastodon.social

Merci pour vos oeuvres et vos contributions à l'Open source.

😉

link rick   - Reply
rick@a.n0id.space

whoa nice idea, i also had sth like that in mind. But i just wanted to add a link to the fedi post, and not sync it back to my blog. your solution is way cooler :blobcataww:

link jcarnu 🐘🐧   - Reply
jcarnu@mastodon.xyz


Nice job! Nice news!
I love all your créations, they are so joyful !

link David Revoy Author, - Reply
davidrevoy

@jcarnu ☺️ Thanks!

link ApisNecros   - Reply
ApisNecros@ioc.exchange

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 is 18 digits long, and you don't need a content-type header since it's a GET request

link David Revoy Author, - Reply
davidrevoy

@ApisNecros Thank you for the advice. I'll note the changes and edit it them soon!

link Nomis   - Reply
nomis38

nice happy ending, let's hope troll will stay away. Nice postman ❤️

link David Revoy Author, - Reply
davidrevoy

@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.

link Marlene Breitenstein Art   - Reply
breitensteinart@mastodon.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...)

link David Revoy Author, - Reply
davidrevoy

@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.

link Dad   - Reply
GeekAndDad@mastodon.social

Love the image!

link Valvin (framapiaf) Contributor - Pepper&Carrot admin and dev, - Reply
valvin

oh nice! Great you've found the reason of missing posts on framapiaf 🙂

link David Revoy Author, - Reply
davidrevoy

@valvin 🙂

link Adam Dalliance   - Reply
pre@boing.world

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.

link farcaller   - Reply
farcaller@hdev.im

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.

link David Revoy Author, - Reply
davidrevoy

@farcaller Thanks, and a standard or a browser extension for that would be indeed a cool idea.

link maxmoon 🌱   - Reply
utopify_org@veganism.social

Why are our avatars replaced with chatons on the website? Is this because of copyrights?

link David Revoy Author, - Reply
davidrevoy

@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 peppercarrot.com/extras/html/2 🙂

link maxmoon 🌱   - Reply
utopify_org@veganism.social

wow, okay, a lot of stuff I wouldn't even thought of until I would run into it.

Thanks for the explanation.

link David Revoy Author, - Reply
davidrevoy

@utopify_org No worry. I ran into all of them deeply and hard. That's why I keep them in mind now.

link Noe 🐝✨   - Reply
nooe

Seems to work smoothly, congrats!

link Rupert Reynolds   - Reply
RupertReynolds@hachyderm.io

And now I'm happy too :-)

link Ollie   - Reply
ollie@tech.lgbt

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.

link David Revoy Author, - Reply
davidrevoy

@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.

link Roni Laukkarinen   - Reply
rolle@mementomori.social

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.

link David Revoy Author, - Reply
davidrevoy

@abosio 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 🙂

link Anthony Bosio   - Reply
abosio@fosstodon.org

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.

link AppleTalk   - Reply
AppleTalk@sfba.social

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.

link Klebs (Les Ateliers PHV)   - Reply
lesateliersphv@mastodon.top

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.

link Raghukamath Krita team, - Reply
raghukamath@mastodon.art

how is GDPR content removal request handled? I assume deleting the comment from the mastodon instance delete it in your blog too.

link David Revoy Author, - Reply
davidrevoy

@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. 😺

link ~/hyde   - Reply
hyde@lazybear.social

Carl's post inspired me too 😉

Well done 👍

link Nartagnan ⏚   - Reply
nartagnan@mstdn.fr

Quand je suis content, je partage un smiley. Et toi tu nous offre une peinture 😍

link Kosmimatis🔥💍   - Reply
kosmimatis@handmade.social

that is great solution! Bravo!!! Keep up your great job!

link loaExMachina   - Reply
loaExMachina@jorts.horse

Hell yeah! The legendary FOSS artist found a FOSS solution! I look forwards to commenting on the next Pepper&Carrot with this system!

link thgs   - Reply
thgs@phpc.social

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).

link hive ⬡   - Reply
theotheroracle@tech.lgbt

hope it works out !

link Sir Alecks Gates   - Reply
agates@activitypub.agates.io

If you put <podcast:socialInteract> under each <item> you can link the RSS feed to ActivityPub. Not that RSS readers use it yet, but they could if enough people adopted it.

https://github.com/Podcastindex-org/podcast-namespace/blob/main/docs/1.0.md#social-interact

link Ritzga   - Reply
Ritzga@snaggletooth.life

super cute!

link Alex   - Reply
stsquad@mastodon.org.uk


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

link Aki Goupil   - Reply
aki_goupil@icedtux.no

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!

link David Revoy Author, - Reply
davidrevoy

@aki_goupil 🙂 Yes, same. Difficult to keep many accounts. Your comment just got sync on the blog, btw: davidrevoy.com/article981/i-ma (if you want to check the concept working 'live'), my reply will now take 4h to appear.

link Aki Goupil   - Reply
aki_goupil@icedtux.no

I did! I opened the blog link even before, because I wanted to see how it looked. I really like this new system.


Post a reply

The comments are synchronised every 12h with the replies to this post on Mastodon:


How to use this? (click here to unfold)
Open a new Mastodon account on the server of your choice. Then, Copy/Paste the adress above in your Mastodon 'Search' field. The post will appear and you'll be able to fully interact with it. You'll have full control of your posts: edit, remove, etc. After that, your message will appear here.

Just please note that it may take up to 12 hours for your changes to be reflected here.