Framer サイトにライブコメントを追加

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

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

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

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

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

エディタを開く

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

では、Embed ブロックを追加しましょう。

左上の Insert に移動します:

「Insert」をクリック

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

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

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

Embed ウィジェットを探す

Embed ウィジェットをドラッグ＆ドロップ

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

Embed 設定を開く

次に Embed ウィジェットの種類を HTML に変更します:

HTML ウィジェットとして設定

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

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

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() {
            // some providers change the code snippet to be 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>

または、代わりに Streaming Chat ウィジェットを使用することもできます。Framer 用の FastComments Streaming Chat スニペットは以下の通りです:

FastComments Framer 専用 Streaming Chat スニペット

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() {
            // some providers change the code snippet to be 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 はあなたのサイトに合わせてカスタマイズできるように設計されています。

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

Framer サイトに投票機能を追加

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

Try the Live Polls demo または Polls documentation を読んで設定してください。

言語 🇯🇵 日本語

Framer インストール

投票