Mastodon 프로필을 삽입하는 방법

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