Skip to content
← Home

Showing Mastodon Reactions on a Statamic Website

A few weeks ago, I rebooted my website with the intention of publishing more content. To inject a bit more "interactivity" into it, I decided to display Mastodon reactions related to my articles (likes, reposts, responses). Yesterday, I finally had the time to bring this feature to life.

Part 1: Webmentions, webmention.io & brid.gy

There are many articles how to implement webmentions utilizing brid.gy and webmention.io.

The process is more or less:

  1. Link your social media account to brid.gy, which scans for posts and reactions and notifies related websites that contain...
  2. ...a <link rel="webmention" ...> in their <head>, leading to a request on webmention.io, which then provides an API to fetch all those mentions.
  3. Developers pull data from the API for their desired use.

Having performance and privacy in mind I implemented the following:

  1. A Laravel command webmentions:fetch retrieves all webmentions from webmention.io and saves them as {article-slug}.json in local storage.
  2. A Statamic tag {{ webmentions :slug="slug" wm-property="like-of" }} parses the corresponding JSON and filters for e. g. likes.
  3. A Statamic modifier {{ ... | remove_initial_mentions }} that removes @ mentions at the start of a post.
  4. A Statamic modifier {{ ... | initials:2 }}, which returns the first letters of the specified number of words.
  5. A cron job on ploi.io that runs webmentions:fetch twice daily and regenerates my static pages.
Screenshot of website which shows webmentions (likes, reposts, comments) including the content of reposts.
Screenshot of webmentions showing up in blog post

If you're curious about the complete feature's code, check out the commit on GitHub. But, continue reading before you decide to implement it yourself.

Part 2: Doubts About the Results

There are several posts voicing concerns about webmention.io and brid.gy. I thought I had optimized it well:

  1. I .gitignored all generated JSONs, so the data isn't on GitHub but only temporarily on my server.
  2. I handled fetching server-side, so my website visitors wouldn't need to connect to third-party APIs.
  3. I opted not to display avatars, using initials instead.

However, once everything was in place and I saw the posts on my website, it didn't feel right.

So here's my take on it:

Posts live in the context of their platform, and even if it's public, that context always matters.

Interestingly, I've had read similar thoughts in another article, but it seems I needed to experience it firsthand to realize that exposing people's reactions without their explicit consent goes against my fourth principle for web development:

🫡 Trustworthiness: Respect for security, privacy and reliability.

Part 3: Mastodon API

This morning I decided to replace my initial implementation and go a different route. I set up:

  1. An a Array field in Statamic blueprint for storing id, replies_count, reblogs_count and favourites_count.
  2. A Laravel command to fetch the relevant Mastodon API data for each post's id, updating the appropriate fields.
  3. A cron job on Ploi.io to run the command regularly.

This approach brought several technical advantages:

  • Optimized performance and a lighter setup.
  • Reduced dependency on third-party services, which by the way proved somewhat unreliable during my tests.
  • Tighter integration with how Statamic operates, benefiting from its automatic cache invalidation.

Feel free to check out the code yourself in this commit on GitHub.

Screenshot of Mastodon Reactions in blog post. No replies looking like comments.
Screenshot of final implementation

And last but not least, it aligns so much better with my commitment to transparency.

Reactions on Mastodon Post:

7
3
3

Mario Hamann

Creative Developer, Musician