Introducing Embed-a-Toot

Mastodon’s current option for embedding posts (“toots”) on other websites is inefficient, inflexible, and insecure.¹ It embeds posts via an iframe element which loads over a megabyte of content and scripts from the Mastodon server. That iframe gives those scripts full control over your webpage.² You, the embedder, get no control over how the content is rendered on your page. Important content can be cropped out of view, as journalists have complained when trying to embed toots.

Dan Goodin @ dangoodin @infosec.exchange

Is there any way to modify how embedded toots look? When I embed toots in my Ars posts, there are only a few lines. I'd love for them to include more. Also, the scroll bar on the right is almost invisible.

I prefer to embed instead of posting a screenshot, so please don't suggest that.

Fortunately, Mastodon’s API empowers third-party developers to create better options.

I’ve used that API to create Embed-a-Toot, which gives you full control over the appearance and behavior of Mastodon posts you embed on your site.

Embed-a-Toot transforms posts into plain-old HTML for embedding, which your browser can render even when the Mastodon server that hosted that content is inaccessible and even if the browser has JavaScript turned off.³

That embeddable HTML content captures the text of the post, including counters (of favorites, reblogs, and replies) at one point in time. Some who embed a post may want to update the posts’ content if the posts’ author edits it, or update the counters as the post gains traction. Others may want to ensure readers see what they saw at the time they embedded the content. Embed-a-toot allows you to opt to update the content, counters, both, or neither.

To update embedded posts on a page you will need to include a script onto that page. The script runs on the browser of those reading your page, querying the server hosting the post via the Mastodon API, then updating the content directly onto the page in the reader’s browser. The script is 3kb, so the network overhead of this embedding approach remains a fraction of a percent of embedding with Mastodon’s iframe. The increased efficiency means your readers see the content faster and the Mastodon server hosting the post needs only serve a tiny fraction of the traffic it would need if you had used an iframe. The script is simple, open source, so you can audit it, or modify and recompile it.

Embed-a-Toot offers default style sheets that I hope many will find sufficient, but I encourage others to modify them or to submit pull requests with more professionally-designed styles.⁴

Lastly, Embed-a-Toot tries to be courteous in its use of the Mastodon API. If the operator of a Mastodon server is wondering why your page is generating traffic to their server, we make it easy for them to find out. All requests include headers that indicate the request came from Embed-a-Toot:

Request-Module: https://github.com/UppaJung/embed-a-toot v1.0.0
Request-Purpose: update rendered post on the referring page

Please try out Embed-a-Toot.

Please submit issues, PRs, and new styles via GitHub.

If you’d like Mastodon to support this style of content-inclusive embedding, please add support for the GitHub Issue requesting it.

Stuart Schechter @ MildlyAggrievedScientist @mastodon.social

Mastodon's iframe-based approach for embedding posts ("toots") on other websites is inefficient, inflexible, and insecure. Fortunately, the Mastodon API lets us build better options.

https://www.stuartschechter.org/posts/embed-a-toot/