FastComments.com

在 Shopify 網站新增留言

FastComments 可在 Shopify 應用程式商店 取得。從 Shopify 主題編輯器安裝此應用程式,並將 FastComments 區塊拖放到任何部落格文章、產品頁面或自訂頁面上。無需編輯程式碼。

當您安裝此應用程式時,Shopify 會為您設定 FastComments 帳戶、連結您的商店網域,並自動設定計費。您不需要另行在 fastcomments.com 註冊。

本指南中的頁面說明應用程式所提供的各個 FastComments 區塊、Shopify 客戶如何使用單一登入(SSO),以及在切換前如何匯入現有的 Shopify 評論。

安裝 FastComments 應用程式 Internal Link

從 Shopify 應用商店安裝

  1. 開啟 FastComments 在 Shopify 應用商店的列表頁面
  2. 點選 新增應用程式 並在安裝流程中選擇您想要的方案。
  3. 安裝完成後,Shopify 會將您重新導回 Shopify 內的 FastComments 管理介面。

這就是完整的安裝流程。您不需要將任何東西貼到主題檔案中。

為您設置的內容

安裝會自動執行您原本要手動完成的所有步驟:

  • 會為您的商店建立一個 FastComments 租戶並將其連結到您的商店網域。
  • 您商店的網址會被加入到該租戶的授權網域,讓評論載入時不會出現網域錯誤。
  • 會寫入一個 fastcomments.tenant_id shop metafield,讓每個區塊都知道要對哪個租戶進行呈現。
  • 預設會啟用您 Shopify 客戶的單一登入功能。
  • 計費透過 Shopify 管理的價格機制處理。費用會顯示在您一般的 Shopify 帳單上。您可以在 Shopify 後台的 設定 > 應用程式與銷售管道 > FastComments 中升級、降級或取消。

如果您的商店在安裝此應用程式前已經是 FastComments 的客戶,安裝流程會重複使用既有的租戶,而不會建立新的租戶。

內嵌管理後台

當您從 Shopify 後台開啟 FastComments 應用程式時,會進入一個儀表板,裡面有可一鍵開啟完整 FastComments 後台的捷徑磚:

  • Dashboard:帳戶設定、使用情況與訂閱詳細資訊。
  • Moderation Queue:在整個商店中核准、拒絕及回覆評論。
  • Customize:調整元件的顏色、字型、審核規則與設定。
  • Ratings & Reviews Helper:如果您想使用「評論摘要」區塊,可在此設置星級評分與評論問題。

每個捷徑磚都會以一次性登入連結開啟 FastComments,因此您不需要另外註冊或登入。

下一步:將區塊新增到您的商店

打開 Shopify 主題編輯器(線上商店 > 主題 > 自訂),開啟您想要新增評論或評分的樣板,然後點選 新增區塊。FastComments 的區塊會顯示在 應用程式 底下。本指南的其餘部分將逐一說明每個區塊。

在部落格文章與商品頁新增留言 Internal Link

The FastComments 區塊是主要的留言小工具。將它加入部落格文章範本、商品範本,或任何你想要討論串或即時聊天的頁面。

Add the block

  1. Open the Shopify theme editor (Online Store > Themes > Customize).
  2. Pick the template you want comments on: Blog post, Product, or any other page or section template.
  3. In the section where you want comments to appear, click Add block.
  4. Under Apps, select FastComments.
  5. Click Save.

The block appears immediately. There is no Tenant ID to enter; your store's tenant is wired up automatically when you install the app.

Settings

SettingWhat it doesDefault
Tenant ID (optional)覆蓋此區塊所渲染的 FastComments 租戶。留空以使用商店自動設定的租戶。可在 fastcomments.com/auth/my-account/api-secret 找到手動的租戶 ID。(空白)
SSO在留言前自動將訪客以其 Shopify 客戶帳號登入。請參見 Auto-Login Shopify Customers開啟
Commenting Style使用 Threaded 以支援巢狀回覆與投票,或使用 Streaming 以實時顯示像聊天訊息流的留言。Threaded
Custom URL ID覆蓋自動偵測的頁面識別碼。當你希望兩個 URL 共用同一討論串時使用此項。(自動偵測)

How the page identifier is chosen

Each comment thread is keyed by a URL ID. The block picks one automatically:

  • Blog post template: shopify-article-{article.id}, which is stable across slug and title changes.
  • Product template: shopify-product-{product.id}, which is stable across slug and title changes.
  • Other templates: the request path.

If you set Custom URL ID, that value is used instead. Use the same Custom URL ID across multiple blocks (for example, on a localized variant of a product page) to share one comment thread.

Threaded vs Streaming

Threaded is the default. Visitors reply to each other, vote, and moderation tools work as expected. Best for blog posts and product reviews.

Streaming drops the threading and shows new comments in real time as they're posted, like a chat feed. Best for product launches, live events, and community pages.

Multiple blocks on the same page

The block can be added more than once to the same template. For example, a Reviews Summary at the top of a product page and a FastComments block at the bottom. The blocks share a URL ID, so the summary reflects the comments below.

Tips

  • The block hides itself in the theme editor preview with a yellow notice if it can't find a tenant. If that appears in your live store, reinstall the FastComments app.
  • For a product page, the FastComments block doubles as your product reviews widget. Pair it with FastComments - Reviews Summary for a star-rating summary at the top of the page.

新增留言數量徽章 Internal Link

The FastComments - Comment Count block 會在單一頁面上呈現一個小型的留言數。將它用在部落格文章列表、商品卡片或任何連到有留言之頁面的範本中,讓訪客在點入之前就能看到每個討論串的活躍程度。

Add the block

  1. 開啟 Shopify 主題編輯器。
  2. 開啟你想要顯示計數的範本。例如,Blog 範本(文章列表)或商品列表區段。
  3. 在呈現每個項目的區段中,點選 Add block
  4. Apps 底下,選取 FastComments - Comment Count
  5. 點選 Save

Settings

SettingWhat it doesDefault
Tenant ID (optional)覆寫 Comment Count 要讀取的 FastComments 租戶。留空以使用商店自動設定的租戶。(空白)
Custom URL ID覆寫計數要查詢的頁面識別碼。當計數位於與其追蹤之 FastComments 區塊不同的頁面時使用此項。(自動偵測)

How the count matches the comment thread

Comment Count 區塊使用與 FastComments 區塊相同的自動偵測邏輯:

  • Blog post template: shopify-article-{article.id}
  • Product template: shopify-product-{product.id}
  • Other templates: the request path

如果你在某頁面的 FastComments 區塊上設定了 Custom URL ID,請在 Comment Count 區塊上設定相同的 Custom URL ID,以便它們指向相同的討論串。

Tips

  • 頁面上每個項目的計數會在一次請求中取得,因此在長列表的每個項目都加入該區塊不會產生額外的往返成本。
  • 在列表中,每篇文章或每個商品使用一個 Comment Count 區塊是預期的用法;你可以視需要重複新增此區塊。

新增近期留言串流 Internal Link

The FastComments - Recent Comments block shows the most recent comments across your whole store. Use it to show fresh activity in a sidebar, footer, or homepage section.

Add the block

  1. Open the Shopify theme editor.
  2. Open the template where you want the feed. A sidebar section, the home page, or the blog index all work well.
  3. Click Add block in the section that should hold it.
  4. Under Apps, select FastComments - Recent Comments.
  5. Click Save.

Settings

SettingWhat it doesDefault
Tenant ID (optional)Override which FastComments tenant the feed reads from. Leave blank to use the store's automatically-configured tenant.(blank)
Number of commentsHow many recent comments to show. Range 1 to 50.5

Tips

  • Each comment links to the page it was posted on, so the block doubles as a "what people are talking about right now" navigation hint.
  • The feed is store-wide. To show recent comments for a single page, use the FastComments block on that page instead.

新增近期討論串流 Internal Link

The FastComments - Recent Discussions block 列出商店中最近有評論活動的頁面,每頁一個條目。當你想要讓訪客發現活躍的討論串而不是單一評論時,請使用它。

