Mastodon and WordPress seem like a pretty good match for each other. Both are open source platforms based on similar philosophies: To give users a way to build their own piece of online real estate and help democratizing publishing.
Considering their commonalities, wouldn’t it make sense to find ways for the two platforms to work more closely together and integrate with each other? That’s exactly what we want to explore in this post.
The following article talks about how you can use your WordPress site to verify your account on Mastodon, how to display Mastodon content in WordPress, automatically post your WordPress content to the social platform, and more.
Use Your WordPress Site for Verification on Mastodon
As mentioned in our Mastodon tutorial, it’s possible to verify your Mastodon profile. This is similar to the blue checkmarks on another social network, only that you don’t have to pay for it and there are no blue checkmarks but a green one.
The process is also pretty simple. You can verify yourself through your own website. For that, all you need to do is add your website address to your profile and then put a special link to Mastodon on your WordPress site.
Add Your Website and Copy the Verification Link
The first step happens in your Mastodon settings under Public profile. Here, you can add your website to your profile via the extra fields on the right side.
Just put a description in the left column and the URL in the right. When you do and save, it will immediately appear on your Mastodon profile.
You also find the verification link in the Public profile settings under the Verification tab.
Simply copy it with the button. However, you can also create your own custom link. It will work as long as it has the rel="me" attribute in it and appears on your website.
Include the Verification Link to WordPress
There are different ways to add the link to your site. One of the easiest is to use a social icon linking to your Mastodon profile from your website. We have detailed instructions for that further below.
Another option is to add it as a link to your website’s <head> section like so:
<link rel="me" href="https://mastodon.world/@nschaeferhoff">That way, it’s invisible to the user. Place the code above inside your header.php file or add it with a plugin like Insert Headers and Footers. Naturally, user your own profile link, not mine.
You can also enqueue it in your head section via functions.php with this code snippet (credits goes to David Artiss):
function add_mastodon_verification() {
?>
<link rel="me" href="[your Mastodon profile link]">
<?php
}
add_action( 'wp_head', 'add_mastodon_verification' );Other options are to include it in a blog post, put it in your footer, or create a separate verification page. Just know that, if you use any other web page than your homepage (or whichever URL you posted to your Mastodon profile as your website), you also need to include the separate verification page in your extra fields.
Once you have both pieces in place, you just need to wait for the Mastodon servers to pick up on the change. Once they do, you will see the green verification checkmark on your profile.
By the way, if the above is too complicated for you, there is also the Simple Mastodon Verification plugin.
Add a Mastodon Social Icon to WordPress
A good way to integrate your Mastodon account with your main web presence is to include a social icon that links back to Mastodon. As we have learned earlier, this is also a possibility to set up your Mastodon verification.
The best part: That’s a native functionality of the WordPress Gutenberg editor. You can do it very easily using the Social Icons block.
Simply go to Appearance > Editor and open up the page template or template part that you want to add the icon to. The footer is usually a good idea.
Here, use the Block Inserter (the big plus button in the upper left corner), the Add block button, or slash commands to add the Social Icons block.
Once on the page, click the plus sign to add an icon and then choose Mastodon.
Click the icon to add a link to it. Use the link rel option under Advanced in the sidebar to include the rel="me" attribute for verification if you wish so (just enter me, no quotes or anything).
Once you save your changes, the Mastodon icon will appear on your WordPress website and also work as a verification method.
Display Your Mastodon Feed on Your WordPress Website
Some people like to display their social feeds on their websites. Doing so gives visitors a better impression about your company and brand communication as well as additional information. If you want to do that with your Mastodon content, you have several ways to achieve it.
Use Auto Embeds
Mastodon is among the many platforms for which WordPress offers auto-embeds. So, if you just want to show a single Mastodon post on your website, it’s enough to copy and paste its link.
How do you get that?
On Mastodon, simply find the post (aka toot) that you want to embed. Click on the three-dot icon at the bottom and choose Copy link to this post.
After that, you can go to the page on your website where you want it to appear and simply paste the link in the editor. WordPress will automatically turn it into an embed.
Embed Posts Via HTML
As you can see from the screenshot above, the automatic embed didn’t work too well for me. Therefore, I found it a better option to use the Mastodon-native embed function. You can find it in the same place as the option to copy the link to your toots.
Click it to receive a code snippet to copy.
The important thing is that you don’t paste it in the WordPress editor by itself. Instead, use a Custom HTML block to embed it on the page.
This leads to a much better outcome and you can even preview it in the editor itself.
Display Your Entire Mastodon Feed
If you don’t only want to put singular toots on your WordPress site but your entire feed, there is also the Include Mastodon Feed plugin. After installation, it adds the [include-mastodon-feed] shortcode to your website that you can use to display your feed wherever you want.
However, you first have to find out your Mastodon user id for that, which, unfortunately, is a bit of a hassle if you are not an admin of your Mastodon instance. In that case, you have to make an API request using the link below.
https://yourinstance.com/api/v2/[email protected]&resolve=true&limit=5Replace both occurrences of yourinstance.com with the URL of the Mastodon server where your username is registered and yourusername with your actual username. Then, paste it in your browser bar while being logged into your account. If all goes well, this should result in a screen with your user id at the top.
You can then use this to populate the plugin shortcode, which looks like this:
[include-mastodon-feed instance="YOUR-INSTANCE" account="YOUR-ACCOUNT-ID"]Again, replace YOUR-INSTANCE and YOUR-ACCOUNT-ID with the requisite information (don’t inclde http/https for your instance URL) and post the shortcode in the post or page where you want your Mastodon feed to appear on your WordPress site.
When you now preview or publish the page, the feed will appear on the front end of your site.
The plugin shortcode takes a whole bunch more parameters to customize it. You can exclude replies from the feed, limit the number of visible statuses, enable dark mode, and a lot more. You can find all of them on the plugin page in the installation instructions. An alternative plugin solution is Shortcode Mastodon Feeds.
There is also a tool called Mastofeed.com (not to be confused with the .org version, which we will talk about further below). It helps you create HTML markup to post your Mastodon feed on your website and is also worth checking out.
Automatically Post Your Latest WordPress Posts to Mastodon
So, you now know how to include Mastodon content in WordPress. How about the other way around? Another crucial way the two platforms can work with each other is enabling WordPress to automatically post updates to your Mastodon account. There are several solutions for this as well.
Auto-Post to Mastodon With a Plugin
There are several plugin solutions you can use to achieve this. For this example we will use Mastodon Autopost. You can install it in the usual way via the Plugin menu.
After installation, the plugin first asks you to log in to your Mastodon account in the settings.
Enter your instance (the plugin has autosuggestion) and proceed. This will take you to Mastodon where you need to log in to your account and authorize the plugin.
After that, it takes you back to the settings where you mostly configure how you want your posts to appear.
Choose whether to include the title, excerpt, link, and/or tags, if they should appear as private toots, which content types to post, and whether to automatically post everything.
In the Advanced configuration, you can further refine this by creating your own toot template, choosing a character limit, and adding a default content warning if necessary.
Once saved, the plugin will get to work and automatically publish your content to Mastodon. In addition, it adds an option to the WordPress editor where you can decide on an individual post-by-post basis which of them you want to publish automatically.
A very similar plugin with some additional options is Share on Mastodon.
Mastofeed.org
A second, slightly different option to automatically post your WordPress content to Mastodon is to use Mastofeed.org. Here, you can use your site’s RSS feed to post website content to your Mastodon account.
The setup is extremely easy. Go to the site’s homepage and enter your Mastodon instance (again, without http:// in front).
In the next screen, log in to Mastodon and then authorize Mastofeed to post on your behalf. Once back on the original site, click Add a new feed.
After that, post the link to your site’s RSS feed (usually simply yourdomain.com/rss) and choose the visibility level.
Click Add. In the next screen, you can activate the feed by checking the box at the top and clicking Update. After you do, you get access to the options to format how your content is going to appear.
Make sure to click Update if you make any changes. You can also run a diagnostic if there are problems and delete the feed. Once done, Mastofeed will automatically check back for new content and post it to your account.
Connect WordPress to ActivityPub
The last method of how to integrate Mastodon with WordPress that we want to explore is ActivityPub. If you are not familiar with it, ActivityPub is a protocol supported by many platforms of the Fediverse, to which Mastodon also belongs.
There is a plugin in beta status, simply called ActivityPub, which allows you to integrate your WordPress website with it as well. The cool thing is, doing so allows Mastodon users to follow your blog posts on the social network and any replies they send will automatically appear as comments on your website.
Your author pages also become profiles on platforms using ActivityPub that others can follow and automatically receive updates from them. Setup is also pretty easy, you basically just install and activate the plugin, the settings only contain options to configure how your blog content is going to appear.
Customize however you want, save, and start interacting on Mastodon.
Mastodon + WordPress = ❤️
Mastodon and WordPress seem like they should be good pals and they are! There are many different ways to integrate the two platforms with each other.
From using WordPress to verify your web presence, posting Mastodon content to WordPress and vice versa, to fully integrating your site with the Fediverse — there are so man ways to get started. As both of the platforms continue to grow, it will be fun to see what other ways they will find to play together.
How do you integrate your WordPress website with your Mastodon presence or vice versa? Any other plugins or tools to recommend? Then please do so in the comments section!
No Comments