マストドンのプロフィールを埋め込む方法

X (別名 Twitter) では、公式ページ経由でプロフィール ページを簡単に埋め込むことができます。では、マストドンではどうすればよいのでしょうか?ここでは、その作り方を段階的に説明します。

1.モジュールをインポートする

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. 埋め込みラッパーを追加する

いつでも好きな場所に埋め込むことができます。

<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. instanceUrl を、Mastodon アカウントにサインアップした場所に変更します。たとえば、プロフィール リンクが https://mastodon.social/@example の場合、インスタンスは https://mastodon.social/.

になります。

2. timelineType はそのままにしておきます。ポイントはプロフィールを埋め込むことだけです

3. userId、インスタンス API 経由でユーザー ID を見つけることができます。たとえば、プロフィール リンクが https://mastodon.social/@example の場合、API リンクは https://mastodon.social/api/v1/accounts/lookup?acct=example にあります。最初のセクションにあります (例: {"id":"950856",...)

4. profileName、これはインスタンス内のユーザー名です。

この埋め込みアプローチで私の Mastodon アカウントがどのように表示されるかの実際の例を確認できます。

それだけです！スターを付けることと、Mastodon-embed-timeline リポジトリに貢献することを検討しています。 ⭐ https://gitlab.com/idotj/mastodon-embed-timeline

以上がマストドンのプロフィールを埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。