How to embed your Mastodon profile

#mastodon #embed #javascript

In X (aka Twitter), you can easily embed your profile page via their official page. But, how you can do it in Mastodon? Here the step-by-step tutorial how to make it.

1. Import the module

You can import the file via JSDelivr CDN. (Source)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.4.2/dist/mastodon-timeline.min.css" integrity="sha256-1UGgxsonaMCfOEnVOL89aMKSo3GEAmaRP0ISbsWa6lU=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.4.2/dist/mastodon-timeline.umd.js" integrity="sha256-E6WPG6iq+qQIzvu3HPJJxoAeRdum5siq13x4ITjyxu8=" crossorigin="anonymous"></script>

2. Add the embed wrapper

You can embed that in whenever place you want. (Source)

<div id="mt-container" class="mt-container">
  <div class="mt-body" role="feed">
    <div class="mt-loading-spinner"></div>
  </div>
</div>

3. Add JS configuration

After import and add the wrapper, now you need to add the MastodonTimeline config. (Source)

<script>
   const myTimeline = new MastodonTimeline.Init({
      instanceUrl: "https://mastodon.social/",
      timelineType: "profile",
      userId: "950856",
      profileName: "@LIGMATV",
   });
</script>

Change the instanceUrl to where you signed up your Mastodon account. For example, if your profile link is https://mastodon.social/@example, then the instance is https://mastodon.social/.
timelineType, the type of timeline you want. In this case, you just need to make it profile.
userId, you can find your user ID via your instance API. For example, if your profile link is https://mastodon.social/@example, then the API link is in https://mastodon.social/api/v1/accounts/lookup?acct=example. You can find it in first section (For example: {"id":"950856",...)
profileName, it's your username in the instance.