Embedding Mastodon Timelines
Updated  by  nm  2023-December-21 🌃️

Page contents

 

News

Ongoing  To keep up with releases of @idotj’s widget, see gitlab.com/idotj/mastodon-embed-feed-timeline/-/blob/master/CHANGELOG.

2023-November-5  Published this evolving⁠[1] article.

 

Introduction

It’s easy to embed a single Mastodon toot in a web page. For example, here is a toot I posted announcing this article:

 

Details about how to embed a single toot are at fedi.tips/how-to-embed-mastodon-posts-on-a-website/.

To embed a Mastodon timeline, rather than a single toot, you need to use an external tool. Some external tools are discussed below.

 

ℹ

In the embeddings of my Mastodon timeline below, you’ll see that I retoot⁠[2] a lot.⁠🤷

 

@adrian’s Emfed

Embedding a Mastodon timeline with @adrian's Emfed is similar to embedding a Twitter timeline with Twitter’s (now defunct) embedding code.

For example, here is an excerpt of the source of this web page:

<html>
<head>
⋮
<link rel="stylesheet" type="text/css"
      href="https://esm.sh/emfed@1/toots.css">
⋮
</head>

<body>
⋮
<p>
For example, here is an excerpt of the source of <em>this</em> web page:
</p>

<a class="mastodon-feed"
   href="https://mathstodon.xyz/@nm"
   data-toot-limit="4"
   data-toot-account-id="109314739099197891"
   >follow me into the Fediverse</a>
<script type="module" src="https://esm.sh/emfed@1"></script>

<noscript>
<p>💡 To view these toots embedded here, enable Javascript.</p>
</noscript>
⋮
</body>
</html>

 

The bolded code above is what is suggested on github.com/sampsyo/emfed and displays my Mastodon timeline here:

 

follow me into the Fediverse

 

To learn about Emfed, see github.com/sampsyo/emfed.

 

@idotj’s Mastodon timeline feed widget

I prefer the design and flexibility of @idotj's Mastodon timeline feed widget, but it’s not as easy to set up as Emfed. Details are at gitlab.com/idotj/mastodon-embed-feed-timeline.

After you open the accordian below, you can see what my Mastodon timeline looks like when it’s embedded with idotj’s widget.

To view the @nm@mathstodon.xyz timeline, click this sentence.

 

Other options

Other options for embedding Mastodon timelines are:

 

See also

For more related to Mastodon, see Infinite Ink’s…

 

Endnotes

1. Many Infinite Ink pages, including this one, are evergreen 🌲 and regularly updated.
2. In the Mastodon world, “retoot” and “boost” are synonyms.

Please share & discuss 📝 👎 👍 📯