WordPress 플러그인은 여기에서 찾을 수 있습니다.

완전한 설치 가이드와 플러그인 관련 문서는 여기에 있습니다.

이 플러그인은 실시간 댓글, SSO 및 코드 없는 설치를 지원합니다. 플러그인을 설치한 후 관리 페이지의 설치 가이드를 따르세요. WordPress 설치를 계정에 연결하는 방법을 안내해 드립니다.

WordPress 플러그인을 통해 FastComments로 남긴 모든 댓글은 자동으로 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는 본질적으로 페이지당 둘 이상의 인스턴스 또는 동일한 채팅 스레드를 가리키는 여러 인스턴스를 지원합니다.

예를 들어 VanillaJS 라이브러리의 경우 댓글 위젯을 다른 DOM 노드에 연결하기만 하면 됩니다. 페이지의 현재 스레드를 단순히 업데이트하려면 페이지 다시 로드 없이 댓글 스레드 전환을 참조하세요.

여러 인스턴스 간 인증 상태 동기화

자체 댓글 스레드가 있는 자주 묻는 질문 목록인 커스텀 싱글 페이지 애플리케이션의 예를 살펴보겠습니다.

이 경우 DOM에 동시에 여러 FastComments 인스턴스가 있습니다.

이것은 괜찮지만 사용자 경험에 몇 가지 문제를 일으킵니다.

이 흐름을 고려하세요:

1. 사용자가 질문 목록이 있는 페이지를 방문하며, 각각에 자체 댓글 위젯이 있습니다.
2. 사용자가 사용자 이름과 이메일을 입력하고 스레드 중 하나에 질문을 남깁니다.
3. 질문이 있는 다른 FAQ 항목을 봅니다.
4. 다시 댓글을 달러 갑니다. 이메일과 사용자 이름을 다시 입력해야 할까요?

이 경우 FastComments가 위젯 인스턴스 간의 인증 상태 동기화를 처리합니다. 4단계에서 사용자는 같은 페이지에서 사용자 이름과 이메일을 입력했기 때문에 이미 임시로 인증됩니다.

실시간 댓글 즉시 표시

댓글 위젯은 기본적으로 실시간이지만 실시간 댓글은 페이지 콘텐츠가 이동하는 것을 방지하기 위해 "N개의 새 댓글 표시" 버튼 아래에 나타납니다.

어떤 경우에는 버튼을 클릭하지 않고 새 댓글을 즉시 표시하는 것이 바람직할 수 있습니다.

이 경우 showLiveRightAway 플래그를 활성화해야 합니다. 문서는 여기에서 찾을 수 있습니다.

익명 댓글 허용(이메일 필수 아님)

기본적으로 FastComments는 사용자가 댓글 작성 시 이메일을 남기도록 요구합니다.

이것은 비활성화할 수 있습니다. 지침은 여기에 있습니다.

커스텀 스타일링

많은 고객이 댓글 위젯에 자체 스타일을 적용합니다. 문서는 여기에서 찾을 수 있습니다.

여러 도메인에서 동일한 댓글 표시

여러 사이트에서 동일한 댓글을 표시하는 것은 FastComments가 기본적으로 지원하는 기능입니다. 이 주제에 대한 문서를 참조하세요.

현재 페이지 변경

FastComments는 SPA 및 복잡한 애플리케이션을 지원합니다. 현재 페이지를 변경하는 것은 쉬우며 여기에서 다룹니다.