Hello everyone, I hope you are well. Today’s post is actually in response to a special request. I had a widget here on the site that displayed my Twitter feed in the sidebar. Now that I barely use the artist formerly known as TwitterI wanted to change it for one Mastodon widget. So I posted on Mastodon asking people how to embed a feed into WordPress and it seems many other people have had this request as well. A quick glance to your right will show that I managed to figure this out and it really wasn’t difficult, but people have asked me if I could share my solution. So that’s what I’m going to do today. Keep reading if you too want to integrate your Mastodon business into a WordPress site.
Now I have to say up front that I really can’t take credit for this. All the work is done via a great plugin I found called Include Mastodon feed by Wolfgang.lolit’s in the plugin store and it’s free. Just search for it. This plugin allows you to use a shortcode to embed your feed, but it requires a bit of setup. 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, then use the following URL structure to get the data in JSON format.
It’s obviously 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 to Mastodon.social and just typed in that URL. Here is what it returns…
As you can see in the image above, the account ID number is listed at the top of your results. Write it down, it’s very important. Next, we’ll use it to create the shortcode embed.
Navigate to wherever you want the Mastodon feed to appear, whether it’s a new page, post or, in my case, the sidebar and add a shortcode block or widget by selecting it as below.
All we have to do now is create our shortcode and test it. The format should be as follows:
[include-mastodon-feed instance="YOUR-INSTANCE" account="YOUR-ACCOUNT-ID"]In my case, here is what I used…
[include-mastodon-feed instance="mastodon.social" account="553058" limit="5"]I made a few mistakes and it took some tweaking to make it work. For the Instance variable, don’t add “or something like that at the beginning. I did this at first and it just didn’t work. Again because I’m on the mainnet Mastodon.social For example, I have no idea how easily this will work with others, like self-hosted instances.
The only other problem I had once this code was working was the massive amount of messages it pulled by default. A list of 20 posts was pulled at the bottom of my page, so a quick search of the plugin’s excellent FAQ and documentation showed that I could add limit=”5″ to limit it to 5 posts. Obviously, you can adjust this to whatever suits you best and also check out the many other options to customize the output. A quick recap of the steps involved:
- Install the Include Mastodon feed plugin
- Get your ID number with JSON request URL
- Add a shortcode block
- Write your shortcode using the ID number and options you prefer
And there you go, my activity feed has been integrated thanks to the excellent work of the plugin author Wolfgang.lol. Hope this helps some of you setting it up as well. If you use the plugin, consider donating to the author to show your support, as I plan to do.
That’s it for this requested post. I’ll be back in the future with more stuff, I’m sure. If you use this plugin and find the guide useful, or perhaps find something I missed, let me know in the comments.
See you soon,
And