Squarespace のコメント欄は Core プラン以上でしか動きません

できるかどうかを決めるのはプラン

Squarespace のプランは4つで、この記事で分かれる線は1つ目と2つ目の間にあります。Basic にもコード ブロックはあります。ただしそのブロックが受け取れるのは、プレーンテキスト、HTML、Markdown、CSS までです。<script> タグを入れても実行されません。サイト全体にコードを配るヘッダーとフッターの欄、つまりコード挿入も Basic にはありません。

Squarespace はこの話を2か所に書いています。料金比較表は、コード挿入と「コード ブロック (詳細)」を Basic では対象外、Core、Plus、Advanced では対象として並べます。ヘルプセンターも同じです。コード挿入は Core、Plus、Advanced と一部の旧支払いプランで使え、コード ブロックの中の JavaScript やインライン フレームは Core、Plus、Advanced に加えて販売を終えた Business、Commerce の各等級で使えると書かれています。なお日本語のヘルプセンターはプラン名をベーシック・コア・プラス・アドバンスと書きます。この記事は購入画面と同じ英字表記でそろえました。

Business、Commerce Basic、Commerce Advanced は、いまもそれらのヘルプ記事に名前が残っています。今は売られていない旧プランです。サイトがそのどれかに乗っているなら、カスタム コードはすでに使えて、この先の内容はそのまま当てはまります。

パネルを開ける前に、まずコメント欄を見る

パネルは2つ、役割はまるで別

Squarespace はサイト全体に配るコードとページの中に置くコードを別々の場所で管理していて、この設置は両方から1つずつ使います。ローダーはウィジェットが出るかもしれないページすべてにいてほしいので、コード挿入へ入れます。マウント要素はコメント欄が座る一点を示すものなので、ページ本文のコード ブロックへ入れます。

最初の失敗はたいてい、この2つを取り違えるところで起きます。サイト全体に配るフッターの欄にマウント用の div を入れると、全ページの下にコメント欄が1つずつ生えて、それが全部で同じ会話を使います。ついでに断っておくと、この記事のパネル名は日本語のヘルプセンターが実際に使っている表記に合わせました。管理画面の表示言語が英語なら、括弧の中の英語表記のほうが見えます。例外がひとつだけあって、Website と Website Tools は日本語のヘルプがパネルへ直接リンクしていて名前を書いていないため、英語のまま残しています。

パネルを1つずつ開けて設置する

1. squarespace.com の初期アドレスも1つのドメインとして数える

   Squarespace のサイトは作られた日に something.squarespace.com という形の初期アドレスをもらい、独自ドメインをつなぐまでそのアドレスで応答します。ですから体験版のサイトや、まだ本番のドメインを向けていない作り直しでは、アドレスバーに出ている住所が公開の日に使う住所と違います。BootSignal はコメント欄を読み込む前に location.hostname を site id に登録されたドメイン一覧と突き合わせるので、この2つは名前が2つあるサイト1件ではなく、ダッシュボード上の別々の2件になります。いま作業している住所を入れ、独自ドメインをつなぐ日にその住所を足し、初期アドレスで何も開かなくなってからそれを消せば済みます。ダッシュボードはドメインの横に site id を並べて見せます。この記事で BootSignal 側の値を書き込む場所は、その文字列ひとつだけです。

2. ローダーをコード挿入に貼る

   Squarespace の管理画面で Website、Website Tools と進み、「コード挿入」（Code Injection、サイト全体にコードを配る欄）を開きます。タグはフッターの欄に入れて保存します。Squarespace がこの欄の中身を、サイトの全ページで閉じ body タグの直前に差し込みます。ヘッダーの欄でも動きますが、フッターに置けばスクリプトが最初の描画の邪魔をしません。

   コードコピー

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ja" defer></script>

3. コメント欄を置きたい場所にコード ブロックを入れる

   対象のページかブログ記事を編集状態で開き、本文の下のセクションにカーソルを合わせて「ブロックを追加」か「+」を押し、ブロック メニューから「コード」を選びます。ブロックに出る鉛筆アイコンを押してブロック エディターを開き、テキスト フィールドにマウント要素を貼り付けます。page-key は、その記事だけに当てはまってこの先変わらない値に書き換えます。記事のスラッグが無難です。

   コードコピー

   <div data-bootsignal="comments" data-thread-id="page-key"></div>

4. 「ソースを表示」を切ってから適用し、保存する

   ブロック エディターには「ソースを表示」（Display Source）というトグルがあります。オンにするとこのマークアップを目に見える文字として描き、オフにすると実行します。ここではオフです。ブロックを適用（Apply）してから、ページを保存します。

5. シークレット ウィンドウで確かめる

   Squarespace のログイン セッションがない状態で公開アドレスを開きます。本当のことを教えてくれる画面はそれだけで、理由はこのすぐあとの2節にあります。

貼ったコードが文字で見えたら、それは「ソースを表示」

