如何在網站嵌入 Feeder 即時動態消息小工具（WordPress 等）

想在自己的網站顯示最新文章，而且不用手動更新嗎？Feeder 小工具可在任何網站嵌入即時動態消息，有新文章時也會自動更新。只要建立一次、貼上程式碼片段，就完成了。

只要網站能加入少量 HTML，就可以使用這個小工具，包括 WordPress、Squarespace、Wix、Webflow 和自行編寫程式碼的網頁。

準備事項

這個小工具是 Feeder「發布」工具的一部分。

步驟 1：建立小工具

1. 開啟 Feeder，前往「發布」分頁，然後選取「小工具」。直接連結：feeder.co/settings/publish/widgets。
2. 建立小工具，並選取要顯示的動態消息。
3. 設定外觀：主題、顏色、字型、寬度、高度，以及要顯示的文章數量。預覽會即時更新，因此訪客看到的內容會和預覽完全相同。
4. 儲存小工具。

步驟 2：複製嵌入程式碼

小工具建立工具提供三種嵌入方式，每種方式都已填入小工具 ID。請選擇適合你網站的方式。

iframe（幾乎適用於所有網站）

對 WordPress 和大多數網站建立工具來說，這是最穩妥的選項，因為不需要使用自訂指令碼。

https://widgets.feeder.co/?frame&widget=YOUR_WIDGET_ID

Script 標籤

直接在網頁上呈現動態消息。如果網站允許使用自訂指令碼，而且你希望動態消息自然融入版面配置，請使用這個方式。

<feeder-widget data-widget-id="YOUR_WIDGET_ID" style="width: 100%; height: 600px"></feeder-widget>https://widgets.feeder.co/widget.js

純網址

適用於要求提供嵌入連結的工具。

https://widgets.feeder.co/?embed&widget=YOUR_WIDGET_ID

將小工具加入 WordPress

WordPress 不需要安裝外掛，只要將嵌入程式碼貼到區塊或小工具區域即可。我們建議使用 iframe 版本，因為 WordPress 基於安全考量，通常會移除自訂指令碼。

加入頁面或文章（區塊編輯器）

1. 編輯要放置動態消息的頁面或文章。
2. 新增區塊，並選擇「自訂 HTML」。
3. 貼上步驟 2 的 iframe 程式碼。
4. 預覽或發布。動態消息會出現在你放置區塊的位置。

加入側邊欄或頁尾

1. 前往「外觀 > 小工具」（或「外觀 > 自訂 > 小工具」）。
2. 在想要的位置新增「自訂 HTML」小工具。
3. 貼上 iframe 程式碼並儲存。

使用傳統編輯器

從「視覺」分頁切換至「文字」分頁，再將 iframe 程式碼貼到要顯示動態消息的位置。

使用 WordPress.com？嵌入自訂 HTML 需要 Business 方案或更高級別。在自行架設的 WordPress（WordPress.org）網站上，任何管理員都可以按照上述步驟加入程式碼。

其他網站建立工具

• Squarespace、Wix、Webflow 等：新增「嵌入」或「自訂 HTML」區塊，並貼上 iframe 程式碼。
• 自行編寫程式碼的網站：將 iframe 或 script 標籤直接貼到 HTML 中。

提示與疑難排解

• 調整大小：修改嵌入程式碼中的寬度和高度，或在複製程式碼前於建立工具中調整。
• 沒有顯示內容？你的網站可能會移除指令碼。請改用 iframe 版本，這個版本適用於更多網站。
• 內容保持最新：小工具會直接讀取 Feeder 動態消息，因此新文章會自動顯示，不必重新貼上程式碼。

遇到問題，或需要協助設定嗎？歡迎隨時透過 support@feeder.co 聯絡我們。👋