Add Comments to Squarespace Sites

このセクションでは、Squarespace のブログにライブコメントを追加する方法を学びます。

コードは一度追加するだけで、ウィジェットは既存のブログ投稿や、 将来作成するすべてのブログ投稿にも自動的に追加されます。

コメントスレッドは各ブログ投稿ごとに固有になります。

まず、エディタの左側にあるページを開くところから始めます：

ページを開く

下部に、右側に歯車がある Blog が表示されます。歯車をクリックしてブログの設定を開いてください：

ブログ設定を開く

次に、Advanced に進み、Post Blog Item Code Injection を選択します：

ブログアイテムのコード設定を開く

次のような空のコード領域が表示されます：

空のコード領域

次に、以下のコードスニペットをコピーできます（スニペット右上のコピー ボタンを使用してください）:

Squarespace ブログのコメントコード

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

...次に、コード領域に貼り付けて保存をクリックします:

貼り付けて保存

成功しました! これであなたのすべてのブログ投稿に FastComments Comment Widget が表示されているはずです。

成功!

Squarespace に FastComments を設定したことをおめでとうございます! Domain Error に直面した場合、またはコメントエリアをカスタマイズする方法を学びたい場合は、引き続きお読みください!

このセクションでは、Squarespace サイトのすべてのページにライブコメント機能を追加する方法を学びます。

コードは一度だけ追加すればよく、ウィジェットは既存のページ、および 将来作成するページすべてに自動的に追加されます。

コメントスレッドは各ページごとに固有になります。

まず、エディタの左側にある設定を開きます:

設定を開く

画面下部に Developer Tools が表示されているはずです。これをクリックしてください:

デベロッパーツールを開く

次に Code Injection に移動します:

Code Injection を開く

ここでコードを追加できる領域が2つ表示されます。1つは HEADER、もう1つは FOOTER とラベル付けされています。コードは FOOTER 領域に追加します:

空のフッター領域

次のステップでコードをコピーして追加します。

次に、以下のコードスニペットをコピーできます。スニペットの右上に表示されるコピー ボタンを使用してください。

コード内で設定できる項目がいくつかあります。4行目から7行目を参照してください。

Squarespace すべてのページのコメントコード

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 が表示されるはずです。表示されていない場合は、サポートにお問い合わせください。

成功しました！これですべてのページにFastComments Comment Widgetが表示されているはずです。

SquarespaceでFastCommentsを設定したこと、おめでとうございます！Domain Errorが発生した場合、またはコメント領域をカスタマイズする方法を学びたい場合は、続きをお読みください！

このセクションでは、Squarespace サイトの特定のページにライブコメント機能を追加する方法を学びます。

この方法では、コメントウィジェットを追加したい各ページにコードを追加する必要があります。

コメントスレッドは各ページごとに一意になります。

特定のページにコメントウィジェットを追加する場合、もう少し細かく制御できます。

カスタムコードブロックを追加することで、ウィジェットを正確に好きな場所に配置できます。今回のチュートリアルではそれを行います。

まず、コメントを追加したいページを開き、左上の「編集」をクリックします。

この例ではコメント用のセクションを新たに追加しますが、既存のセクションに追加することもできます ページ内の。

セクションを追加しましょう:

セクションを追加

空のセクションを追加します:

空のセクションを追加

大きな空白領域が追加されます。左上の ADD BLOCK をクリックします:

ブロックを追加

下にスクロールして Code オプションを見つけ、クリックします:

コードウィジェットを選択

コードブロックを、コメントウィジェットを表示したい位置に合わせて配置します:

位置

コードブロックを編集してください:

コードブロックを編集

次のステップでコードをコピーして追加します。

次に、以下のコードスニペットをコピーできます。スニペットの右上に表示されるコピー ボタンを使用してください。

コード内で設定できる項目がいくつかあります。4行目から7行目を参照してください。

Squarespace 単一ページ用コード

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

このように表示されます:

貼り付けて保存

右上の「保存」をクリックしてください。

ただし、Preview in Safe Mode オプションは機能しませんが、サイトを訪問するとウィジェットは表示されます。

問題が発生している場合は、下部付近に "tenantId": "demo" と表示されていないことを確認してください。ログインしていれば、そこにはあなたのテナントIDが表示されるはずです。表示されない場合はサポートへお問い合わせください。

成功しました！ページにFastComments Comment Widgetが表示されているはずです。

SquarespaceでFastCommentsを設定したこと、おめでとうございます！もしDomain Errorが発生した場合、またはコメント領域をカスタマイズする方法を知りたい場合は、以下をお読みください。

FastComments はサイトに合わせてカスタマイズできるように設計されています。

カスタムスタイリングを追加したり、設定を調整したりしたい場合は、カスタマイズのドキュメントをご覧ください で方法を学んでください。