Embedding Mastodon Posts on WordPress

TLDR, if you can’t get Mastodon post to automatically embed to your WordPress. Try using the embed button on your Mastodon post, then dropping it in a custom HTML block on your WordPress site (as described at the bottom of this post).

I’m loving Mastodon and have been posting a lot of art there recently. I was pleased to find how easy it was to embed one of my Mastodon posts to WordPress, like this one:

All I need to do is copy my Mastodon post’s url, then drop it in a new block on WP. It’s got an extra bit at the bottom of the embed, but it still looks pretty good. This extra bit goes away if I use Mastodon’s “embed” code on my site, instead of auto-embedding the url.

It worked easily for me, but I started hearing from other folks who weren’t able to get posts to embed, so I started digging around and found that posts from many other sites, don’t embed nicely. Like the the embed below this paragraph. When I tried adding that URL, WordPress sort of embedded it, but in a very wonky way.

Does anyone know why some Mastodon urls magically embed in WordPress, and others don’t?

How to properly embed a Mastodon post

If you are having trouble auto-embedding posts, you can use Mastodon’s embed HTML code. To do that, find a post you’d like to embed, click the “more” button (the three tiny dots), copy the embed code and open your WP post.

Then create a new block and make it a custom HTML block. You can do this quickly by typing “/html” in a new block and then choosing the block once you see it.

Drop in your HTML from Mastodon, then hit publish. It should look like this.