A tinted screenshot of three embedded Mastodon posts.

WordPress plugin for fediverse embeds

Unlike Twitter embeds (left), which include the content of the original post and its author’s name, Mastodon (right) uses iframes.

Comparison of Twitter's (left) and Mastodon't (right) embed codes.

Twitter uses a blockquote element, which contains the content of the tweet, and the username. It also comes with a script tag.

Mastodon uses an iframe and contains no information about the post itself, or its author.

This means that if the post gets deleted, or the server it was posted on is temporarily down, or has been shut down, you won’t see anything.

Yes, being able to delete a social media post and have it disappear from the internet (minus the screenshots people took, or text they copied) is a nice feature. But this may not always be desirable, for example, on a site like Botwiki, where the goal is to archive content created by bots. Or perhaps quoting a public figure in a blog article to hold them accountable for something they said online.

Do you embed fediverse posts on your website or blog? What do you use, just the default iframe code? Screenshots?

— Stefan Bohacek (@stefan@stefanbohacek.online) 2023-06-13T15:28:52.306Z

Some people address these shortcomings by copying the post and linking to it instead. Or they might take a screenshot. There’s a few problems with these solutions. First, if the post is updated, the changes won’t be reflected. And you will have to do additional work to make the text in the image accessible to people who can’t see it. Plus the text will be too small to read as the image gets resized to fit on smaller screens.

But beyond the inconveniences listed here, there’s another problem with how these embeds impact your site’s performance.

TIL Mastodon embeds load a whole ass React, two Robotos, and a Font Awesome.

– 300kb (2mb uncompressed) of JS.
– 50kb (400kb uncompressed) of CSS.
– ~500kb of fonts.

There's a serviceworker to offset some of this (good) but that only works per domain. So if you embed posts from different instances, you incur that entire cost per toot.

That's how you get a 10MB blog post, kids. Perf scores 📉

— Dave Rupert (@davatron5000@mastodon.social) 2023-05-18T15:00:46.199Z

I’ve recently started working on a WordPress plugin (based on a similar plugin I made for Twitter) that addresses these issues by using the freely accessible API to turn this iframe into a quote that contains the text, any attached media, and make the post part of your site. This will give you more control over the presentation, more privacy to your site’s visitors, and provide a better experience for everyone.

A very much work-in-progress WordPress plugin for embedding fediverse posts. Any help and feedback will be very appreciated!


— Stefan Bohacek (@stefan@stefanbohacek.online) 2023-06-19T15:48:20.797Z

The plugin already works really well with Mastodon. Here are the performance results of this page that contains 43 Mastodon embeds.

Performance results with iframes on mobile. 51/100 total score.

First contentful paint: 2.2s
Total blocking time: 6.78ms
Speed index: 6.5s
Largest contentful paint: 3.8s
Cumulative layout shift: 0.017
Performance results with iframes on desktop. 63/100 total score.

First contentful paint: 0.6s
Total blocking time: 1.58ms
Speed index: 2.6s
Largest contentful paint: 0.9s
Cumulative layout shift: 0

And here is the same page with my WordPress plugin activated.

Performance results with my plugin on mobile. 91/100 total score.

First contentful paint: 2.5s
Total blocking time: 130ms
Speed index: 2.6s
Largest contentful paint: 2.8s
Cumulative layout shift: 0.018
Performance results with my plugin on mobile. 99/100 total score.

First contentful paint: 0.7s
Total blocking time: 0ms
Speed index: 0.7s
Largest contentful paint: 0.9s
Cumulative layout shift: 0

Adding support for other fediverse platforms turns out to be a bit more challenging, but it is on the way. And there’s a few other features I’d like to add before the plugin is ready to be added to the WordPress plugin directory.

Until then, you can download the plugin from GitHub, and upload it to your WordPress website manually.

If you do, I’d love to hear from you, either via email or Mastodon, or an issue on the GitHub repo.

A tinted screenshot of the Fediverse Export Analyzer interface, showing a visualization of Mastodon user account with profile image and description in the left column, and various details, including account creation date, embedded first post, and posting frequency, and a scatter plot of all posts.

Alt Text Hall of Fame

Making the web a friendlier and more inclusive place, one captioned image at a time.

#accessibility #alt-text #image-descriptions #internet #web #web-accessibility

A tinted screenshot of my visualization project, with my display name, profile image, a tree chart showing each server I'm connected to, and a breakdown of my connections.

💻 Browse all