Embed Mastodon

[xplosionmind]

It would be awesome if embedding Mastodon posts was supported!

[gfscott]

Definitely been thinking about this! I'd be curious how you'd want to handle URLs, since there are hundreds of Mastodon servers out there, each with their own URL.

At a minimum, I think you'd have to configure the URL of the server you use:

eleventyConfig.addPlugin(embedEverything, {
  mastodon: {
    options: {
      server: "mastodon.social"
    }
  }
});

But what happens if the ~toot~ post you want to embed originates on the social.vivaldi.net server? What URL do you paste? Apologies, I'm not a regular Mastodon user (yet!) and I haven't really researched this in any depth. But I'd like to know how you'd expect this to work in practice and how we can come up with the easiest workflow.

[gfscott]

OK, did some quick and dirty research here:

1. Made an account on social.vivaldi.net.
2. Browsing that server, clicked through to a post that's federated from a different server: https://social.vivaldi.net/@internetarchive@mastodon.archive.org/111247893684188804
3. Clicking the Embed option in the kebab menu, you get this iframe markup:

   <iframe src="https://mastodon.archive.org/@internetarchive/111247884522639243/embed" width="400" allowfullscreen="allowfullscreen" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"></iframe>

So it seems like all the components we need to rebuild the original post URL are present (server, user handle, post ID) regardless of which server you're browsing from. So that bodes well!

I suppose edge cases could include:

• Servers that have turned the embed feature off somehow? I guess you just get a 404 in the iframe in that case.
• Anything else?

[xplosionmind]

I believe that taking advantage of existing datasets of existing and active Mastodon instances and their characteristics could be very helpful!

Here is the first one I found, it seems very complete!

[gfscott]

(This is mostly me just making notes as I go, don't mind me)

So I spoke too soon on the post ID — a federated post that shows up on your server has a different ID from the originating server. From the example above:

Federated server ID	Originating server ID
111247893684188804	111247884522639243

Knowing your server's post ID doesn't tell you anything about the original post's ID. Which is too bad. But there's an API, so we can get the required URL that way:

{
  "id": "111247893684188804",
  "created_at": "2023-10-17T02:00:03.000Z",
  // ...
  "url": "https://mastodon.archive.org/@internetarchive/111247884522639243",
  // ...
}

We can then use that URL to create the embed code. This is similar to how the Soundcloud plugin works, which requires calling an API to get the required embed data. That's why it's not enabled by default in all-in-one plugin, and I'd do the same here — you'd have to opt-in for Mastodon embeds (unless you use it standalone). This would be the minimum required configuration:

eleventyConfig.addPlugin(embedEverything, {
  add: ['mastodon'],
  mastodon: {
    options: {
      server: "<example.mastodon.server>"
    }
  }
});

I think that's a plan. Definitely doable, just a matter of carving out some time!