Add Comments to Wix Sites

FastComments を使えば、どの Wix サイトにも手軽にライブコメント機能を追加できます。また、各ページやブログ投稿ごとに固有のコメントスレッドを持たせる方法についても説明します。

このチュートリアルでは FastComments のアカウントが必要です。先にサインアップしてからここに戻ることをおすすめします。こちらからアカウントを作成できます。

ステップ 1：正しいページを編集する

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

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

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

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

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

ステップ 2：埋め込みブロックを追加する

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

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

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

開始ブロック

ステップ 3：カスタムコードをコピー＆ペーストする

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

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

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

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

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

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        const config = {
            tenantId: "demo"
        };
        const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);
        window.onmessage = (event) => {
            if (event.data) {
                if (event.data.action === 'reload') {
                    console.log('Updating FastComments:', event.data.url);
                    config.urlId = event.data.url;
                    config.url = event.data.url;
                    instance.update(config);
                }
            }
        }
    })();
</script>

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

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

ステップ 3: 結果

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

ステップ 4：サイズを調整する

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

ステップ4: サイズ変更

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

ステップ 5：個別のコメントスレッド

次に、コメントスレッドが現在のページに応じて変わるように設定します。これにより、ユーザーは現在表示されているコンテンツについて議論できるようになります。

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

Dev Mode

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

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

Dev Mode を有効にする

要素のIDを設定

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

名前は fastcomments にしましょう。

追加した新しい埋め込み要素をクリックすると、Dev Mode の右下に html1 のような値を持つ ID フィールドが表示されます：

ID フィールド

これを fastcomments に変更して Enter を押します：

ID を設定

これで、コメント領域に現在表示しているページを伝えるカスタムコードを追加できます。

画面下部に次のようなコードエディタが表示されます：

エディタを開く

以下のコードをコピーしてそこに貼り付けてください：

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

Copy

import wixLocation from 'wix-location';
$w.onReady(function () {
    function updateFastCommentsLocation() {
        try {
            const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');
            $w('#fastcomments').postMessage({'action': 'reload', 'url': url});
        } catch (err) {
            console.error('Wix -> FastComments Error', err);
        }
    }
    updateFastCommentsLocation();
    wixLocation.onChange( () => {
        updateFastCommentsLocation();
    });
});

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

ステップ 6：完了を祝う

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

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

カスタマイズ

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

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

言語 🇯🇵 日本語

Wix のインストール