Unlike Twitter embeds (left), which include the content of the original post and its author’s name, Mastodon (right) uses iframes.
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?
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 📉
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!
https://github.com/stefanbohacek/fediverse-embeds-wordpress-plugin
The plugin already works really well with Mastodon. Here are the performance results of this page that contains 43 Mastodon embeds.
And here is the same page with my WordPress plugin activated.
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.
