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.

<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.

<div>



<h2>
  
  
  3. Add JS configuration
</h2>

<p>After import and add the wrapper, now you need to add the JS config.<br>
</p>

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

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, just leave it. Your point is just to embed your 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

The above is the detailed content of How to embed your Mastodon profile. For more information, please follow other related articles on the PHP Chinese website!