Adding Mastodon authentication links in WordPress

With all problems related with Twitter at the moment , I spent the last couple of weeks getting into posting on Mastodon instead.

I briefly played around with running my own Mastodon instance using a virtual machine, but I found it a little lonely out on my own. It was difficult to discover new people and ‘toots’ because there was nobody but me in my ‘local’ feed, and very little in my ‘federated’ feed. So I moved onto the Irish instance mastodon.ie, which is full of lovely people.

Verification

Unlike Twitter, where you now pay $8 for a verified blue tick against your name, Mastodon allows users to self-verify their accounts by listing one or more website URLs on their profile that can help identify who they are.

Once it’s set up correctly, a tick appears next to the website domain(s), looking a little like this:

Mastodon screenshot showing the profile for Richard Bloomfield, with links to two websites indicated as authenticated with green backgrounds and green ticks.

It works using reciprocal links. The Mastodon profile links to the website, and the website also needs to have a link back to the Mastodon profile in the following format:

<a rel="me" href="https://[server url]/@[username]"></a>

In my case, the link to my Mastodon profile from my website is <a rel=”me” href=”https://mastodon.ie/@richardbloomfield”>

The important addition to this HTML code is the rel=”me” bit. This tells the Mastodon server that the person who owns the website is saying this particular Mastodon profile is theirs, adding authority that it is a legitimate account. This rel=”me” doesn’t normally appear in HTML links, and needs to be purposefully added by the website owner.

Setting up rel=”me” in WordPress

I had some initial problems adding in the rel=”me” bit to the Mastodon profile links on my website.

I wanted to use the standard ‘Social Icons’ block in my side bar, and add Mastodon to my existing Twitter, Instagram, and other accounts. Unfortunately I found that this block doesn’t support any way to add the rel=”me” bit to a link.

So as an interim measure, I instead added the Mastodon link as a Menu item. This needed a bit of fiddling to work. On the Appearance -> Menus page, you will need to click on the ‘Screen Options’ at the top right to expand the options, and then enable the the ‘Link Relationships (XFN)’ checkbox.

Wordpress screenshot showing the Menu page, with the Screen Options section expanded, and the Link Relationship (XFN) property enabled.

This adds an additional box to the each menu item called ‘Link Relationship (XFN)’ – and in the box you can add ‘me’.

Wordpress screenshot showing the Menus page, with a menu item for Mastodon including a extra field called Link Relationship (XFN) that is populated with the value 'me'.

The ensures that correct rel=”me” gets added to the Menu item.

However, at this point I still wasn’t entirely happy. I had some of my social links in the ‘Social Links’ block, and others in a Menu. I would have preferred them all in once place, so I did a quick google search about the ‘Social Links’ block again – and I found a WordPress support ticket that mentioned that it’s possible to fix the rel=”me” omission by installing and activating the latest Gutenberg plugin.

With the Gutenberg plugin enabled, the ‘Social Links’ block has an additional ‘LINK REF’ field added to the ‘Advanced’ section of the block – that enabled me to added in the value ‘me’ and have the correct link back to my Mastodon profile.

Wordpress screenshot showing the Widgets page, with a Social Links block and Mastodon icon. The Block values in the sidebar include an additional 'LINK REL' field to enter the link relationship.

There are other plugins out there that can also help add the rel=”me” value to links, but I’m happy with the Gutenberg one.