バックエンドなしで Webflow にコメント欄を足す

Webflow のコメント機能は、読者に見せるものではない

この検索語の結果が混ざるのは、Webflow にもコメントという機能があるからです。置かれている場所は Designer の中で、使うのはサイトを作る側の人たちです。デザイナーがセクションに指摘を残し、クライアントが返事を書き、片付いたらその指摘を閉じます。公開されたページへは何も出ていかないので、記事を読んでいる訪問者の画面には一度も現れません。

訪問者が残す公開のコメントは性質の違う問題で、Webflow が引き受けていない部分が3つあります。誰が書いたのかを確かめること、書かれたものを残しておくこと、ひどいものを消せること。CMS が抱えるのは自分で書いた記事で、Forms が集めるのは自分しか読まない送信内容です。どちらも会話にはなりません。

まず、実物のほうを読んでみる

最初に確かめるのは、いま契約しているプラン

2つの部品は、置き場所が別々

ローダーとマウント要素は、入る画面が違います。最初の失敗はたいてい、この2つを同じところへ押し込むことで起きます。ローダーはサイト全体に1回でよいので、Site settings, Custom code tab, Footer code、つまりサイト設定のカスタムコードのタブにある下側の欄へ入れます。Webflow はこの欄の中身を、公開するどのページでも </body> の直前に出力します。スクリプトタグは読み込みを遅らせないよう Head code よりこちらへ置くことを勧めていて、それでも head に入る外部スクリプトには async か defer を付けるよう案内しています。下のローダーが defer を持っているのはそのためです。マウント要素のほうは置かれた位置そのものが意味なので、Code Embed 要素に入れて、レイアウトの中でコメントを出したい地点へ正確に落とします。

1. Webflow が配るホスト名を、2つとも登録する

   Webflow のプロジェクトは、作られた日に .webflow.io のアドレスをひとつ受け取ります。あとからカスタムドメインを繋いでも、そのアドレスが引退するわけではありません。Code Embed のヘルプ記事も、テストや意見集めに使うステージングのドメインとしてそのアドレスを指していますし、yourdomain.com が立ち上がったあとも公開中のサイトを配り続けます。つまり動かしているホスト名は2つあり、ウィジェットはダッシュボードに並んだホスト名にしか返事をしません。your-project.webflow.io は yourdomain.com のサブドメインではないので、本番のドメインを登録してもステージングは覆われません。2つを同じ site id の下へ入れてください。次の手順でローダーが運ぶ値が、その site id です。ホスト名ひとつがプランのドメイン枠をひとつ使うので、カスタムドメインをまだ繋いでいないなら、先にステージングのアドレスを登録し、本番のアドレスは立ち上げる日に追加すれば十分です。

2. ローダーはサイト全体に1回だけ貼る

   Site settings を開いて Custom code タブへ移り、Footer code の欄に貼って Save changes を押します。Webflow はこの欄を公開するすべてのページへ出力し、まだ作っていないページにも一緒に載せます。だからこのタグは一度貼れば、そのあとは触りません。欄ひとつに 50,000 文字まで入りますが、ローダーのタグがその上限へ近づくことはありません。

   コードコピー

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

3. Collection page のテンプレートに Code Embed をひとつ足す

   Add パネルを開き、Collection page のテンプレートで本文の下へ Code Embed 要素を足して、マウント用の要素を貼り、保存してモーダルを閉じます。ここに入れるものはほかにありません。さきほど入れたローダーがこの要素を見つけて、中を埋めます。

   コードコピー

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

4. ステージングへ publish して、そこで会話を読む

   Webflow はカスタムコードの効果が preview モードで見えると案内していて、タグ自体についてはそのとおりです。ただしウィジェットの側に条件がもうひとつあります。ページのホスト名を登録済みのドメインと突き合わせるのですが、Designer の preview のアドレスは自分のものではなく Webflow のものです。.webflow.io のアドレスへ publish して、ふつうのブラウザのタブで開いてください。キャンバスの上では、スクリプトタグの入った Code Embed が四角い枠に見えます。そう見えるのが正常で、壊れた合図ではありません。

テンプレートは1枚、会話は記事ごと

data-thread-id="page-key" を書いたまま置くと、サイトのどの記事も同じ会話を共有します。それを望む場面はまずありません。この属性はただのキーなので、記事ごとに違う値が入るようにしておけば、分かれるほうはひとりでに起きます。

Collection page の Code Embed の編集画面では、コードの中に CMS のフィールドを差し込めます。data-thread-id の引用符の間へカーソルを置いて、記事の Slug フィールドを入れてください。Webflow が publish のときに本物のスラッグへ置き換えるので、テンプレートを1回直せば、そのコレクションの記事はどれも自分の会話を持ちます。

ウィジェットに付いてくるもの

• 返信が階段のようにぶら下がるので、話がばらばらのメモの山になりません。
• Google ログインは BootSignal のすべてのウィジェットで共通なので、評価を付けるためにログインした読者は、コメントを書くときにはもうログイン済みです。
• 新しく作って覚えるパスワードはありません。ログインに関わるのは Google のアカウントだけです。
• 保存はドメインの許可リストの向こう側にあります。ウィジェットは登録したドメインでだけ返事をし、どこかへ複製されたページでは動きません。
• 管理はダッシュボードからです。書き込みを消すのも、書いた人を止めるのも、そこで済みます。
• 画面の文言は韓国語・英語・日本語で、ローダーの data-lang で切り替えます。

Webflow のサイトにコメントが載る道は3本

何もないところから始めるのではなく、いま動いているコメントシステムから移ってくる場合は、機能の一覧より移行のときに出てくる問いのほうが大きくなります。Disqus の代替をまとめた記事が、その問いを順に見ています。

Webflow の請求と並べたときの金額

Webflow の Site plan はサイト単位で請求されます。BootSignal は登録ドメインごとに月 $20 または年 $200で、ウィジェットは全部込み、トラフィックには値を付けません。記事が伸びても請求書は動きませんし、同じ Webflow のプロジェクトへあとからカウントダウンや読書進捗のバーを足しても動きません。動かすのはホスト名のほうです。ステージングと本番は登録ドメイン2件で、ドメインはダッシュボードから1件ずつ増やします。

同じスクリプトタグで動くものが、ほかにもある

カタログの残りも、いま貼ったのと同じスクリプトタグに乗っています。Webflow のブログ記事に置く値打ちのあるものを、2つ挙げます。

出てこないときは、ホスト名と2つの Save

1. アドレスバーに出ている住所が、登録したホスト名のどれかであること。your-project.webflow.io と yourdomain.com は別々の項目で、Designer の preview の URL はそのどちらでもありません。preview では空で、公開したページには出るなら、正しく動いています。
2. Designer のキャンバスに出る四角い枠は、スクリプトタグの入った Code Embed ならどれでも正常です。設置できたかどうかは、公開された URL のほうで判断します。
3. 公開したページでブラウザのコンソールを開きます。登録されていないホスト名なら、黙って失敗する代わりにそこへ理由が出ます。人が忘れるのは、たいていステージングのほうです。
4. ローダーの site id が、ダッシュボードにある値と同じか見ます。コピーと貼り付けの途中で紛れ込んだ打ち間違いまで見ます。
5. マークアップが rich text のブロックではなく Code Embed に入っているか見ます。rich text に入れると、タグは動かずに文字として出ます。
6. Site settings を保存したか見ます。ローダーは埋め込みとは別の画面にあり、片方を保存しても、もう片方を保存したことにはなりません。