Mastodon Timeline Embed: MEFT

About This Method

This method uses the mastodon-embed-timeline (MEFT) JavaScript library. It fetches timeline data from the Mastodon API and renders it client-side into a designated HTML element.

Configuration requires setting JavaScript variables before loading the main library script. See the Configuration Script section below the rendered timeline.

Important: You need the Mastodon User ID (a number, not the username) for the account you want to embed. You can often find this using API tools (like searching the account via /.well-known/webfinger on the instance and looking for the ID in the self link) or sometimes by viewing the source code of the user's profile page.

Configuration Script

The following script block sets the configuration options for the library, and is set towards the end of the code in this example page. Modify these values as needed. Here, we're asking to fetch 40 posts, and show a maximum of 20; but we're hiding unlisted posts, replies, reblogs, and pinned posts, all of which get filtered from the number of posts fetched, so it may show fewer than 20.

<script>
const myTimeline = new MastodonTimeline.Init({
      instanceUrl: "https://macaw.social",
      timelineType: "profile",
      userId: "109332977621728450",
      profileName: "@andypiper",
      defaultTheme: "auto",
      maxNbPostFetch: "40",
      maxNbPostShow: "20",
      hideUnlisted: true,
      hideReplies: true,
      hideReblog: true,
      hidePinnedPosts: true,
      // Add any other options you want to configure
      // See the documentation for more details
});
</script>

Rendered Timeline

This is what the embedded timeline looks like using this method: