With the meteoric rise in popularity of Mastodon following the acquisition of The Bird Site Which Shall Not Be Named^* by You-Know-Who^*  a question has been forming in everyone's head: “How can I display my toots (posts) timeline on my site?”. People looking for some Joomla modular embed code will be disappointed to find none. However, you need no third party module, no embed code, and no JavaScript! Everything you need is already included in Joomla itself.

^* I've heard the new overlord is a very capricious and litigious fella. I am sure y'all know what I am talking about.

In this article I will tell you how to use Joomla 4 to display Mastodon toots on your site.

The open web is about standards — and we've got them!

Mastodon is part of the Open Web, a not-so-novel concept which talks about interoperable sites based on established and universally agreed upon standards. This is how the web worked in the 1990s, before it was corrupted by corporate greed.

Mastodon implements a number of web standards, including RSS feeds. Your account's RSS feed syndicates your toots timeline excluding replies and reblogs, i.e. it contains only your original content toots.

Joomla has supported RSS feeds since it was still called Mambo in the early 2000s. It has a Feed Display module type which allows us to display an RSS feed as a module anywhere on our site.

Therefore we can use Joomla's RSS feed display module type to display our Mastodon toots timeline.

Find your Mastodon RSS feed

The long way to get there:

1. Go to your Mastodon instance.
   For example, my Mastodon account is hosted on FOSStodon so I go to https://fosstodon.org/.
2. Log into your account, if you have not done already.
3. Click on your profile picture
4. Copy the URL you see in your browser's address bar.
   For example, the URL I see is https://fosstodon.org/web/@nikosdion.
5. Remove the /web part and append .rss at the end.
   For example, my feed's RSS URL is https://fosstodon.org/@nikosdion.rss . 

Alternatively, you just need to know the full handle of the Mastodon user you want to show toots from. For example, my wife's handle is @This email address is being protected from spambots. You need JavaScript enabled to view it.. The part before the second at-sign is her username, the part after the second at-sign is the server instance she's using.

The RSS feed of every Mastodon account is https://<SERVER INSTANCE>/<USERNAME>.rss. This means that the RSS feed of my wife's toot timeline is https://front-end.social/@crystal.rss .

Setting up a Joomla Feed module

1. From the side bar click on Content, find Site Modules and click the plus sign next to it.
2. Select the Feed Display module type.
3. Enter your Feed URL you determined in the steps above.
4. The Feed Description is your full name on Mastodon and the Feed Image is your avatar there. I chose to display them. The Item Description is the content of your toot; you need to set this to Yes for the module to make sense for our purpose.
5. Set up the position and menu assignment as you'd do with any other module, then click on Save & Close.

If you have not already done so, it is a good idea to enable caching on your site at this point. Caching makes sure that your site will only try to load the Mastodon RSS feed once every few minutes instead of on every single page load on your site. This is very important to ensure that your site remains fast and responsive and that you do not overload the Mastodon instance you have an account with (this could get your server's IP banned and/or your account suspended). I have set up my site so that it only refreshes my Mastodon feed once every hour.

Make it look pretty

You will observe that this kind of feed display is not very aesthetically pleasing. It looks like stuff was thrown on the page. Well, luckily, Joomla has provided a mechanism for us to fully customise the output of any core extension: template overrides.

I have created a template override for mod_feed (Joomla's “Feed Display” module) to display Mastodon RSS feeds. Download this content and place it into your template's html/mod_feed/fediverse.php file. For example, if your template lives in templates/mytemplate create the folder templates/mytemplate/html/mod_feed and create a file fediverse.php in it with the contents of the URL I provided.

Now edit the feed module you created above and go to its Advanced tab. The Layout dropdown should now display a new entry, fediverse. Select it and click on Save & Close. Your feed module will now look like it does on my blog.

Note: If you are not using a template based on Bootstrap 5 you may have to edit the template override file (fediverse.php) to apply appropriate formatting and/or write some custom CSS for your template.

FOSS FTW!

Using Free and Open Source Software (FOSS) which supports open standards is a cornerstone of the open web. The FOSS social network supports an open standard (RSS) which is also supported by our FOSS CMS. Making the two work together is trivial.

FOSS loves customisation, too! Tinkering, optimising, and tailoring is built into the DNA of FOSS. Using Joomla's built-in support for easily overriding the output of its core software we can shape our RSS feed display into something which is aesthetically appealing. Even better, we can do that without using any privacy invading, slow to render JavaScript. How's that for a major win for openness and privacy?