Add Comments to Shopify Sites

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

以下の手順は Shopify 上に構築されたブログ向けですが、埋め込みコードは他のテーマファイルを編集して任意のページに手動で追加することもできます。FastComments サポートでも支援を行っています。

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

ステップ 1: 既存のコメントをインポート

FastCommentsはブログ上でツールを実行して既存のコメントをインポートできます。ただし、これはステップ2でコメントを無効にする前に行う必要があります。
そうしないと、ツール実行時にコメントは利用できません。

この手順については、サポートチケットを作成してください。通常、インポート
は1日未満で完了します。

既存のコメントを保持する必要がない場合は、ステップ2に進んでください。

ステップ 2: デフォルトのコメント機能を無効化

FastComments を Shopify で使用する最初のステップは、Shopify のコメントシステムを無効にすることです。

注意 FastComments サポートは既存のコメントスレッドの移行を支援できます。

Shopify のコメントシステムを置き換えるために、ストアのダッシュボードに移動して左下の Blog posts をクリックします:

ブログ投稿管理を開く

次に右上の Manage blogs をクリックします:

ブログを管理

管理したいブログをクリックします。Comments are disabled と表示されている場合は、この手順はスキップして Step Two に進めます。

ブログを管理

そうでない場合は、ブログを選択し、右側のパネルで Comments are disabled が選択されていることを確認します:

コメントを無効にする

保存をクリックします。

ステップ 3: ブログのテーマテンプレートを開く

これからストアのテーマを編集して FastComments を追加します。

In the left panel, open Themes:

Themes を開く

Under Current theme, select Actions and then Edit code:

コードを編集

This will open up a code editor, with a file browser on the left and the code on the right.

All we need to do is copy a small piece of code that adds FastComments and paste it on the right line in the right file.

In the file browser on the left, scroll down and click Sections:

Sections を選択

Now we're going to scroll down and select main-article.liquid:

main-article を選択

This will open the theme template used to render a single blog article.

You should now see something similar to the following, with main-article.liquid selected at the top:

main-article が開かれている

ステップ 4: FastComments.com のコードを追加

次に、100 行までスクロールします:

100行までスクロール

Now copy the following code snippet, which is designed specifically for Shopify - do not use code snippets from other tutorials:

Shopify 用 FastComments スニペット

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" class="page-width page-width--narrow"></div>
<script>
    FastCommentsUI(document.getElementById('fastcomments-widget'), {
        tenantId: "demo",
        urlId: window.location.pathname
    });
</script>