Comment Count Widgets | FastComments Docs

FastComments는 특정 페이지나 게시물의 댓글 수를 표시할 수 있는 가볍고 독립적인 댓글 수 위젯을 제공합니다. 이러한 위젯은 메인 댓글 위젯과 분리되어 있으며 전체 댓글 인터페이스 없이 댓글 수를 표시하려는 곳 어디에나 사용하도록 설계되었습니다.

사용 가능한 댓글 수 위젯은 두 가지 유형이 있습니다:

Comment Count Widget - 단일 페이지의 댓글 수를 표시하기 위해
Bulk Comment Count Widget - 동일한 페이지에서 여러 페이지의 댓글 수를 효율적으로 표시하기 위해

이 문서에서는 VanillaJS 위젯을 다룹니다. 당사의 React/Angular/etc 라이브러리에도 자체 위젯이 있습니다.

댓글 수 위젯은 단일 페이지의 댓글 수를 표시하도록 설계되었습니다. 가볍고 구성하면 실시간 업데이트를 제공합니다.

기본 설치

Comment Count Widget Installation

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count'), {
        tenantId: 'demo'
    });
</script>

구성 옵션

FastCommentsCommentCount 함수는 다음 구성 옵션을 허용합니다:

tenantId (필수): FastComments 테넌트 ID
urlId (선택사항): 페이지 식별자. 지정하지 않으면 window.location.href가 기본값
numberOnly (선택사항): true이면 텍스트 없이 숫자만 표시. 기본값은 false
isLive (선택사항): true이면 카운트가 자동으로 업데이트됨. 기본값은 false

고급 예제

사용자 정의 URL ID

Comment Count with Custom URL ID

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-custom"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-custom'), {
        tenantId: 'demo',
        urlId: 'my-custom-page-id'
    });
</script>

숫자만 표시

Comment Count Number Only

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-number"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-number'), {
        tenantId: 'demo',
        numberOnly: true
    });
</script>

실시간 업데이트

Live Comment Count Updates

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-live"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-live'), {
        tenantId: 'demo',
        isLive: true
    });
</script>

위젯 메서드

위젯은 다음 메서드를 가진 객체를 반환합니다:

destroy(): 위젯을 제거하고 모든 타이머를 정리
update(config): 새 구성으로 위젯을 업데이트

사용 예제

Widget Methods Example

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-methods"></div>
<script>
    const widget = window.FastCommentsCommentCount(document.getElementById('comment-count-methods'), {
        tenantId: 'demo'
    });
    // Update the widget to show a different page's count
    setTimeout(() => {
        widget.update({
            tenantId: 'demo',
            urlId: 'different-page-id'
        });
    }, 5000);
    // Destroy the widget after 10 seconds
    setTimeout(() => {
        widget.destroy();
    }, 10000);
</script>

스타일링

위젯은 댓글 수가 포함된 일반 HTML을 렌더링하며 최소한의 스타일링이 제공됩니다. CSS로 외관을 사용자 정의할 수 있습니다:

Custom Styling

Copy

Run

<style>
    .comment-count-styled {
        background: #f0f0f0;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 14px;
        color: #666;
        display: inline-block;
    }
</style>
<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-styled" class="comment-count-styled"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-styled'), {
        tenantId: 'demo'
    });
</script>

벌크 댓글 수 위젯은 동일한 페이지에서 여러 페이지의 댓글 수를 효율적으로 표시하도록 설계되었습니다. 각 댓글 수에 대해 개별 API 호출을 하는 대신, 이 위젯은 최적의 성능을 위해 요청을 일괄 처리합니다.

기본 설치

Bulk Comment Count Widget Installation

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<!-- Multiple elements with comment counts -->
<div class="fast-comments-count" data-fast-comments-url-id="page-1"></div>
<div class="fast-comments-count" data-fast-comments-url-id="page-2"></div>
<div class="fast-comments-count" data-fast-comments-url-id="page-3"></div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

작동 방식

벌크 위젯은 다음과 같이 작동합니다:

fast-comments-count 클래스를 가진 요소를 페이지에서 스캔
각 요소에서 data-fast-comments-url-id 속성 읽기
여러 댓글 수를 효율적으로 가져오기 위해 API 요청 일괄 처리
각 요소를 적절한 댓글 수로 업데이트

구성 옵션

FastCommentsCommentCountBulk 함수는 다음 구성 옵션을 허용합니다:

tenantId (필수): FastComments 테넌트 ID
apiHost (선택사항): 자체 호스팅 인스턴스를 사용하는 경우 사용자 정의 API 호스트

실제 예제

블로그 게시물 목록에서 벌크 위젯을 사용하는 방법을 보여주는 실용적인 예제:

Blog Post Listing with Comment Counts

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<style>
    .blog-post {
        border: 1px solid #ddd;
        margin: 10px 0;
        padding: 15px;
        border-radius: 5px;
    }
    .post-meta {
        color: #666;
        font-size: 14px;
        margin-top: 10px;
    }
    .comment-count {
        background: #e7f3ff;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        display: inline-block;
    }
</style>
<div class="blog-post">
    <h3>How to Install FastComments</h3>
    <p>Learn how to add FastComments to your website in just a few minutes...</p>
    <div class="post-meta">
        Published: March 15, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="how-to-install-fastcomments"></span>
    </div>
</div>
<div class="blog-post">
    <h3>Advanced FastComments Configuration</h3>
    <p>Dive deep into the advanced configuration options for FastComments...</p>
    <div class="post-meta">
        Published: March 10, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="advanced-fastcomments-config"></span>
    </div>
</div>
<div class="blog-post">
    <h3>FastComments vs Other Solutions</h3>
    <p>See how FastComments compares to other commenting solutions...</p>
    <div class="post-meta">
        Published: March 5, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="fastcomments-comparison"></span>
    </div>
