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

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

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

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

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

The VanillaJS version of the widget is the simplest way to add comments to your website, not requiring any build systems or server side code.

Simply add the following code snippet to any page to add comments to your site:

Simple Code Snippet

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

You can use the same code snippet on many pages; it will automatically create a separate thread per page.

Many applications have an "HTML Embed Code" option. Select that and paste the code snippet above in.

You also don't need an account to try it! You might see "tenantId: demo" in the above snippet if you're not logged in. This way it will use the demo account.

You can find documentation on configuring the widget here.

All versions of the FastComments widget are wrappers around the core VanillaJS library. This allows us to add features and fix issues in one place - and the changes automatically propagate to the other variants of the commenting widget.

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