Add the block

  1. 開啟 Shopify 主題編輯器。
  2. 開啟你希望顯示此餵送的範本,例如側邊欄、頁腳、部落格索引或首頁區段。
  3. 在應該放置此區塊的區段中點選 Add block
  4. Apps 下選擇 FastComments - Recent Discussions
  5. 點選 Save

Settings

SettingWhat it doesDefault
Tenant ID (optional)覆寫此餵送要讀取的 FastComments 租戶。留空以使用商店自動設定的租戶。(blank)
Number of comments要顯示的近期討論數量。範圍為 1 到 50。20

Recent Discussions vs Recent Comments

兩個區塊都從相同資料來源取得內容,但顯示方式不同:

  • Recent Comments: 最新單則評論的平面列表。最適合呈現「剛剛說了什麼」。
  • Recent Discussions: 每頁一個條目,依最近活躍排序。最適合呈現「哪些討論串現在正在活躍」。

你可以在同一個商店同時使用兩者。例如在部落格側邊欄使用 Recent Comments,而在首頁使用 Recent Discussions。

新增熱門頁面列表 Internal Link


FastComments - Top Pages 區塊會列出您商店中整體留言活動最多的頁面。用它來突顯討論最熱烈的文章或商品。

新增此區塊

  1. 打開 Shopify 主題編輯器。
  2. 打開要放置列表的範本,例如側邊欄、頁腳或部落格索引區段。
  3. 在要放置該區段中,點擊 Add block
  4. Apps 下,選擇 FastComments - Top Pages
  5. 點擊 Save

設定

SettingWhat it doesDefault
Tenant ID (optional)覆蓋清單所讀取的 FastComments 租戶。留空則使用商店自動配置的租戶。(blank)

Top Pages vs Recent Discussions

  • Top Pages 以總參與度排名,因此相同的文章傾向在一段時間內保持靠前。適合用於 "popular posts" 側邊欄。
  • Recent Discussions 依最近活動排序,因此列表會快速變動。適合用於 "what's hot right now" 面板。

Shopify 顧客自動登入 Internal Link

The FastComments 區塊支援單一登入(SSO),讓你的 Shopify 客戶可以使用自身帳號發表留言,而無需建立獨立的 FastComments 帳戶。

How it works

When a visitor who is logged into your store opens a page with the FastComments block:

  1. The block detects the Shopify customer object.
  2. It sends the customer's name and email to FastComments through a signed app proxy request.
  3. FastComments creates or matches a user keyed by shopify-{customerId}, so the same customer always maps to the same FastComments user across sessions and re-installs.
  4. The visitor's name shows up on their comments. They are not prompted to log in again.

If the visitor is not logged into the store, the block falls back to anonymous commenting (or the FastComments sign-in flow, depending on your widget configuration).

Turning SSO off

SSO is on by default for every FastComments block. To turn it off on a specific block:

  1. Open the Shopify theme editor.
  2. Open the template that contains the block and click the block to select it.
  3. Uncheck SSO.
  4. Click Save.

Turn SSO off if you want commenters to choose a separate identity for the conversation. For example, an internal community page where staff comment under a different display name.

What FastComments receives

The SSO payload sent for each customer contains:

  • A user ID derived from the Shopify customer ID (shopify-{customerId}).
  • The customer's email (used to identify the user; not displayed publicly).
  • The customer's display name (used as their comment author name).

No order history, payment, or address data is sent. The payload is signed server-side; the customer's browser never sees a credential.

When SSO is on, the comment widget's sign-in and sign-out links point at /account/login and /account/logout, the standard Shopify customer account routes. There is nothing to configure. The links work for any store with customer accounts enabled.

自訂 Internal Link

顏色、字體、審核規則、允許的 HTML 以及匿名評論皆可配置,以符合您商店的品牌風格。

在 Shopify 管理後台開啟 FastComments 應用,然後點選 自訂 方塊以開啟小工具自訂畫面。它使用一次性登入連結,因此您不需要另外的登入。

有關完整的自訂選項清單,請參閱 自訂與設定指南