Embedding A Mastodon Feed

Hello all, hope you are good. Today’s post is actually by special request. I used to have a widget here on the site that showed my Twitter feed in the sidebar. Now that I hardly use the artist formerly known as Twitter, I wanted to change it for a Mastodon widget. So I posted to Mastodon asking people how to embed a feed into WordPress and it seems a lot of other people also had this request. A quick look to your right will show that I managed to figure this out and it really wasn’t difficult, but people asked if I could share my solution. So that’s what I’ll do today. Read on if you too would like to embed your Mastodon activity into a WordPress site.

Now I should say up front that I really can’t take any credit for this. All the work is done via a great plugin I found called Include Mastodon Feed by Wolfgang.lol, it’s in the plugin store and it’s free. Just search for it. What this plugin does is allow you to use a shortcode to embed your feed but that does take a little setting up. So let’s talk about the process.

You need your Mastodon account ID number which you can get via the API. Log in to your Mastodon instance and then use the following URL structure to get the data in JSON.

https://mastodon.social/api/v2/search?q=methoddan@mastodon.social&resolve=true&limit=5

Obviously that’s my account so change the bit after the q= to your username and instance. As you can see I’m on Mastodon.social so I have no idea how easily this works for other self hosted instances. I made sure I was logged in on Mastodon.social and just entered that URL. Here is what it returns…

The results from my JSON query with ID number highlighted

As you can see from the image above the account ID number is listed at the top of your results. Make a note of this, it’s very important. Next we will use it to build the shortcode embed.

Go to wherever you want the Mastodon feed to appear, be it a new page, post, or in my case the sidebar and add a shortcode block or widget by selecting it as below.

Image illustrating how to find and add a shortcode block

All we need to do now is build our shortcode and test it. The format should be thus:

[include-mastodon-feed instance="YOUR-INSTANCE" account="YOUR-ACCOUNT-ID"]

In my case here’s what I used…

[include-mastodon-feed instance="mastodon.social" account="553058" limit="5"]

I made a few mistakes and it took some tweaking to get it to work. For the Instance variable don’t add “https://” or anything like that at the start. I did at first and it just didn’t work. Again because I am on the main Mastodon.social instance I have no idea how easily this will work with others, such as self-hosted instances.

The only other problem I had once this code was working was the massive amount of posts it pulled by default. A list of 20 posts shot off the bottom of my page, so a quick bit of research on the great FAQ and documentation for the plugin showed I could add limit=”5″ to keep it down to 5 posts. Obviously you can set this to whatever suits you best and also check out the many other options for tailoring the output. A quick recap of the steps involved:

  1. Install the Include Mastodon Feed plugin
  2. Get your ID number with the JSON query URL
  3. Add a shortcode block
  4. Write your shortcode using the ID number and whatever options you prefer

Hey presto, there we go, my activity feed was embedded all thanks to the great work of the plugin author Wolfgang.lol. I hope this helps some of you set it up as well. If you do use the plugin consider donating something to the author to show your support, as I intend to do.

That’s it for this requested post. I’ll be back again in future with other stuff I’m sure. If you do use this plugin and find the guide useful, or perhaps find something I’ve missed, let me know in the comments.

See ya,

Dan

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.