</div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

성능 고려사항

벌크 위젯은 다음을 통해 자동으로 성능을 최적화합니다:

요청 일괄 처리: 단일 API 호출로 여러 댓글 수를 가져옴
요청 크기 제한: URL 목록이 너무 길어지면(1,000자 초과) 요청이 자동으로 분할됨
중복 제거: 동일한 data-fast-comments-url-id를 가진 여러 요소가 동일한 수를 공유

동일한 URL ID를 가진 여러 요소

동일한 data-fast-comments-url-id를 가진 여러 요소를 페이지에 배치할 수 있습니다. 모두 동일한 수로 업데이트됩니다:

Multiple Elements Same URL ID

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<style>
    .count-example {
        margin: 10px 0;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 5px;
    }
</style>
<div class="count-example">
    Header Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<div class="count-example">
    Sidebar Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<div class="count-example">
    Footer Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

로컬라이제이션

벌크 위젯은 FastComments 언어 설정에 따라 자동으로 댓글 수를 포맷합니다. 다음에 대한 적절한 텍스트를 제공합니다:

댓글 없음
댓글 1개
여러 댓글

벌크 vs 싱글 위젯 사용 시점

벌크 위젯 사용 시:

동일한 페이지에 여러 댓글 수가 있는 경우
댓글 수가 있는 게시물/기사 목록을 표시하는 경우
성능이 중요한 경우 (API 호출 감소)

싱글 위젯 사용 시:

페이지에 댓글 수가 하나만 필요한 경우
실시간 업데이트가 필요한 경우 (싱글 위젯은 실시간 업데이트 지원)
개별 위젯 동작을 더 세밀하게 제어하고 싶은 경우

댓글 수 API

원하는 것과 브라우저, 서버 또는 API SDK에서 가져오려는지에 따라 카운트를 얻기 위한 여러 엔드포인트가 있습니다.

공개 댓글 수

위의 위젯을 사용하거나 해당 위젯이 사용하는 API를 사용하여 공개 댓글 수를 얻을 수 있습니다. 이러한 API는 2019년 이후 변경되지 않았으며 앞으로도 변경되지 않을 것입니다.

Single Count Endpoint

Copy

https://fastcomments.com/widgets/comment-count/:tenantId?urlId=page_id_or_url

다음과 같은 구조를 반환합니다:

Single Count Endpoint Response

Copy

{"count":0,"postfix":"comments"}

postfix 속성은 항상 포함됩니다.

Bulk Count Endpoint

Copy

https://fastcomments.com/widgets/comment-count-bulk/:tenantId?urlIds=x,y,z

다음과 같은 구조를 반환합니다:

Bulk Count Endpoint Response

Copy

{
    "status": "success",
    "translations": {
        "t174": "0 Comments",
        "t175": "1 Comment",
        "t176": "[count] Comments"
    },
    "counts": {
        "x": 10
    }
}

counts 객체는 카운트가 있는 페이지에 대해서만 채워집니다. translations 맵은 위젯에 사용되므로 항상 존재합니다.

공개 엔드포인트 동작 / 캐싱

공개 엔드포인트에는 트래픽 급증을 처리하기 위한 60초 캐싱 메커니즘이 있습니다. 내부적으로 이것은 서버 메모리의 스레드당 LRU 캐시이므로 사람들이 많은 댓글을 남길 때 카운트가 약간 변경되는 것을 볼 수 있습니다(올라갔다가 일시적으로 내려감).

공개 엔드포인트는 항상 루트 댓글 수가 아닌 총 댓글 수를 반환합니다.

서버 측 API / SDK

서버에서 댓글을 가져오는 방법은 Pages API를 호출하여 총 댓글 수와 루트 댓글 수가 포함된 페이지 객체를 가져오는 것입니다. API 요청을 수동으로 구성하지 않고도 이 API를 호출할 수 있는 SDK를 제공하며 타입이 지정된 반환 값을 제공합니다.

FastComments 댓글 수 위젯은 사이트 전반에 걸쳐 댓글 수를 표시하는 간단하고 효율적인 방법을 제공합니다.

이 문서가 도움이 되었기를 바랍니다.

설치

댓글 수 API

이 문서에서는 VanillaJS 위젯을 다룹니다. 당사의 React/Angular/etc 라이브러리에도 자체 위젯이 있습니다.

댓글 수 위젯 설치

기본 설치

구성 옵션

고급 예제

사용자 정의 URL ID

숫자만 표시

실시간 업데이트

위젯 메서드

사용 예제

스타일링

댓글 수 위젯 일괄 설치

기본 설치

작동 방식

구성 옵션

실제 예제

성능 고려사항

동일한 URL ID를 가진 여러 요소

로컬라이제이션

벌크 vs 싱글 위젯 사용 시점

댓글 수 API

공개 댓글 수

공개 엔드포인트 동작 / 캐싱

서버 측 API / SDK

언어 🇰🇷 한국어

설치

댓글 수 API

이 문서에서는 VanillaJS 위젯을 다룹니다. 당사의 React/Angular/etc 라이브러리에도 자체 위젯이 있습니다.

댓글 수 위젯 설치

기본 설치

구성 옵션

고급 예제

사용자 정의 URL ID

숫자만 표시

실시간 업데이트

위젯 메서드

사용 예제

스타일링

댓글 수 위젯 일괄 설치

기본 설치

작동 방식

구성 옵션

실제 예제

성능 고려사항

동일한 URL ID를 가진 여러 요소

로컬라이제이션

벌크 vs 싱글 위젯 사용 시점

댓글 수 API

공개 댓글 수

공개 엔드포인트 동작 / 캐싱

서버 측 API / SDK