DEV Community

Cover image for How to embed your Mastodon profile
LIGMATV
LIGMATV

Posted on • Edited on

How to embed your Mastodon profile

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  1. 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/.

  2. timelineType, the type of timeline you want. In this case, you just need to make it profile.

  3. 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",...)

  4. profileName, it's your username in the instance.

You can see the working example in how my Mastodon account looks in this embed approach:


Just it! Considering to give star and contributing to mastodon-embed-timeline repository! ⭐ https://gitlab.com/idotj/mastodon-embed-timeline

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay