Add Live Commenting to Framer Sites

FastComments を使うと、Framer で構築された任意のサイトにライブコメント機能を簡単に追加できます。

このチュートリアルでは、ライブコメントウィジェットのインストールのみを扱います。他のウィジェットのインストールや SSO の設定についてサポートが必要な場合は、お気軽にサポートチケットを作成してください。

ステップ 1: エディタを開く

まず、サイトのエディタを開きます。

この例では FastComments をブログページに追加しますが、どのタイプのページでも動作するはずです。

エディタを開く

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

さて、Embed ブロックを追加しましょう。

左上の Insert に移動します:

Insert をクリック

次に、左側のサイドバーを下にスクロールして、Utility にマウスを重ねます。

次に、ブログの末尾に Utility ブロックをクリックしてドラッグします。

重要なのは、示されているようにクリックしてドラッグすることで、単にクリックするだけにしないことです。もし単にクリックするだけだと、Framer はそれをブログの外側に挿入してしまい、後で移動させる必要が出てきます。

Locate Embed Widget

Drag and Drop Embed Widget

これで空の Embed ウィジェットができ、選択すると右側にサイドバーが表示されます。サイドバーを展開すると、次のような表示が見えます:

Open Embed Settings

次に、Embed ウィジェットのタイプを HTML に変更しましょう:

Set as HTML Widget

これで次のステップで FastComments Framer のコードスニペットを挿入する準備ができました。

ステップ 3: Framer 用 FastComments コードをコピーして貼り付ける

The Framer の Live Comments 用 FastComments スニペットは以下のとおりです。

FastComments Framer専用コメントスニペット

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // 一部のプロバイダはコードスニペットを async に変更します
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

Or, alternatively, you can use the Streaming Chat widget. The Framer Streaming Chat FastComments snippet is:

FastComments Framer専用ストリーミングチャットスニペット

Copy

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // 一部のプロバイダはコードスニペットを async に変更します
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

FastComments は Framer エディタをサポートしているため、コードを貼り付けると次のように表示されます（Publish をクリックする必要があるかもしれません）:

コメントウィジェットのプレビュー

サイトを表示するとコメント領域が表示されます。必要に応じて、Framer のサイドバーでウィジェットをフル幅に設定することもできます。

Framer はウィジェットの高さに制限があり自動リサイズをサポートしていないため、ここでは高さが固定されている Live Chat ウィジェットを選択しています。

ステップ 4: ウィジェットとページの高さを調整する

ウィジェットの配置は、次の2つの操作で改善できます。

まず、左のペインでウィジェットの高さを fill と 1fr に設定します:

コメントウィジェットの高さ

次に、デフォルトの Framer ページ設定を修正する必要があります。デフォルトではページの高さが固定サイズに設定されており、コメントスレッドが切れてしまうことがあります。そこで、これも fill に設定しましょう。

ページの高さを設定

望みどおりの見た目にするために、ページの高さを調整する必要があるかもしれません。

ドメインエラー

次のような認可エラーが発生する場合があります：

ドメイン構成がありません

これは FastComments がこのドメインであなたのアカウントを使用できるように許可する必要があることを認識していないためです。

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

ここをクリックしてサイトをアカウントに追加してください。

カスタマイズ

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

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

言語 🇯🇵 日本語