Add Comments To a Website

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ライブラリはNPMのこちらで見つけることができます。

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

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

FastComments Angular（NPM経由）

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

使用方法

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

使用方法 - インライン設定

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のこちらで見つけることができます。

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

FastComments React（NPM経由）

Copy

1

2npm install --save fastcomments-react

3

FastComments React（Yarn経由）

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ライブラリはNPMのこちらで見つけることができます。

また、vue-nextライブラリはNPMのこちらにあります

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

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

以下の手順はVue 3向けです（リリースから時間が経っているため）。ただし、FastCommentsはfastcomments-vueライブラリを通じてVue 2もサポートしています。

FastComments Vue（NPM経由）

Copy

1

2npm install --save fastcomments-vue-next

3

FastComments Vue（Yarn経由）

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に設定する必要があります：

FastComments Vue - EU

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はSPAや複雑なアプリケーションをサポートしています。現在のページの変更は簡単で、こちらで説明されています。