FastComments.com

BigCommerce サイトにコメントを追加

FastComments を使えば、任意の BigCommerce サイトにライブコメント機能を簡単に追加できます。

以下の手順は BigCommerce 上に構築されたブログ向けですが、BigCommerce の他のどの部分にもよく適用できます。

このチュートリアルには FastComments アカウントが必要です。先にサインアップしてからここに戻ってくることをおすすめします。こちらでアカウントを作成できます。

ステップ1:テーマを準備する Internal Link

まず、編集するカスタムテーマを作成します。すでにカスタムテーマが設定されている場合は、この手順をスキップできます。

これを行うには、Storefront に移動し、次に Themes を選択します。

ストアフロントを選択
ストアフロントを選択
テーマを選択
テーマを選択

このチュートリアルではデフォルトテーマを使用しますが、手順はすべてのテーマで同じです。

次に、Customize をクリックするのはしません。代わりに、Advanced と Make a Copy をクリックします。

コピーを作成
コピーを作成

テーマのコピーを確認します。

コピーを保存
コピーを保存

完了すると、ページ下部の Themes にテーマが一覧表示されているはずです。下のようになります。

カスタムテーマが作成されました
カスタムテーマが作成されました

これで新しいテーマを編集して FastComments を追加できます。

テーマファイルを編集
テーマファイルを編集

ステップ2:正しいテンプレートを編集する Internal Link

次のステップは、統合を機能させるウィジェットコードを追加することです。

前のステップの指示に従いテーマエディタを開くと、左にファイルブラウザ、右にエディタが表示されます。

ここではブログ投稿ページを表すテンプレートを編集します。

左側のナビゲーションで、templates->pages->blog-post.html に移動します。

テンプレートを開く
テンプレートを開く

ステップ3:ウィジェットコードを追加する Internal Link

次に、FastCommentsのインストールに使用するコードをコピーします:

BigCommerceコメントコード
Copy Copy
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

次に、ウィジェットコードを Line 6 に貼り付けます。コードは \{{/partial}} の行の前に追加することが重要です。

6行目に貼り付け
6行目に貼り付け

最終的に以下のようになります:

コード追加後
コード追加後

これでファイルを保存できます:

保存
保存

...そしてエディタを終了します:

エディタを終了
エディタを終了

ステップ4:新しいテーマを有効化する Internal Link

最後のステップは、新しいテーマテンプレートを使用することです。

右上に Publish または Make Active Theme が表示されているはずです。それをクリックして変更を公開します:

変更の公開
変更の公開

これでサイトを確認できます!ブログ投稿にアクセスすると、下部にコメントボックスが表示されているはずです。

変更が反映された状態
変更が反映された状態

成功 Internal Link

よくできました!BigCommerce サイトにライブコメント機能を追加しました。

権限が拒否されるエラーが発生した場合、または FastComments をカスタマイズしたい場合は、続きをお読みください。

カスタマイズ Internal Link

FastComments はサイトに合わせてカスタマイズできるように設計されています。

カスタムスタイリングを追加したり、設定を微調整したりしたい場合は、カスタマイズのドキュメントを参照してください。

追加:ページビルダー用コードスニペット Internal Link

FastComments を BigCommerce のページビルダー経由で追加することは推奨されません。そうすると、コードを希望する各ページに手動で追加する必要があるためです。

ただし、これを行いたい場合は、次のコードスニペットを使用する必要があります。BigCommerce の特性上、他のチュートリアルのコードスニペットは機能しません:

BigCommerce ページビルダー用スニペット
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: "demo"
8 }];
9</script>
10