Shopify サイトにコメントを追加する

Shopify App Store からインストールする

1. Shopify App Store の FastComments の掲載ページを開きます。
2. Add app をクリックし、インストールフロー中に希望するプランを選択します。
3. インストールが完了すると、Shopify が FastComments 管理画面（Shopify 内）にリダイレクトします。

これでインストールは完了です。テーマファイルに貼り付けるものは何もありません。

自動的に設定される項目

インストールでは、本来手作業で行うすべての処理が実行されます:

• ストア用の FastComments テナントが作成され、ショップのドメインに紐付けられます。
• コメントがドメインエラーなく読み込まれるよう、テナントの許可ドメインにストアの URL が追加されます。
• fastcomments.tenant_id shop metafield が書き込まれ、各ブロックがどのテナントでレンダリングするかを認識できるようになります。
• Shopify の顧客向けのシングルサインオンがデフォルトで有効になります。
• 課金は Shopify Managed Pricing を通して行われます。請求は通常の Shopify 請求に表示されます。アップグレード、ダウングレード、キャンセルは Shopify 管理画面の 設定 > アプリと販売チャネル > FastComments から行えます。

インストール前に既にあなたのショップが FastComments の顧客であった場合、インストールは新しいテナントを作成するのではなく既存のテナントを再利用します。

埋め込み管理画面

Shopify 管理画面から FastComments アプリを開くと、ワンクリックで完全な FastComments バックエンドにアクセスできるダッシュボードが表示されます:

• Dashboard: アカウント設定、使用状況、サブスクリプションの詳細。
• Moderation Queue: ストア全体のコメントの承認、拒否、返信。
• Customize: ウィジェットの色、フォント、モデレーションルール、設定の調整。
• Ratings & Reviews Helper: Reviews Summary ブロックを使用する場合の星評価とレビュー質問の設定。

各タイルは FastComments をワンタイムのログインリンクで開くため、別途サインインする必要はありません。

次: ストアにブロックを追加する

Shopify テーマエディタ（オンラインストア > テーマ > カスタマイズ）を開き、コメントやレビューを追加したいテンプレートを開いて ブロックを追加 をクリックします。FastComments のブロックは アプリ の下に表示されます。以降のガイドではそれぞれのブロックについて説明します。

The FastComments ブロックは主要なコメントウィジェットです。ブログ投稿テンプレート、商品テンプレート、またはディスカッションスレッドやライブチャットを表示したい任意のページに追加してください。

ブロックを追加

1. Shopify テーマエディタを開きます（オンラインストア > テーマ > カスタマイズ）。
2. コメントを表示したいテンプレートを選びます：ブログ投稿、商品、またはその他のページやセクションテンプレート。
3. コメントを表示したいセクションで ブロックを追加 をクリックします。
4. アプリ の下で FastComments を選択します。
5. 保存 をクリックします。

ブロックはすぐに表示されます。入力する Tenant ID はありません。アプリをインストールするとストアのテナントが自動的に接続されます。

設定

ページ識別子の選択方法

各コメントスレッドは URL ID によりキー付けされます。ブロックは自動的に 1 つを選択します：

• ブログ投稿テンプレート: shopify-article-{article.id}、スラッグやタイトルの変更に関して安定しています。
• 商品テンプレート: shopify-product-{product.id}、スラッグやタイトルの変更に関して安定しています。
• その他のテンプレート: リクエストパス。

Custom URL ID を設定した場合はその値が代わりに使用されます。複数のブロック（例えば、ローカライズされた商品ページのバリアント）で同じ Custom URL ID を使用すると、1 つのコメントスレッドを共有できます。

Threaded vs Streaming

Threaded はデフォルトです。訪問者は互いに返信し、投票が可能で、モデレーションツールは期待どおりに動作します。ブログ投稿や商品レビューに最適です。

Streaming はスレッド構造を省き、投稿された新しいコメントをリアルタイムで表示します。チャットフィードのような動作です。商品発売、ライブイベント、コミュニティページに最適です。

同じページに複数のブロック

同じテンプレートにブロックを複数追加できます。例えば、商品ページの上部にレビューの要約を置き、下部に FastComments ブロックを配置するなどです。ブロックは URL ID を共有するため、要約は下のコメントを反映します。

ヒント

• テーマエディタのプレビューでテナントが見つからない場合、黄色い通知とともにブロックは非表示になります。ライブストアでそれが表示される場合は、FastComments アプリを再インストールしてください。
• 商品ページでは、FastComments ブロックが商品レビューウィジェットとしても機能します。ページ上部に星評価の要約を表示するには FastComments - Reviews Summary と組み合わせてください。

The FastComments - Comment Count ブロックは、単一ページの小さなコメント件数を表示します。ブログ記事一覧や商品カード、コメント付きページへのリンクを含む任意のテンプレートで使用して、訪問者がクリックする前に各スレッドの活発さを確認できるようにします。

ブロックを追加する

1. Shopifyテーマエディタを開きます。
2. カウントを表示したいテンプレートを開きます。例: Blog テンプレート（投稿一覧）や商品一覧セクション。
3. 各アイテムをレンダリングするセクションで ブロックを追加 をクリックします。
4. 「アプリ」の下で FastComments - Comment Count を選択します。
5. 「保存」をクリックします。

設定

カウントがコメントスレッドと一致する仕組み

Comment Count ブロックは FastComments ブロックと同じ自動検出ロジックを使用します:

• Blog post template: shopify-article-{article.id}
• Product template: shopify-product-{product.id}
• Other templates: the request path

ページ上の FastComments ブロックに Custom URL ID を設定している場合は、同じ Custom URL ID を Comment Count ブロックにも設定して、同じスレッドを指すようにしてください。

ヒント