コメント欄があるはずの場所に山括弧の行がそのまま出ているなら、原因はこれです。例外なくこれです。コード ブロックは2つの仕事を兼ねています。マークアップを実行することもできれば、読者に見せるコード例として描くこともできて、「ソースを表示」がそのどちらかを決めます。オンのままにしておくと、Squarespace は <div data-bootsignal="comments"> を訪問者にきちんと印字してくれます。

このトグルはサイト設定ではなくブロック エディターの中にあるので、ブロックごとに別々です。3か月後に足すコード ブロックも自分のトグルを持って始まるため、同じかたちでまた引っかかります。確かめるのに2秒。画面の側から原因を探すと半日が飛びます。壊れているところがひとつもないからです。

編集画面は、うまくいったかを判定する場所ではない

Squarespace はログイン中のセッションと訪問者のセッションを別に扱っていて、カスタム コードがまさにその分かれ目です。ウィジェットが壊れたと結論づける前に、知っておくことが4つあります。

• ログイン中はスクリプトが動かないことがよくあります。Squarespace も淡々と書いています。セキュリティ対策として、訪問者には表示されるコードが、ログイン中の自分には表示されないことがあります。
• コード ブロックのエディターには「セーフ モードで表示」（Preview in Safe Mode）というボタンがあります。埋め込んだものだけを切り離して描いてくれるので、少なくともマークアップが無事かはここで確かめられます。
• カスタム コードが編集画面を巻き込むと、"We detected an error loading your site preview"（日本語の管理画面では「サイト プレビューの読み込み中にエラーが発生しました」）というメッセージと「プレビューでスクリプトを無効にする」ボタンが出ます。そのボタンを押すとログイン中はカスタム コードが描かれなくなり、訪問者には今までどおり見えます。Squarespace はプレビューでスクリプトを戻すことを勧めていません。サイトの編集を妨げることがあるからです。
• Squarespace のセッションがないシークレット ウィンドウで開いてみること。この確認だけが問いを終わらせます。

サブスクリプションは1つ、ブロックはあとでいくつでも

コメントだけを単体では売っていません。登録ドメイン1つにつき 月 $20 または年 $200、その1行がカタログ全体を覆います。今日の時点で有料ウィジェット38個、その隣の無料ブラウザ ツール33個、そして購読している間に新しく出るものまで入ります。この金額のどの項目もページビューやコメント数を数えないので、思いがけず広がった記事も、誰も読まなかった記事も同じ値段です。Squarespace のサイトをもう1つ持つならドメインがもう1つで、ドメインは同じダッシュボードから足します。

Squarespace の側から見ると、これは2つ目のウィジェットの値段がコード ブロック1つ、という話になります。ローダーはもうコード挿入に入っているので、同じ記事の下に評価・レビューを足す作業は、新しいブロックに div をひとつ書くだけになります。

この分野のウィジェットはむしろ逆をやるものが多いので、声に出して書いておきます。お客様の声ウォールは、評価・レビューのウィジェットが実際に受け取ったレビューだけで壁を埋めます。引用をこしらえる仕組みがそもそもありません。ソーシャルプルーフ通知はサイトにすでに溜まった実際の活動だけを流し直すので、オハイオの誰かがいま買いました、という類のポップアップを作り出すことはありません。

設置よりまだ選ぶ側に近いなら、ホスティング型のコメント システムは代替のまとめに価格つきの比較があります。

1か月後に足を引っ張るもの

• 記事1つに thread id 1つ。data-thread-id を共有するコード ブロック2つは、会話も共有します。記事のスラッグをそのまま使えば、次にサイトを開く人にも規則がすぐ見えます。
• 余白や幅のためにブロックの周りへ CSS を書くことになったら、コード挿入のヘッダーではなく CSSエディターに入れます。Squarespace は Ajax 読み込みのせいで挿入した CSS が効かなくなることがあると警告し、この場合は CSSエディターを使うよう案内しています。
• コード ブロック1つに入るのは 400 KB まで、文字数にすると約 300,000 文字です。1行のマウントがそこへ届くことはありませんが、あとでもっと重いものを貼るならそれが天井です。
• バージョン 7.0 のサイトだけの話です。インデックスの中に入っているページのコードは描かれないことがあります。Squarespace が案内する迂回路は、そのページをインデックスの外へ出し、ログアウトしてから確かめることです。
• カスタム コードは Squarespace のサポート範囲の外で、プラットフォームの更新がコードベースのカスタマイズを壊すことがあると彼ら自身が警告しています。テンプレートを変えたあとの確認は自分の受け持ちです。

作り直しのチェックリストに、習慣をひとつ入れておくと楽です。テンプレートやセクションに手を入れたあとは、記事をひとつシークレット ウィンドウで開いて、コメント欄がそのままあるかを見ます。レイアウトが変わると Squarespace はブロックを動かしますし、見えないセクションへ入ったコード ブロックは、コメントごと連れて行きます。