Comment Count Widgets | FastComments Docs

FastCommentsは、特定のページや投稿のコメント数を表示できる軽量で独立したコメント数ウィジェットを提供します。これらのウィジェットはメインのコメントウィジェットとは別で、フルのコメントインターフェースを表示せずにコメント数を見せたい場所で使用するよう設計されています。

There are two types of comment count widgets available:

Comment Count Widget - 単一ページのコメント数を表示するためのウィジェット
Bulk Comment Count Widget - 同一ページ上で複数のページにわたるコメント数を効率的に表示するためのウィジェット

This article covers the VanillaJS widgets. Our React/Angular/etc libraries also have their own widgets。

コメントカウントウィジェットは、単一ページのコメント数を表示するために設計されています。軽量で、設定すればリアルタイム更新を提供します。

基本インストール

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件のコメント
複数のコメント

バルクウィジェットとシングルウィジェットの使い分け

バルクウィジェットを使用する場合：

同じページに複数のコメント数がある
コメント数付きの投稿/記事リストを表示している
パフォーマンスが重要（API呼び出しを削減）

シングルウィジェットを使用する場合：

ページに1つのコメント数だけが必要
ライブ更新が必要（シングルウィジェットはリアルタイム更新をサポート）
個々のウィジェットの動作をより細かく制御したい

コメント数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

コメント数ウィジェットのインストール

基本インストール

設定オプション

高度な例

カスタムURL ID

数字のみの表示

ライブ更新

ウィジェットメソッド

使用例

スタイリング

コメント数ウィジェットの一括インストール

基本インストール

動作の仕組み

設定オプション

実世界の例

パフォーマンスに関する考慮事項

同じURL IDを持つ複数の要素

ローカライゼーション

バルクウィジェットとシングルウィジェットの使い分け

コメント数API

公開コメント数

公開エンドポイントの動作 / キャッシュ

サーバーサイドAPI / SDK

言語 🇯🇵 日本語

インストール

コメント数API

コメント数ウィジェットのインストール

基本インストール

設定オプション

高度な例

カスタムURL ID

数字のみの表示

ライブ更新

ウィジェットメソッド

使用例

スタイリング

コメント数ウィジェットの一括インストール

基本インストール

動作の仕組み

設定オプション

実世界の例

パフォーマンスに関する考慮事項

同じURL IDを持つ複数の要素

ローカライゼーション

バルクウィジェットとシングルウィジェットの使い分け

コメント数API

公開コメント数

公開エンドポイントの動作 / キャッシュ

サーバーサイドAPI / SDK