• ページ上のすべてのアイテムのカウントは1回のリクエストで取得されるため、長いリストの各アイテムにブロックを追加しても追加の往復コストは発生しません。
• リスト内の各記事や商品につき1つの Comment Count ブロックを配置するのが想定される使い方です。必要に応じてブロックを何度でも追加できます。

The FastComments - Recent Comments ブロックは、ストア全体の最新のコメントを表示します。サイドバー、フッター、またはホームページのセクションで新しいアクティビティを表示するのに使用してください。

ブロックを追加する

1. Shopify のテーマエディタを開きます。
2. フィードを表示したいテンプレートを開きます。サイドバーのセクション、ホームページ、ブログのインデックスなどが適しています。
3. 表示させたいセクションで Add block をクリックします。
4. Apps の下から FastComments - Recent Comments を選択します。
5. Save をクリックします。

設定

ヒント

• 各コメントは投稿されたページへのリンクになっているため、このブロックは「人々が今話題にしていること」へのナビゲーションのヒントとしても機能します。
• このフィードはストア全体のものです。単一ページの最近のコメントを表示するには、そのページで代わりに FastComments ブロックを使用してください。

The FastComments - Recent Discussions ブロックは、ストア内で最近コメントがあったページをページごとに1件ずつ一覧表示します。個々のコメントよりもアクティブなスレッドを訪問者に見つけてもらいたい場合に使用します。

ブロックを追加

1. Shopifyのテーマエディタを開きます。
2. フィードを表示したいテンプレートを開きます（例：サイドバー、フッター、ブログ一覧、またはホームページのセクション）。
3. 表示先のセクションで ブロックを追加 をクリックします。
4. Apps の下で FastComments - Recent Discussions を選択します。
5. 保存 をクリックします。

設定

Recent Discussions vs Recent Comments

両方のブロックは同じデータを取得しますが、表示の仕方が異なります:

• Recent Comments: 最新の個別コメントをフラットに並べたリストです。「今何が投稿されたか」を知りたい場合に最適です。
• Recent Discussions: ページごとに1件を表示し、最近のアクティビティ順に並べます。「今どのスレッドが盛り上がっているか」を知りたい場合に最適です。

同じストア内で両方を併用することができます。例えば、ブログのサイドバーに Recent Comments を、ホームページに Recent Discussions を配置するなど。

The FastComments - Top Pages block は、ストア内で全体的にコメントのアクティビティが最も多いページを一覧表示します。最も議論されている投稿や商品を目立たせるために使用してください。

ブロックを追加

1. Shopify のテーマエディタを開きます。
2. サイドバー、フッター、ブログのインデックスセクションなど、リストを表示したいテンプレートを開きます。
3. 対象のセクションで Add block をクリックします。
4. Apps の下で FastComments - Top Pages を選択します。
5. Save をクリックします。

設定

Top Pages vs Recent Discussions

• Top Pages は総エンゲージメントでランク付けするため、同じ投稿がしばらく上位に留まりやすいです。「popular posts」サイドバーに適しています。
• Recent Discussions は最新のアクティビティ順でランク付けするため、リストの入れ替わりが激しくなります。「今ホットな話題」パネルに適しています。

The FastComments ブロックはシングルサインオン (SSO) をサポートしており、Shopify の顧客が別途 FastComments アカウントを作成せずに自分のアカウントでコメントできます。

仕組み

訪問者がストアにログインした状態で FastComments ブロックを含むページを開くと:

1. ブロックは Shopify の customer オブジェクトを検出します。
2. 署名付きのアプリプロキシリクエストを通じて、顧客の名前とメールアドレスを FastComments に送信します。
3. FastComments は shopify-{customerId} をキーとするユーザーを作成または一致させるため、同じ顧客はセッションや再インストールを跨いでも常に同じ FastComments ユーザーにマッピングされます。
4. 訪問者の名前がコメントに表示されます。再度ログインを促されることはありません。

訪問者がストアにログインしていない場合、ブロックは匿名コメントにフォールバックします（ウィジェットの構成によっては FastComments のサインインフローにフォールバックします）。

SSO をオフにする

SSO はすべての FastComments ブロックでデフォルトでオンになっています。特定のブロックでオフにするには:

1. Shopify テーマエディタを開きます。
2. ブロックを含むテンプレートを開き、ブロックをクリックして選択します。
3. SSO のチェックを外します。
4. 保存 をクリックします。

会話で投稿者に別の識別名を選ばせたい場合は SSO をオフにします。例えば、スタッフが別の表示名でコメントする社内コミュニティページなどです。

FastComments が受け取るもの

各顧客に送信される SSO ペイロードには以下が含まれます:

• Shopify の顧客 ID から派生したユーザー ID（shopify-{customerId}）。
• 顧客のメールアドレス（ユーザー識別に使用され、公開表示はされません）。
• 顧客の表示名（コメント投稿者名として使用されます）。

注文履歴、支払い情報、住所データは送信されません。ペイロードはサーバー側で署名されるため、顧客のブラウザが資格情報を目にすることはありません。

ログインとログアウトのリンク

SSO がオンの場合、コメントウィジェットのサインイン・サインアウトリンクは標準の Shopify 顧客アカウントルートである /account/login と /account/logout を指します。設定は不要です。これらのリンクは、顧客アカウントが有効になっているストアであれば動作します。

色、フォント、モデレーションルール、許可される HTML、および匿名コメントはすべて、ストアのブランディングに合わせて設定できます。

Shopify 管理画面で FastComments アプリを開き、ウィジェットのカスタマイズ画面を開くには Customize タイルをクリックします。これは一度限りのログインリンクを使用するため、別途サインインする必要はありません。

カスタマイズオプションの全一覧は、カスタマイズと構成ガイド を参照してください。