Jeff.blog

UPDATE: TIL, This code block is not needed. WordPress hides access to this rel attribute under the Screen Options drop- down under the “advanced menu properties” checkbox called Link Relationship (XFN). Better instructions are available here. For posterity, the post as published:

---

I recently set up a Mastodon account (I’m @jb@hachyderm.io — follow me)!

I noticed the “edit profile” page offers an easy way to verify that you control URLs that I add to my profile:

This is just a hyperlink (a href tag) that includes a rel="me" attribute.

I wanted to add a link to my new social media presence anyway, so I added a “Custom Link” to my “Social Links Menu” in the WordPress Customizer. For better or worse, the UI does not let me customize the HTML that these links end up printing on the page:

I was able to quickly add the requisite attribute with this code snippet in a custom plugin:

add_filter( 'nav_menu_link_attributes', function ( $atts, $menu_item ) {
        if ( 'https://hachyderm.io/@jb' !== $menu_item->url ) {
                return $atts;
        }

        $atts['rel'] = 'me';
        return $atts;
}, 10, 2 );

Obviously, replace the https://hachyderm.io/@jb in the above with the link to your Mastodon profile.

I reloaded my site and confirmed by viewing the page source / inspecting the link element that the attribute was added.

Once this was in place, I went back to the Mastodon Edit Profile Page and clicked “Save Changes.”

---

I might set up my own instance eventually, since it seems pretty easy to move and I like to tinker 🙂

So far, I’m pretty impressed with the Mastodon new user experience!