使用Mastodon embed timeline widget將Mastodon時間軸嵌入到網站

最近才得知Mastodon這個社群網站，雖然本質上是Twitter，但因貼文可達500個字，連結網址無論多長都只吃到23個字，所以我覺得偏向於輕量級網誌。兩者最大差異他是一個分散式社交網路，類似Mail server，每個人都可以架設自己的社群，每個社群都可以互相溝通，即使網站突然終止或莫名被停權，你還是能換不同網站繼續使用社群服務。

我個人使用後，認為沒有太多複雜功能、沒有廣告、介面淺顯易懂、文章可設定多種狀態（這點Twitter就不用比了）。目前傾向從Twitter慢慢轉移到Mastodon。

找了一些Timeline widget，都不是很滿意，最後找到〈Mastodon embed timeline widget〉，蠻符合自己的需求，可將發文時間軸嵌入到自己的網站。

2026-01-26 更新內容

因Mastodon embed timeline widget已更新多版，原文內容早已過時，所以將文章修改為符合一般網站適用內容。

以下步驟參考文件來修改：
https://gitlab.com/idotj/mastodon-embed-timeline/-/tree/master/docs

建立頁面

首先建立一個index.html，內容為：

<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mastodon embed timeline</title>
    <!-- CSS -->
    <link href="mastodon-timeline.min.css" rel="stylesheet" />
  </head>
  <body>
    <!-- Your HTML content -->
    <div id="mt-container" class="mt-container">
      <div class="mt-body" role="feed">
        <div class="mt-loading-spinner"></div>
      </div>
    </div>
    <!-- JavaScript -->
    <script src="mastodon-timeline.umd.js"></script>
    <script>
      // You can initialize the script here
      const myTimeline = new MastodonTimeline.Init({    // 以下為自訂時間軸參數
        defaultTheme: "light",    //主題樣式
        instanceUrl: "https://mastodon.social",    // Mastodon伺服器網址
        timelineType: "profile",    // 時間軸顯示的類型
        userId: "0107966538044390758",    // Mastodon User ID
        profileName: "@carl0schen",    // 帳號名稱
        hideUserAccount: "true",    // 在使用者名稱下方隱藏使用者帳戶
        previewMaxLines: "2",    // 限制預覽文字描述的行數
        carouselCloseTxt: "關閉輪播",    // 以下中文為按鈕的翻譯顯示
        carouselPrevTxt: "上一個媒體項目",
        carouselNextTxt: "下一個媒體項目",
        btnShowMore: "顯示更多",
        btnShowLess: "顯示較少",
        btnShowContent: "顯示內容",
        btnPlayVideoTxt: "載入並播放影片",
        btnSeeMore: "在 Mastodon 閱讀更多文章",
        btnReload: "",    // 自訂位於時間軸末端的重新載入的按鈕文字，將數值留空即可隱藏該欄位
      });
    </script>
  </body>
</html>
  1. 此處將index.html、mastodon-timeline.min.css和mastodon-timeline.umd.js放在同一目錄即可使用。
  2. 如果要嵌入到網站，複製index.html裡的CSS、HTML Content、JavaScript內容貼到嵌入頁面，並將mastodon-timeline.min.css和mastodon-timeline.umd.js放到對應路徑才能載入。

修改CSS

如果要修改CSS，檔案路徑在src/mastodon-timeline.css，建議用此檔案修改。無需修改的話，則直接套用dist/mastodon-timeline.min.css。

呼叫JS參數

可以參考src/mastodon-timeline.js裡面的參數說明來自訂時間軸，從HTML來呼叫。

使用CDN

無須上傳CSS和JS，複製下面的CDN連結，加到自訂頁面來載入資源，連結裡的版號和Integrity會隨著版本更新而變動。

CSS：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.8.0/dist/mastodon-timeline.min.css" integrity="sha256-Qi3H+bdH6RuMuyR1trAlG5bMWJGl9y3jPiTc1PWQFpI=" crossorigin="anonymous">

JS：

<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.8.0/dist/mastodon-timeline.umd.js" integrity="sha256-DTzwhhH62hhGqjhFFRqFoVI7y02ZsB/nXu3vC24qfeM=" crossorigin="anonymous"></script>

Mastodon User ID

有兩種查詢方式：

  1. 將以下網址的<INSTANCE>改成你的伺服器網域，<USERNAME>改成你的帳號名稱：

    https://<INSTANCE>/api/v1/accounts/lookup?acct=<USERNAME>

  2. 使用工具查詢：
    網站：https://mastodon-userid-lookup.jcxldn.net/
    Github：https://github.com/jcxldn/mastodon-userid-lookup

其他方案