Add Live Commenting to Typeflo.io Blogs

FastComments を Typeflo.io のブログに追加するには、まずブログのダッシュボードに移動し、左側のサイドバーの 設定 をクリックします。

「設定」をクリック

次に、設定ページ上部の カスタムコード タブをクリックします。

カスタムコード タブをクリック

カスタムコードを追加するためのセクションがヘッダー、ボディ、フッターの3つ表示されます。FastComments ではフッターセクションを使用します。

Custom Code タブの Footer セクションに、以下のコードを貼り付けてください:

Typeflo.io ライブコメントのコードスニペット

Copy

1

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

3<script>

4 (function () {

5 function load() {

6 let target = null;

7 let lastInstance;

8 if (document.querySelector('.fastcomments-widget')) {

9 setTimeout(load, 1000);

10 return;

11 }

12 if (lastInstance) {

13 lastInstance.destroy();

14 }

15 if (window.FastCommentsUI) {

16 const newElement = document.createElement('div');

17 newElement.classList.add('fastcomments-widget');

18 const subscribeSection = document.querySelector('.nc-SectionSubscribe2');

19 if (subscribeSection) {

20 subscribeSection.parentNode.insertBefore(newElement, subscribeSection);

21 target = newElement;

22 } else {

23 const fullWidthSection = document.querySelector('.container.w-full');

24 if (fullWidthSection) {

25 fullWidthSection.prepend(newElement);

26 target = newElement;

27 }

28 }

29 }

30 if (target) {

31 lastInstance = FastCommentsUI(target, {

32 "tenantId": "demo"

33 });

34 }

35 setTimeout(load, 1000);

36 }

37

38 load();

39 })();

40</script>

41

フッターセクションにコードを貼り付ける

コードを貼り付けたら、変更を適用するために Save ボタンをクリックしてください。

注意: このコードには、FastCommentsウィジェットを Typeflo.io のブログ記事上の最適な位置に動的に配置するロジックが含まれています。他のコードスニペットは Typeflo.io のレイアウトでは正しく動作しません。

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

よくできました！Typeflo.io のブログにライブコメント機能を追加しました。

FastComments がこれであなたのすべてのブログ投稿に表示され、読者が議論に参加できるようになります。

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

FastComments は、ブログのデザインに合わせてカスタマイズできるように設計されています。

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

Typeflo.io のブログでは、FastComments スクリプトを追加したのと同じ「Custom Code」セクションにカスタム CSS スタイルを追加できます。