Twitter used to have a really convenient way to embed a feed into your website, but now Twitter is dead. Emfed is a simple replacement for Mastodon that works entirely in the browser, without a server-side component (beyond your favorite Mastodon instance itself).
To use it, put a special link like this where you want the feed to appear:
<a class="mastodon-feed"
href="https://mastodon.social/@Mastodon"
data-toot-limit="4"
>follow me into the Fediverse</a>
Then include the JavaScript (probably at the end of your <body>):
<script type="module" src="https://esm.sh/emfed@1"></script>
Emfed generates some pretty basic markup for the feed.
You probably want to style it to look like a proper social media feed, which you can do with plain ol' CSS scoped to the .toots selector, or you can use its provided CSS (in your <head>):
<link rel="stylesheet" type="text/css"
href="https://esm.sh/emfed@1/toots.css">
You can customize the feed with data- attributes:
data-toot-limit: The maximum number of toots to display.data-toot-account-id: Emfed needs to make an extra API request to translate your human-readable username (like@Mastodon) into an internal ID (like 13179) before it can look up your toots. If you have empathy for the machine, you can make everything faster by specifying the ID directly here.data-exclude-replies: "true" or "false" according to whether or not you'd like to exclude replies. The default behavior is that replies are included.
Emfed sanitizes the HTML contents of toots using DOMPurify to avoid malicious markup and XSS attacks.
Type make dev to serve an example page.
Some missing features you might be interested in contributing include rendering media beyond static images (GIFs, videos, and audio), using a BlurHash placeholder before media has loaded, and optionally filtering out replies or boosts.
- Mastofeed: A server-side iframe-embeddable feed generator.
- Fedifeed: Like Mastofeed, but for other ActivityPub software too.
- Mastodon embed timeline from idotj: Also client-side. I wanted something with secure HTML embedding, automatic username lookup, and simpler URL-based configuration.
- v1.4.2: Switch to a more "normal" build process.
- v1.4.1: Fix npm publication.
- v1.4.0: Split into multiple submodules, which also lets you avoid automatic transformation.
- v1.3.0: Drop the dependency on Mustache. Fix a bug where, on some browsers, the
data-*attributes would not work (so we'd always use the default configuration). - v1.2.0: Display image attachments.
- v1.1.0: Display boosts (reblogs) correctly.
- v1.0.1: Fix an incorrect URL when
data-toot-account-idis not provided. - v1.0.0: Initial release.
Emfed is by Adrian Sampson. It is dedicated to the public domain under the terms of the Unlicense.