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 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 window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
10 tenantId
11 });
12 }
13
14 tryLoad();
15 })();
16</script>
17
18

It should look like this:

貼上並儲存
貼上並儲存

Now click save in the top right.

Note that the Preview in Safe Mode option will not work, but the widget will appear when you visit your site.

If you're having issues, make sure near the bottom it doesn't say "tenantId": "demo". It should show your tenant id if you are logged in. If not, reach out to support.

完成 Internal Link


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

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


自訂 Internal Link


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

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