Add Live Commenting to Bubble.io Sites

まず、FastComments を追加したいページ/レイアウトに移動します。Bubble エディタでは、Visual Elements サイドバーからページ上に HTML 要素をドラッグ＆ドロップしてください。

HTML 要素を追加

HTML 要素を使って、FastComments ウィジェットをあなたの Bubble アプリに直接埋め込むことができます。

クリックしたのは、先ほど追加した HTML 要素です。表示されるプロパティエディタの HTML フィールドに、次のコードを貼り付けてください:

Bubble.io ライブコメント用コードスニペット

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // Bubbleはスニペットを非同期に変更する傾向があります

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

FastCommentsコードを挿入

Note: このコードには、Bubbleの動的な環境でFastCommentsが正しく読み込まれることを保証するための再試行メカニズムが含まれています。 他のコードスニペットは動作しません。

サインアップ後、'demo' を実際の FastComments テナント ID に置き換えることを忘れないでください。FastComments.com にログインしている場合は、すでに置き換えられているはずです。

コメントウィジェットが正しく表示されるようにするには、HTML要素の幅を調整する必要があります。要素のプロパティエディタでレイアウトタブを探してください。

幅の設定を見つける

レイアウトタブには重要なサイズ設定オプションがあり、さまざまな画面サイズでコメントウィジェットが正しく表示されるようになります。

レイアウトタブで幅を100%に設定します。これにより、コメントウィジェットがコンテナの全幅を占め、さまざまな画面サイズに適切に対応します。

幅を100%に設定

入力値を100（または希望のパーセンテージ）に変更した後、数字の横にあるドロップダウンをクリックして ピクセルからパーセンテージに変更する必要があります。

また、コメントウィジェットが正しく表示されるために十分なスペースを確保するため、最小高さ（例：400px）を設定してください。

これらの変更を行ったら、プレビューボタンをクリックしてFastCommentsウィジェットが動作する様子を確認してください！

お疲れさまです！Bubble.io サイトにライブコメント機能を追加しました。

権限が拒否されるエラーが発生した場合、または FastComments をカスタマイズしたい場合は、続きをお読みください。

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

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