FastComments.com

Add Comments to Squarespace Sites


使用 FastComments,我們可以輕鬆地為任何 Squarespace 網站新增即時留言功能。

以下說明依您想要執行的操作分為三個部分:

  1. 將留言新增至 Squarespace 部落格文章
  2. 將留言新增至所有頁面
  3. 將留言新增至特定頁面

請注意,此教學需要 FastComments 帳號。建議您先註冊,然後再回來此處。 您可以在此建立帳號。


為您的部落格加入即時留言 Internal Link


在本節中,我們將學習如何在你的 Squarespace 部落格中加入即時評論。

你只需要新增一次程式碼,該小工具就會自動加入到任何現有的部落格文章,以及任何 你將來建立的部落格文章。

每篇部落格文章的評論串都將是獨立的。


步驟 1:開啟部落格設定 Internal Link

我們將從在編輯器左側開啟頁面開始:

開啟頁面
開啟頁面

在底部你應該會看到 Blog,右邊有一個齒輪。點擊齒輪以開啟部落格設定:

開啟部落格設定
開啟部落格設定

現在我們將前往 Advanced,然後選擇 Post Blog Item Code Injection

開啟部落格文章代碼設定
開啟部落格文章代碼設定

你會看到一個像下面這樣的空白代碼區塊:

空白代碼區域
空白代碼區域

步驟 2:貼上您的 FastComments.com 程式碼 Internal Link

Now we can copy the following code snippet (use the copy button in the top right of the snippet):

Squarespace 部落格評論程式碼
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 (function () {
6 const tenantId = 'demo'; // 你的帳戶 ID
7
8 function tryLoad() {
9 // 嘗試為不同佈局載入
10 let targetDiv = document.querySelector('.blog-item-comments-content');
11 if (!targetDiv) {
12 targetDiv = document.getElementById('fastcomments-widget');
13 }
14 window.FastCommentsUI(targetDiv, {
15 tenantId
16 });
17 }
18
19 tryLoad();
20 })();
21</script>
22
23

...then paste in the code area and click save:

貼上並儲存
貼上並儲存

完成 Internal Link

成功!您現在應該能在所有部落格文章上看到 FastComments 評論小工具。

成功!
成功!

恭喜您已在 Squarespace 上設定 FastComments!如果您遇到網域錯誤,或想了解如何自訂評論區,請繼續閱讀!

在所有頁面新增即時留言功能 Internal Link

在本節中,我們將學習如何在您整個 Squarespace 網站的所有頁面新增即時評論功能。

您只需將程式碼加入一次,該小工具就會自動新增至任何現有頁面,以及任何 您日後建立的頁面。

每個頁面的評論串都是獨立的。

步驟 1:開啟開發者工具 Internal Link

我們將從編輯器左側開啟設定:

開啟設定
開啟設定

在底部你應該會看到 Developer Tools。點擊它:

開啟開發者工具
開啟開發者工具

現在我們前往 Code Injection

開啟代碼注入
開啟代碼注入

現在你應該會看到兩個可以新增程式碼的區域,一個標記為 HEADER,另一個標記為 FOOTER。我們將把程式碼新增到 FOOTER 區域:

空的頁尾區域
空的頁尾區域

在下一步我們會複製程式碼並將其加入。

步驟 2:貼上您的 FastComments.com 程式碼 Internal Link

現在我們可以複製下列程式碼片段。使用出現在片段右上角的複製按鈕。

程式碼中有幾個可配置的項目,請參閱第 4 到第 7 行。

Squarespace 全部頁面評論程式碼
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 (function () {
6 const tenantId = 'demo'; // 你的帳戶 ID
7
8 function tryLoad() {
9 // 嘗試為不同的版面載入
10 let targetDiv = document.querySelector('.blog-item-comments-content');
11 if (!targetDiv) {
12 targetDiv = document.getElementById('fastcomments-widget');
13 }
14 window.FastCommentsUI(targetDiv, {
15 tenantId
16 });
17 }
18
19 tryLoad();
20 })();
21</script>
22
23

...然後將其貼到程式碼區並點擊儲存。它應該看起來像這樣,程式碼位於 FOOTER 區塊:

貼上並儲存
貼上並儲存

如果您遇到問題,請確認頁面底部附近不會顯示 "tenantId": "demo"。它應該顯示您的 tenant id,如果您已登入。若沒有,請聯絡支援。

完成 Internal Link

成功!您現在應該可以在所有頁面看到 FastComments Comment Widget。

恭喜您已經在 Squarespace 上設定完成 FastComments!如果您遇到 Domain Error,或想了解如何客製化評論區,請繼續閱讀!

在特定頁面新增即時留言功能 Internal Link

在本節中,我們將學習如何在你的 Squarespace 網站的特定頁面上加入即時評論功能。

使用這種方法,你必須將程式碼新增到你想要添加評論小工具的每個頁面。

每個頁面的評論串將各自獨立。

步驟 1:新增程式碼區塊 Internal Link

當在特定頁面加入評論小工具時,我們會有更多控制權。

我們可以透過新增自訂程式碼區塊,將小工具放在我們想要的精確位置——這也是本教學要示範的做法。

首先,打開要加入評論的頁面,然後在左上角點選編輯。

在這個範例中,我們會新增一個專門放置評論的區段,不過你也可以將它們加入頁面上的既有區段 中。

現在新增一個區段:

新增區段
Add Section

我們將新增一個空白區段:

新增空白區段
Add Blank Section

你會看到新增了一個大型空白區域。於左上角點選 ADD BLOCK

新增區塊
Add Block

向下捲動直到找到 Code 選項,然後點選它:

選取程式碼小工具
Select Code Widget

將程式碼區塊放置在希望評論小工具顯示的位置:

位置
Position

編輯程式碼區塊:

編輯程式碼區塊
Edit The Code Block

在下一個步驟中,我們會複製程式碼並將其加入。

步驟 2:貼上您的 FastComments.com 程式碼 Internal Link

現在我們可以複製以下的程式碼片段。使用片段右上角出現的複製按鈕。

有幾個你可以在程式碼中設定的項目,請參見第 4 到第 7 行。

Squarespace 單一頁面程式碼
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: 'demo' // 您的帳戶 ID
8 }];
9</script>
10

看起來應該像這樣:

貼上並儲存
貼上並儲存

現在在右上角點擊儲存。

請注意,Preview in Safe Mode 選項將無法使用,但當你造訪網站時小工具會出現。

如果你遇到問題,請確定靠近底部沒有顯示 "tenantId": "demo"。如果你已登入,應該會顯示你的租戶 ID。若沒有,請聯絡支援。

完成 Internal Link


成功!您現在應該能在頁面上看到 FastComments 留言小工具。

恭喜您已在 Squarespace 上完成 FastComments 的設定!如果您遇到 Domain Error,或想了解如何自訂留言區,請繼續閱讀!


自訂 Internal Link


FastComments 設計為可自訂以配合您的網站。

如果您想新增自訂樣式或調整設定,查看我們的自訂化文件 以了解如何操作。