How do I add comments to my website?

Add a comment section by copying a simple code snippet into your HTML page. FastComments works with any website - WordPress, React, Vue, Angular, or plain HTML. Just add the script tag and a target div element.

What is the easiest way to add a comment section to a website?

The easiest way is to use a comment widget like FastComments. Copy and paste a small JavaScript snippet into your page - no server-side code or build tools required. It takes under 5 minutes.

Can I add comments to a static HTML website?

Yes. FastComments provides a VanillaJS snippet that works on any static HTML page. Just add the script tag and a div element where you want comments to appear.

웹사이트에 댓글 추가

설치

FastComments는 정적이든 동적이든, 밝은 테마이든 어두운 테마이든, 공개 페이지이든 내부 페이지이든 상관없이 웹사이트에 댓글 기능을 쉽게 추가할 수 있게 해줍니다. 설치 및 모든 종류의 사이트나 웹 기반 애플리케이션에 적응시키기 쉬워야 합니다. 이를 통해 추가 구성 없이도 많은 경우 즉시 실시간 댓글 기능을 사용할 수 있습니다.

워드프레스

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

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

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

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

바닐라 JS / HTML 스니펫

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

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

Simple Code Snippet
Copy Run 
<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo"
}];
</script>

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

많은 애플리케이션에는 "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

  npm install fastcomments-typescript --save
  npm install ngx-fastcomments --save

피어 의존성은 예를 들어 tsconfig.json 파일에 추가되어야 합니다:

fastcomments-typescript 피어 의존성 추가

Copy

"include": [
  "src/**/*.ts",
  "node_modules/fastcomments-typescript/src/index.ts"
],

그런 다음, 애플리케이션에 FastCommentsModule을 추가하세요:

앱에 모듈 추가

Copy

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FastCommentsModule } from 'ngx-fastcomments';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FastCommentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

사용

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

사용 - 인라인 구성

Copy

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

구성이 복잡해질 수 있으므로 객체 참조를 전달할 수 있습니다:

사용 - 구성 객체 전달

Copy

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

사용 - EU

Copy

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

위젯은 변경 감지를 사용하므로 구성 객체의 어떤 속성이든 변경되면 위젯이 다시 로드됩니다.

Angular 컴포넌트가 지원하는 구성은 여기에서 확인할 수 있습니다.

리액트

React로 구축된 사이트에 댓글을 추가하려면, NPM에서 저희 React 라이브러리를 여기에서 확인할 수 있습니다.

FastComments React 댓글 위젯은 VanillaJS 버전과 동일한 모든 기능을 지원합니다 - 실시간 댓글, sso, 등.

NPM을 통한 FastComments React

Copy

npm install --save fastcomments-react

Yarn을 통한 FastComments React

Copy

yarn add fastcomments-react

React 예제

Copy

import React, { Component } from 'react'
import {FastCommentsCommentWidget} from 'fastcomments-react'
class Example extends Component {
  render() {
    return <FastCommentsCommentWidget tenantId="demo" />
  }
}

EU에 있는 경우, 다음과 같이 region 매개변수를 설정하세요:

React 예제 - EU

Copy

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

React 컴포넌트가 지원하는 구성은 여기에서 확인할 수 있습니다.

리액트 네이티브

React Native 앱에 댓글 기능을 추가하려면 NPM에서 React Native 라이브러리를 여기에서 찾으실 수 있습니다.

FastComments React Native 댓글 위젯은 VanillaJS 위젯과 동일한 모든 기능(실시간 댓글, SSO 등)을 지원합니다.

NPM을 통한 FastComments React Native

Copy

npm install --save fastcomments-react-native

Yarn을 통한 FastComments React Native

Copy

yarn add fastcomments-react-native

구성은 fastcomments-react 라이브러리와 약간 다르게 지정됩니다:

React Native 예제

Copy

import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
  const tenantId = 'demo'; // 귀하의 tenant id. https://fastcomments.com/auth/my-account/api-secret 에서 가져올 수 있습니다
  const pageId = 'native-test'; // 앱에서 댓글 스레드의 ID 또는 URL입니다.
  const config = {
    tenantId: tenantId,
    urlId: pageId
  };
  return (
      <FastCommentsCommentWidget config={config}/>
  );

EU에 있는 경우, region 파라미터를 설정해야 합니다:

React Native - EU

Copy

  // ...
  const config = {
    tenantId: tenantId,
    urlId: pageId,
    region: 'eu'
  };
  // ...

React Native 컴포넌트가 지원하는 구성은 여기에서 확인할 수 있습니다.

뷰

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

추가로, vue-next 라이브러리는 NPM에서 여기에서 확인할 수 있습니다.

