Weebly サイトにコメントを追加する

FastComments を使えば、どの Weebly サイトにも簡単にライブコメント機能を追加できます。

以下の手順は Weebly 上に構築されたブログ向けです。他の種類のサイトについては、サポートスタッフが喜んでお手伝いしますので、お気軽にお問い合わせください。

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

ステップ 1: ブログ設定を開く

まず、このチュートリアルの結果を確認できるよう、サイトにブログ記事をいくつか追加しておいてください。

準備ができたら、Weeblyエディターを開き、上部の Settings をクリックします。

設定を開く

次に、左側の Blog に移動して、ブログの設定を開きます:

ブログ設定を開く

次に、置き換える対象となるWeeblyのデフォルトコメントシステムを無効にします。

注意 WeeblyサイトからFastCommentsへ既存のコメントを移行したい場合は、サポート担当者がこの移行を支援できます。

それでは、Commenting system を Default に、Comment Default を Closed に設定しましょう:

デフォルトシステムを無効にする

最後に、FastComments.comのウィジェットコードを追加するだけです!

ステップ 2: FastComments.com のコードを追加する

WeeblyとFastCommentsの統合をうまく機能させるために、2つの小さなコードスニペットを追加する必要があります。

最初のスニペットは Weebly の「コメントは閉じられています」メッセージを非表示にするためのもので、2つ目は実際に FastComments を読み込むためのものです。

まず、この小さなコードスニペットをコピーしてください：

FastComments ヘッダー用コードスニペット

Copy

<style>
    #comments {
        display: none;
    }
    #commentArea:not(.loaded) {
        display: none;
    }
    #commentArea.loaded {
        display: block !important;
    }
</style>

次に、Step Oneで使った同じ設定ページで、Post header codeの横にある+をクリックします。

投稿ヘッダーコードを開く

次のようにテキストボックスが開きます：

投稿ヘッダーコードが開いた状態

次にコードスニペットを貼り付けます：

ヘッダーコードスニペットを貼り付けた

次は FastComments を有効にするフッターコードです。Post footer codeの横にあるプラス記号をクリックします：

投稿フッターコードを開く

Weebly 用に特別に設計されたこのコードスニペットをコピーしてください：

FastComments フッター用コードスニペット

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        let loaded = false;
        let interval = null;
        function attemptLoad() {
            if (loaded) {
                clearInterval(interval);
                return;
            }
            const comments = document.getElementById('comments');
            if (comments) { // コメント表示ボタンを削除
                comments.remove();
            }
            const commentArea = document.getElementById('commentArea');
            if (!commentArea) {
                return;
            }
            commentArea.innerHTML = '';
            commentArea.classList.add('loaded');
            FastCommentsUI(commentArea, {
                tenantId: "demo",
                urlId: window.location.pathname
            });
            loaded = true;
            clearInterval(interval);
        }
        attemptLoad();
        interval = setInterval(attemptLoad, 300);
    })();
</script>

次にフッターコードを貼り付けます：

投稿フッターコードを追加した

これで完了です！

ステップ 3: 公開！

今は変更を保存してサイトを公開するだけです！

保存して公開

成功

成功しました！サイトを表示すると、FastCommentsのライブコメント機能が有効になっているはずです:

成功

ドメインエラー

次のような認可エラーが発生することがあります:

ドメイン構成が見つかりません

これは、FastComments がこのドメインでアカウントの使用を許可するように設定されていないためです。

この場合、対処は簡単です。サイトを FastComments.com のアカウントに追加するだけです。

アカウントにサイトを追加するにはこちらへ。

カスタマイズ

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

カスタムスタイルを追加したり設定を調整したい場合は、方法を学ぶためにカスタマイズと構成に関するドキュメントをご覧ください。

Weebly サイトに投票を追加する

FastComments があなたの Weebly サイトに導入されると、コメント内でライブ投票を実行することもできます。ウィジェットのカスタマイズ設定で Enable Polls をオンにすると、コメントツールバーに投票ボタンが表示されます。投票は 2 から 10 の選択肢を設定でき、結果はページ上の全員にリアルタイムで更新され、投票の作成者や投票にログインが必要かどうかを選択できます。Weebly に追加でインストールするものは何もありません。

Live Polls デモを試すまたは投票のドキュメントを読んで設定してください。

言語 🇯🇵 日本語

Weebly のインストール

投票