Ionos サイトにコメントを追加

まず、FastCommentsが置き換えるコンタクトフォームを追加します。

そのために、サイトエディターを開き、対象のページで Add Section をクリックします。

次に、以下に示すように、左側の Content -> Contact -> Contact Form に移動します:

コンタクトフォームの追加

次に、FastCommentsにフォームを置き換えるよう指示する必要があります。デフォルトのフォームタイトルをクリックしてください:

フォームタイトルの設定

タイトルを FastComments Goes Here に設定します。大文字小文字とスペースが同一でないと動作しないため、このテキストをコピーして貼り付けることをおすすめします。

完了すると、以下のように表示されます:

タイトル設定の完了

これでステップ1は完了です！

次に、FastCommentsウィジェットのコードをサイトに追加します。このコードは、タイトルが FastComments Goes Here であるすべてのフォームを検索し、FastCommentsに置き換えます。

それでは、サイトエディターの左下にある Settings に移動しましょう:

設定を開く

Custom Head Code セクションを開きます:

Custom Head Codeを開く

Ionosの場合は、FastCommentsウィジェットコードの特別なバージョンが必要です。他のチュートリアルのコードスニペットは動作しません。

以下のコードをコピーします:

Ionos FastCommentsスニペット

Copy

1

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

3<script>

4 (function () {

5 let loaded = false;

6 let interval = null;

7

8 function attemptLoad() {

9 const nodes = document.querySelectorAll('h2');

10

11 nodes.forEach(function (node) {

12 if (node.innerText && node.innerText.trim() === 'FastComments Goes Here') {

13 // フル幅ではない要素を取得します

14 const target = node.parentNode.parentNode.parentNode.parentNode.parentNode;

15 target.innerHTML = '';

16 FastCommentsUI(target, {

17 tenantId: "demo"

18 });

19 interval && clearInterval(interval);

20 loaded = true;

21 }

22 });

23 }

24

25 attemptLoad();

26 if (!loaded) {

27 interval = setInterval(attemptLoad, 300);

28 }

29 })();

30</script>

31

...そして、以下のように貼り付けます:

貼り付けて保存

これでサイトを公開すれば完了です。

左上の Content をクリックしてコンテンツエディタに戻ります:

コンテンツに戻る

それから公開できます！

公開！

以上です！FastComments がサイトで稼働しているはずです。以下のように表示されます:

完了！

よくできました！Ionos サイトにライブコメントを追加しました。

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

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

カスタムスタイルを追加したり設定を調整したい場合は、カスタマイズと設定に関するドキュメント をご確認ください。方法がわかります。