소스 코드는 GitHub에서 확인할 수 있습니다.

FastComments Vue 댓글 위젯은 VanillaJS 버전과 동일한 모든 기능(실시간 댓글, SSO 등)을 지원합니다.

아래 지침은 Vue 3을 기준으로 합니다(이미 출시된 지 시간이 지났기 때문). 그러나 FastComments는 fastcomments-vue 라이브러리를 통해 Vue 2도 지원합니다.

NPM을 통한 FastComments Vue

Copy

npm install --save fastcomments-vue-next

Yarn을 통한 FastComments Vue

Copy

yarn add fastcomments-vue-next

Vue 예제

Copy

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <fast-comments v-bind:config="{tenantId: 'demo'}"/>
</template>
<script>
import {FastComments} from 'fastcomments-vue-next';
export default {
  name: 'App',
  components: {
    FastComments
  }
}
</script>

EU에 있으면 region을 EU로 설정해야 합니다:

FastComments Vue - EU 설정

Copy

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

fastcomments-vue 및 fastcomments-vue-next 라이브러리는 VanillaJS 댓글 위젯과 동일한 구성을 지원합니다.

Vue 컴포넌트가 지원하는 구성은 여기에서 확인할 수 있습니다.

타입스크립트

댓글 위젯에 전달되는 모든 구성에 대한 타입을 포함하는 FastComments TypeScript 정의는 NPM 여기에서 찾을 수 있습니다.

GitHub에서는 여기에서 찾을 수 있습니다.

같은 페이지에서 여러 인스턴스

댓글 위젯의 각 인스턴스는 격리되어 있습니다. 이 때문에 FastComments는 본질적으로 페이지당 둘 이상의 인스턴스 또는 동일한 채팅 스레드를 가리키는 여러 인스턴스를 지원합니다.

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

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

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

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

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

이 흐름을 고려하세요:

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

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

일반적인 사용 사례

실시간 댓글 즉시 표시

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

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

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

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

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

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

커스텀 스타일링

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

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

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

현재 페이지 변경

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

일반적인 문제 디버깅

다음은 자주 발생하는 몇 가지 증상과 일반적인 해결책입니다.

"This is a demo" 메시지

이 메시지는 홈페이지에서 위젯 코드를 복사해 사용했을 때 표시되며, 홈페이지에서는 데모 테넌트를 사용합니다. 자신의 테넌트를 사용하려면 여기에서 위젯 코드를 복사하세요.

"FastComments cannot load on this domain" 오류

FastComments는 계정과 연관된 요청을 인증하기 위해 어떤 도메인이 귀하 소유인지 알아야 합니다. 이 오류를 해결하는 방법은 문서를 확인하세요 (정확한 서브도메인 + 도메인을 계정에 추가하면 됩니다).

이 오류는 체험 기간이 끝난 이후에만 발생한다는 점에 유의하세요. 체험 기간 동안에는 새 도메인에서 오는 요청이 자동으로 계정에 추가됩니다.

마이그레이션된 댓글이 커스텀 설치에서 표시되지 않는 경우

보통 이는 가져온 댓글이 Page ID에 연결되어 있는데, 위젯에 URL을 전달하고 있거나 (값을 전달하지 않으면 기본적으로 페이지 URL이 사용됩니다) 하는 경우에 발생합니다.

이 문제는 댓글을 내보내기하여 URL ID 열(현재 열 B)을 확인하면 디버그할 수 있습니다.

URL ID 열에 보이는 값이 위젯 구성에서 urlId 매개변수로 전달하고 있는 값과 동일한지 확인하세요.

자세한 설명은 How Comments are Tied to Pages and Articles documentation를 참조해 보세요.

그래도 해결되지 않으면, 문의해 주세요.

댓글 위젯이 표시되지 않는 경우

댓글 위젯이 표시되지 않는 경우 Chrome 개발자 콘솔에서 오류를 확인하세요.

대부분의 잘못된 구성에서는 댓글 위젯이 로드될 수 있다면 적어도 페이지에 오류를 표시합니다. 아무것도 보이지 않는 것은 보통 스크립트 오류가 있다는 신호입니다.

원하는 구성대로 작동하지 않는 경우

댓글 위젯에 전달된 구성을 확인하려면 Chrome 확장 프로그램을 사용해 보세요. 그래도 해결되지 않으면, Chrome 확장 프로그램이 보여주는 내용을 스크린샷으로 찍어 문의해 주세요.

서로 다른 해시뱅으로 동일한 URL에서 댓글이 누락되는 경우

기본적으로, FastComments는 댓글이 저장되는 "버킷"으로 페이지 URL을 사용합니다. URL에 #hashbangs가 포함되어 있고 이 #hashbangs가 댓글 스레드를 식별하는 식별자의 일부가 되어서는 안 되는 경우, 해시뱅 값을 단순히 무시할 수 있습니다. 예:

해시뱅 무시 예제

Copy

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: "demo",
    url: location.href.replace(location.hash, ''),
    urlId: location.href.replace(location.hash, '')
}];
</script>

이 변경을 적용한 후에는 기존 댓글에 대해 마이그레이션을 수행해야 합니다. 이를 위해 문의해 주세요.

URL 쿼리 매개변수가 위젯에 영향을 줄 때

기본적으로, FastComments는 댓글이 저장되는 "버킷"으로 페이지 URL을 사용합니다. URL에 댓글 스레드를 식별하는 식별자의 일부가 되어서는 안 되는 쿼리 매개변수가 포함되어 있는 경우, 해당 쿼리 매개변수를 단순히 무시할 수 있습니다. 예:

쿼리 매개변수 무시

Copy

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: "demo",
    url: location.protocol + '//' + location.host + location.pathname,
    urlId: location.pathname
}];
</script>

이 변경을 적용한 후에는 기존 댓글에 대해 마이그레이션을 수행해야 합니다. 이를 위해 문의해 주세요.

이메일을 받지 못하는 경우

FastComments에서는 이메일 전송의 신뢰성을 최대한 보장하기 위해 많은 노력을 기울이고 있습니다. 그러나 일부 이메일 제공업체는 신뢰성 있게 전달하기가 특히 어렵습니다. fastcomments.com에서 온 메시지가 스팸 폴더로 분류되지 않았는지 확인하세요.

문의해 주시면 저희가 이메일을 받지 못하는 원인에 대해 더 자세한 정보를 제공해 드릴 수 있습니다.

Notion 및 Google Sites

Want to add comments to your Notion pages, Google Sites, or Nimbus Notes? We have you covered.

Notion

Notion 문서에 댓글 기능을 추가하려면, 여기 설명 비디오를 참고하세요.

Google Sites

Google Sites도 지원되며, 절차는 유사합니다.

임베드할 대화를 생성하세요.
Google Site를 편집할 때, Insert -> Embed로 이동하세요. By URL을 선택합니다.
1단계에서 복사한 URL을 붙여넣으세요.
Insert를 클릭하세요. 완료!

참고: 게시될 때까지 댓글이 표시되지 않습니다

Nimbus Note

Nimbus Note에도 실시간 댓글 기능 추가가 지원되며, 절차는 Notion과 유사합니다.

임베드할 대화를 생성하세요.
노트를 편집할 때 임베드 블록을 추가하세요.
1단계의 URL을 임베드할 URL로 사용하세요.
완료!

다음 가이드

타사 플러그인

사용자 정의 설치

문서에 삽입

웹사이트에 댓글 추가

설치

워드프레스

바닐라 JS / HTML 스니펫

앵귤러

사용

리액트

리액트 네이티브

뷰

타입스크립트

같은 페이지에서 여러 인스턴스

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

일반적인 사용 사례

실시간 댓글 즉시 표시

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

커스텀 스타일링

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

현재 페이지 변경

일반적인 문제 디버깅

"This is a demo" 메시지

"FastComments cannot load on this domain" 오류

마이그레이션된 댓글이 커스텀 설치에서 표시되지 않는 경우

댓글 위젯이 표시되지 않는 경우

원하는 구성대로 작동하지 않는 경우

서로 다른 해시뱅으로 동일한 URL에서 댓글이 누락되는 경우

URL 쿼리 매개변수가 위젯에 영향을 줄 때

이메일을 받지 못하는 경우

Notion 및 Google Sites

Notion

Google Sites

Nimbus Note

언어 🇰🇷 한국어

타사 플러그인

사용자 정의 설치

문서에 삽입

웹사이트에 댓글 추가

설치

워드프레스

바닐라 JS / HTML 스니펫

앵귤러

사용

리액트

리액트 네이티브

뷰

타입스크립트

같은 페이지에서 여러 인스턴스

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

일반적인 사용 사례

실시간 댓글 즉시 표시

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

커스텀 스타일링

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

현재 페이지 변경

일반적인 문제 디버깅

"This is a demo" 메시지

"FastComments cannot load on this domain" 오류

마이그레이션된 댓글이 커스텀 설치에서 표시되지 않는 경우

댓글 위젯이 표시되지 않는 경우

원하는 구성대로 작동하지 않는 경우

서로 다른 해시뱅으로 동일한 URL에서 댓글이 누락되는 경우

URL 쿼리 매개변수가 위젯에 영향을 줄 때

이메일을 받지 못하는 경우

Notion 및 Google Sites

Notion

Google Sites

Nimbus Note