ウェブサイトにコメントを追加する

WordPress サイトにコメントを追加するには、当社の WordPress プラグインをこちらでご確認ください。

プラグインの完全なインストールガイドとドキュメントはこちらにあります。

このプラグインはライブコメント、SSO、およびノーコードでのインストールをサポートしています。インストール後は管理ページのインストールガイドに従ってください それがあなたの WordPress インストールをあなたのアカウントに接続する方法を案内します。

FastComments を通じて当社の WordPress プラグインで残されたコメントは、自動的にあなたの WordPress インストールに同期され、データの管理権を保持できます。これは WordPress のデータベースサイズを抑えるために無効にすることもできます。

ウィジェットのVanillaJS版は、ウェブサイトにコメントを追加する最もシンプルな方法です。ビルドシステムやサーバーサイドのコードは必要ありません。

以下のコードスニペットを任意のページに追加するだけで、サイトにコメントを追加できます:

シンプルなコードスニペット

Copy Run

1

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

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

同じコードスニペットを複数のページで使用できます。ページごとに自動的に個別のスレッドが作成されます。

多くのアプリケーションには「HTML埋め込みコード」オプションがあります。それを選択し、上記のコードスニペットを貼り付けてください。

試用にはアカウントも必要ありません! ログインしていない場合、上記のスニペットに「tenantId: demo」と表示されていることがあります。この場合、デモアカウントが使用されます。

ウィジェットの設定に関するドキュメントはこちらでご覧いただけます。

FastCommentsウィジェットのすべてのバージョンは、コアとなるVanillaJSライブラリのラッパーです。これにより、機能の追加や問題の修正を一箇所で行うことができ、その変更が自動的に他のバリエーションのコメントウィジェットにも反映されます。

Angularで構築されたサイトにコメントを追加するには、当社のAngularライブラリをNPM こちら で見つけることができます。

FastComments の Angular コメントウィジェットは、VanillaJS のものと同じ機能（ライブコメント、sso など）をサポートしています。

fastcomments-typescript がピア依存関係として必要です。これが TypeScript のコンパイルに含まれていることを確認してください。将来的には、このピア依存関係は @types/fastcomments に移され、インストールが簡素化されます。

NPM経由のFastComments Angular

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

このピア依存関係は tsconfig.json ファイルに追加する必要があります。例:

fastcomments-typescript ピア依存関係の追加

Copy

1

2"include": [

3 "src/**/*.ts",

4 "node_modules/fastcomments-typescript/src/index.ts"

5],

6

次に、FastCommentsModule をアプリケーションに追加します:

アプリにモジュールを追加

Copy

1

2import { BrowserModule } from '@angular/platform-browser';

3import { NgModule } from '@angular/core';

4

5import { AppComponent } from './app.component';

6import { FastCommentsModule } from 'ngx-fastcomments';

7

8@NgModule({

9 declarations: [

10 AppComponent

11 ],

12 imports: [

13 BrowserModule,

14 FastCommentsModule

15 ],

16 providers: [],

17 bootstrap: [AppComponent]

18})

19export class AppModule { }

20

使用方法

開始するには、デモテナント用のconfigオブジェクトを渡します:

使用 - インライン構成

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>

3

構成が複雑になることがあるため、オブジェクト参照を渡すこともできます:

使用 - 構成にオブジェクトを渡す

Copy

1

2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>

3

使用 - EU

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>

3

ウィジェットは変更検出を使用するため、構成オブジェクトの任意のプロパティを変更するとウィジェットが再読み込みされます。

Angularコンポーネントがサポートする構成は こちら で確認できます。

Reactで構築されたサイトにコメントを追加するには、NPMで当社のReactライブラリを こちら で見つけることができます。

FastComments の React コメントウィジェットは、VanillaJS のものと同じすべての機能（ライブコメント、SSO など）をサポートします。

NPM経由の FastComments React

Copy

1

2npm install --save fastcomments-react

3

Yarn経由の FastComments React

Copy

1

2yarn add fastcomments-react

3

React の例

Copy

1

2import React, { Component } from 'react'

3

4import {FastCommentsCommentWidget} from 'fastcomments-react'

5

6class Example extends Component {

7 render() {

8 return <FastCommentsCommentWidget tenantId="demo" />

9 }

10}

11

EUにいる場合は、region パラメータを次のように設定してください:

React の例 - EU

Copy

1

2 <FastCommentsCommentWidget tenantId="demo" region="eu" />

3

Reactコンポーネントがサポートする設定は こちら で確認できます。

Vueで構築されたウェブサイトにコメントを追加するには、当社のVueライブラリがNPMで入手できます こちら。

さらに、vue-next用のライブラリもNPMにあります こちら

ソースコードは GitHub で見つけることができます。

FastComments Vue のコメントウィジェットは、VanillaJS のものと同じすべての機能（ライブコメント、sso、など）をサポートします。

以下の手順は Vue 3 向けのものです（しばらく前から利用可能なため）。ただし、FastComments は fastcomments-vue ライブラリを通じて Vue 2 もサポートしています。

NPM 経由の FastComments Vue

Copy

1

2npm install --save fastcomments-vue-next

3

Yarn 経由の FastComments Vue

Copy

1

2yarn add fastcomments-vue-next

3

Vue の例

Copy

1

2<template>

3 <img alt="Vue logo" src="./assets/logo.png">

4 <fast-comments v-bind:config="{tenantId: 'demo'}"/>

5</template>

6

7<script>

8import {FastComments} from 'fastcomments-vue-next';

9

10export default {

11 name: 'App',

12 components: {

13 FastComments

14 }

15}

16</script>

17

EU にいる場合は、region を EU に設定してください：

EU向けの FastComments Vue

Copy

1

2<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>

3

fastcomments-vue と fastcomments-vue-next ライブラリは、VanillaJS コメントウィジェットと同じ設定をサポートします。

Vue コンポーネントがサポートする設定は こちら で確認できます。

コメントウィジェットに渡されるすべての設定の型を含むFastCommentsのTypeScript定義は、NPMのこちらで見つけることができます。

GitHubではこちらで見つけることができます。

コメントウィジェットの各インスタンスは分離されています。このため、FastCommentsは本質的に1ページに複数のインスタンス、または同じチャットスレッドを指す複数のインスタンスをサポートしています。

例えばVanillaJSライブラリの場合、コメントウィジェットを異なるDOMノードに関連付けるだけです。ページ上の現在のスレッドを単に更新したい場合は、ページをリロードせずにコメントスレッドを切り替えるをご覧ください。

複数のインスタンス間で認証状態を同期する

それぞれのコメントスレッドを持つよくある質問のリストであるカスタムシングルページアプリケーションの例を見てみましょう。

この場合、DOM内に同時に複数のFastCommentsインスタンスがあります。

これは問題ありませんが、ユーザーエクスペリエンスにいくつかの課題をもたらします。

このフローを考えてみましょう：

1. ユーザーが質問のリストがあるページを訪問し、それぞれに独自のコメントウィジェットがあります。
2. ユーザーがユーザー名とメールを入力し、スレッドの1つに質問を残します。
3. 質問のある別のFAQ項目を見つけます。
4. 再度コメントしようとします。メールとユーザー名を再度入力する必要がありますか？

この場合、FastCommentsがウィジェットインスタンス間の認証状態の同期を処理します。ステップ4では、同じページでユーザー名とメールを入力したため、ユーザーはすでに一時的に認証されています。

コメントをすぐに表示する

コメントウィジェットはデフォルトでライブですが、ページの内容が移動しないように、ライブコメントは「N 件の新しいコメントを表示」ボタンの下に表示されます。

場合によっては、ボタンをクリックせずに新しいコメントをすぐに表示したいことがあります。

この場合、showLiveRightAway フラグを有効にします。そのドキュメントはこちらにあります。

匿名コメントの許可（メール不要）

デフォルトでは、FastComments はコメント時にメールアドレスの入力を必須としています。

これを無効にすることができ、手順はこちらです。

訪問者がユーザー名を選択する手間を省くために、FastComments は訪問者ごとにユーザー名を自動生成できます。

カスタムスタイリング

多くの顧客がコメントウィジェットに独自のスタイルを適用しています。ドキュメントはこちらにあります。

複数ドメインで同じコメントを表示する

複数のサイトで同じコメントを表示することは、FastComments が標準でサポートしています。この件に関するドキュメントをご覧ください。

現在のページを変更する

FastComments は SPA や複雑なアプリケーションをサポートしています。現在のページの変更は簡単で、こちらで説明しています。