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.data-exclude-reblogs: "true" or "false" according to whether or not you'd like to exclude reblogs/boosts. The default behavior is that reblogs/boosts are included.
Emfed sanitizes the HTML contents of toots using DOMPurify to avoid malicious markup and XSS attacks.
You can also embed an individual post, the replies to a post, or both. This mode lets you use Fediverse replies as a comment system for static sites, inspired by a blog post from Carl Schwan.
Use this to embed a post along with its responses:
<a class="mastodon-thread"
href="https://mastodon.social/@Mastodon"
data-toot-id="112011697087209298"
>Thread from the Fediverse</a>
By default, both the original post and the replies appear.
You can customize this link with data- attributes:
data-exclude-replies: Set totrueto exclude the replies.data-exclude-post: Set totrueto exclude the post, leaving just the replies. This may be more appropriate for the blog-comments use case mentioned above.
This mode uses the same style of markup as the user feed, so you can use the same CSS to provide style for these embedded posts.
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.6.0: A new
data-exclude-reblogsconfig option for hiding boosts. - v1.5.0: Add a mode to embed a single post and its replies.
- 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.