Wix サイトにコメントを追加

この例では、FastCommentsのライブコメント機能をブログ投稿ページに追加します。

これを行うために、Wixエディタでサイトを開きます。

次に、正しいページを編集していることを確認します。

各ブログ投稿ごとにユニークなコメントスレッドを表示する必要があるため、Blog Pages -> Postを編集しましょう。

ステップ1：動的投稿ページを編集する

次に、Add -> Embed Code -> Embed HTML に移動します。

ステップ2: Embed HTML ブロックを追加する

これにより、最初は寂しげなボックスが表示されます:

開始ブロック

この例は Wix と互換性を持たせるためにカスタムコードを使用しています。他のチュートリアルの FastComments コードスニペットは使用できません。

カスタム HTML ダイアログを追加するには、Enter Code をクリックして HTML を選択し、フォームを開いてください：

ステップ 3: HTML ダイアログを開く

以下の HTML スニペットをコピーしてダイアログに貼り付け、Update をクリックしてください：

Wix コメントのコードスニペット

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 config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

ステップ 3: 貼り付けて保存

これでコメントウィジェットの非常に小さなバージョンが表示されるはずです：

ステップ 3: 結果

次に、これの位置とサイズを調整してページに合わせます。

コメントウィジェットを追加したので、ページ上に配置しましょう。

ステップ4: サイズ変更

このチュートリアルでは、アクティブなページに基づいて現在のスレッドを変更できるようになります。ただし、Wix がこの機能を提供するまでは、コメントウィジェットを動的にリサイズすることはできません。 それまでは、ページ上のコメント領域をどの程度の大きさにするか決め、適切なサイズに設定する必要があります。

次に、現在のページに応じてコメントスレッドが切り替わるように設定し、表示中のコンテンツについてユーザーが議論できるようにしましょう。

以下の手順を行わない場合、サイト全体で1つのグローバルコメントスレッドしか持てず、あまり有用ではありません。

Dev Mode

この機能を追加するには、Wix が Dev Mode と呼ぶものに入る必要があります。

画面上部の Dev Mode オプションをクリックしてください。

Dev Mode を有効にする

要素 ID の設定

これを実現するためにカスタムコードを追加しますが、まず新しい埋め込み要素に参照用の ID を付ける必要があります。

fastcomments と呼ぶことにしましょう。

追加した新しい埋め込み要素をクリックすると、Dev Mode で画面右下に html1 のような値が入った ID フィールドが表示されるはずです:

ID フィールド

これを fastcomments に変更して Enter キーを押してください:

ID の設定

これで、表示中のページをコメントエリアに伝えるカスタムコードを追加できます。

画面下部に、次のようなコードエディタが表示されているはずです:

エディタを開く

以下のコードをコピーして貼り付けてください:

Wix コメントナビゲーションスニペット

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

ナビゲーションコードの追加

これで一息ついて、サイトをプレビューできます。ページに応じて変化するコメント欄が表示されるはずです。おめでとうございます！

問題があれば、以下のコメントボックスでお知らせください。

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

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