Add Comments To a Website

WordPress 사이트에 댓글을 추가하려면, 저희 WordPress 플러그인을 여기에서 찾을 수 있습니다.

플러그인에 대한 전체 설치 가이드 및 문서는 여기에 있습니다.

이 플러그인은 라이브 댓글, SSO 및 코드 없는 설치를 지원합니다. 플러그인을 설치한 후 관리 페이지의 설치 가이드를 따라가면 됩니다. 해당 가이드는 귀하의 WordPress 설치를 귀하의 계정에 연결하는 방법을 안내합니다.

WordPress 플러그인을 통해 FastComments에 남긴 모든 댓글은 귀하의 WordPress 설치로 자동 동기화되어 귀하가 데이터에 대한 제어권을 유지할 수 있습니다. 이 기능은 WordPress 데이터베이스 크기를 제한하기 위해 비활성화할 수 있습니다.

The VanillaJS 버전의 위젯은 웹사이트에 댓글을 추가하는 가장 간단한 방법으로, 별도의 빌드 시스템이나 서버 측 코드를 요구하지 않습니다.

댓글을 사이트에 추가하려면 다음 코드 스니펫을 어떤 페이지에든 간단히 추가하세요:

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

동일한 코드 스니펫을 여러 페이지에서 사용할 수 있으며, 각 페이지마다 자동으로 별도의 스레드를 생성합니다.

많은 애플리케이션에는 "HTML Embed Code" 옵션이 있습니다. 그것을 선택하고 위의 코드 스니펫을 붙여넣으세요.

계정 없이도 사용해볼 수 있습니다! 로그인하지 않은 경우 위의 스니펫에서 "tenantId: demo"가 보일 수 있습니다. 이렇게 하면 데모 계정을 사용하게 됩니다.

위젯 구성에 대한 문서는 여기에서 확인할 수 있습니다.

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로 구축된 사이트에 댓글을 추가하려면, NPM에서 우리의 Angular 라이브러리를 여기에서 찾을 수 있습니다.

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

사용

시작하려면 데모 테넌트에 대한 구성 객체를 전달합니다:

사용 - 인라인 구성

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로 구축된 웹사이트에 댓글을 추가하려면 NPM에서 우리의 Vue 라이브러리를 여기에서 찾을 수 있습니다.

추가로, 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로 설정해야 합니다:

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 및 복잡한 애플리케이션을 지원합니다. 현재 페이지를 변경하는 것은 쉬우며 여기에서 다룹니다.