サイドバーで終わらせない Blogger のコメント欄

Blogger にすでにあるコメント欄、何を置き換えるのか

Blogger のテーマには最初からコメント領域が入っていて、それを描いているのは記事を描くのと同じ Blog ウィジェットです。レイアウト用のデータタグの一覧を見ると、allowComments と numComments、addCommentUrl が記事のタイトルや本文のタグと並んでいます。標準のコメント欄が後から乗せた機能ではなく、テーマの一部だということです。見た目を整えるだけのつもりでも、結局はテンプレートのコードを開くことになります。

置き換える理由はだいたい三つです。複数のサイトのコメントを1か所で見たいとき、テーマが書かれた年代がそのまま出ているコメント欄を外したいとき、ブログとほかの媒体でコメントの見た目をそろえたいときです。移行は期待しないほうがいいです。Blogger のフォームから投稿されたコメントは Blogger に残り、新しいウィジェットはどの記事でも空から始まります。

一つだけ有利に働くことがあります。BootSignal のコメントは訪問者に Google ログインを求めますが、Google が運営するブログサービスに来た読者は、すでにログインしたまま到着していることが多いのです。

テーマエディタを開く前に、コメント欄そのものを見る

入り口は三つ、それぞれの代償

Blogger には HTML を貼れる場所が三つあり、そのうち記事本文の下にコメント欄を置けるのは一つだけです。クリックを始める前に、自分がほしいのはどの行なのかを決めておいてください。

この三つはどれも、プランを上げないと開かない機能ではありません。レイアウトのガジェット追加も、テーマの HTML を編集も、テーマのバックアップも、ヘルプに有料の条件なしで書かれています。Google は Blogger の料金ページを別に出していないので、これは引用できる約束ではなく、止めるものがないという程度に読んでください。blogger.com でお金の話が出てくるのは、blogspot.com のアドレスの代わりにカスタム ドメインを買うところだけです。お金を払う側は、この下に書いた BootSignal のほうです。

A 案: ガジェットでサイドバーに置く

1. blogspot のアドレス、またはそれを置き換えたドメインを登録する

   Blogger のブログは作られた日から yourname.blogspot.com にいて、設定 > 公開の カスタム ドメインで自分のドメインを付けない限り、そこに居続けます。ドメインを付けると、blogspot のアドレスはブログを直接返す代わりに、そのドメインへ転送します。その画面に Blogger が書いているとおり、転送が実際に効くまでには時間がかかります。ですから BootSignal のサイト設定を開いて、公開済みの記事を開いたときにアドレスバーに出るホスト名を入れてください。移したばかりで古いリンクがまだ blogspot のアドレスに来るなら、そちらも一緒に入れます。国別のつづりを別に登録する必要はありません。yourname.blogspot.co.uk のようなアドレスは .com へリダイレクトするので、どの国の読者も最後は登録したホスト名に着きます。登録すると site id が出て、Blogger に入れる値はその一つだけです。ウィジェットは location.hostname を登録の一覧と照合し、一覧にない場所では何も描きません。

2. HTML/JavaScript ガジェットを追加する

   Blogger にログインし、更新するブログを選びます。左側のメニューで レイアウトをクリックし、変更したい領域で ガジェットを追加をクリックします。表示されたウィンドウで HTML/JavaScript を選び、追加アイコンをクリックします。このガジェットにあるのは、タイトルと内容の2つの欄だけです。コメント欄の上に見出しを付けるつもりがなければタイトルは空のままにして、下の2行を内容の欄に貼り、左下の 保存をクリックします。

   コードコピー

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

3. 公開中のブログを開いて自分の目で見る

   ガジェットは、自分のレイアウト領域がある場所に描かれます。サイドバーに入れればコメント欄もサイドバーに、しかも全ページに出ます。そして記事ごとに1つではなく、ブログ全体で会話が1つです。貼り付けた data-thread-id が固定のキー1つだからです。この道の正直な限界がそこにあります。ゲストブックのようなコメント欄には合いますが、読者が「この記事にコメントする」と言うときに思い浮かべるものとは違います。

B 案: すべての記事の下に本物のコメント欄

1. テーマエディタを開く

   Blogger にログインして更新するブログを選び、左側のメニューで テーマをクリックします。マイテーマのところでその他アイコンを押し、HTML を編集を選びます。これでテキストボックス1つの中に、テンプレート全体が入っています。先にバックアップをダウンロードした理由が、この画面です。

2. Blog ウィジェットと本文のタグを探す

   type='Blog' の b:widget タグを探します。慣例では id='Blog1' です。Blogger のウィジェットには id='main' の includable が必ず一つあり、公式テーマは記事のマークアップを二つ目の includable（多くは id='post'）に切り出して、b:include で呼び込みます。その連鎖を追う必要はありません。ファイルの中で <data:post.body/> を検索してください。ヘルプに記事のコンテンツと書かれているタグで、それが基準点になります。

3. 本文タグのすぐ後ろにマウントを貼る

   b:if に挟まれたものは、個別の記事ページでだけ描かれます。data:blog.pageType が item・archive・index のいずれかだと、ヘルプに書かれているからです。Blogger は属性の引用符を XML エスケープして書くので、条件が "item" に見えますが、これは回避策ではなく Blogger 自身の例です。expr: の接頭辞は、データタグを文字として出す代わりに属性値へ入れる書き方で、data:post.id が記事ごとに違うスレッドキーを与えます。data:post.url でも動きますが、代償が一つ付きます。後からパーマリンクを変えると、会話は古いキーの下に残ります。

   コードコピー

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div data-bootsignal='comments' expr:data-thread-id='data:post.id'></div>
   </b:if>

4. ローダーはテンプレートの終わり近くに一度だけ

   ローダーは全ページで動く場所ならどこでもよく、同じファイルの </body> の直前が、いちばん驚きの少ない場所です。来年マウントを5つ増やしても、テンプレートの中のスクリプトタグはこれ一つのままです。ファイルは XML の形なので、defer には値を明示し、開いたタグはすべて閉じます。

   コードコピー

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

5. 保存して、公開済みの記事で確かめる

   保存をクリックし、公開中のブログで実際の記事を開いて、本文の下までスクロールします。テーマのプレビューで判断しないでください。あの画面は Blogger が自分のエディタの中で描いたもので、読者が受け取るページではありませんし、サードパーティのスクリプトがそこでどう動くかは、ヘルプに書かれていません。

Blogger 標準のコメントフォームを止める

両方を動かしたままにすると、記事の終わりごとにコメント欄が2つ並びます。読者はどちらかを適当に選び、会話は割れ、返事は2か所ですることになります。新しいウィジェットを出す前に、どちらを残すか決めてください。

スイッチは2つあります。ブログ全体のものは Blogger の設定の画面で、コメント関連の項目がまとまっているところにあります。ヘルプの投稿の記事はそのラベルを書いていないので、この記事を含めてどこかから写したラベルより、いま自分の画面に出ている言葉を信じてください。確実なのはテーマ側で、しかもそのファイルはもう開いています。Blog ウィジェットの中で標準のコメント領域は b:include で呼ばれているので、その include を絶対に真にならない b:if で包むか、行ごと消せば、フォームはページから外れます。

記事単位では、テーマはたいてい data:post.allowComments を見て標準のフォームを出すかどうかを決めます。だから1件の記事でコメントをオフにすると、その記事でだけフォームが消えます。どちらのスイッチを使っても、外すその領域は、これまで自分のコメントを描いてきた領域です。コメントは Blogger に保存されたまま残り、ページに出なくなるだけです。

Blogger の設置が実際に狂う場所

混合コンテンツ、Google が失敗と書いているもの

言い方は Google のものです。ページが最初の HTML を HTTPS で安全に受け取り、後から続くコンテンツを安全でない HTTP で読み込むときに混合コンテンツのエラーが起きる、と書かれていて、その結果を "will degrade both HTTPS security and the user experience of your blog." と表現します。HTTPS のセキュリティとブログの使い勝手を、どちらも損なうという意味です。処方は半分ずつ切り分けることです。Google 製ではないガジェットを外してブログを確認し、犯人が自分から名乗るまで一つずつ戻します。BootSignal のローダーと、それが取りに行くものはすべて HTTPS だけなので、ブログがすでにこの警告を出しているなら、先にそちらを片付けてください。そうしないと、新しく貼ったウィジェットのせいにして午後をつぶすことになります。

保存できない保存

Blogger のテーマは、独自の XML 風タグ言語です。b:section、b:widget、b:includable、b:include、b:if、b:loop に、XML エスケープされた属性値が付きます。実務的には、貼り付けたスクリプトが < や &、&& を生のまま持っていると、ファイルが保存できなくなることがある、という話です。ヘルプはこの失敗も CDATA の要求も書いていないので、規則ではなく容疑者として扱ってください。保存を断られて、エディタが貼った場所の近くを指しているなら、まずその文字を見ます。この記事の2つのスニペットに、そういう文字はありません。

ウィジェットが照合するホスト名

マウントは描かれるのにコメントが読み込まれない、あるいはログインが弾かれるときは、まずドメインを見ます。ウィジェットは自分の site id に登録されたホスト名でだけ応答し、Google ログインはページのオリジンを確認するので、yourname.blogspot.com と yourname.com は名前が2つある1つのブログではなく、登録が2件です。スマートフォンでも確かめてください。b:widget には pageType の隣に mobile という属性があり、テーマがデスクトップではウィジェットを出して、小さい画面では落とすことがあります。

記事が跳ねても請求書が動かない理由

BootSignal は登録ドメイン単位で 月 $20 または年 $200、すべてのウィジェット込みです。来年出るウィジェットも入りますし、価格にページビューやコメント数へ連動する項目はありません。この事実は、ほかのどこよりも Blogger で大きく効きます。どこかで拾われた blogspot の記事が、1日に数十人が読む記事から1週間だけ数万人が読む記事に跳ねることがあり、トラフィックで値を付けるコメントツールは、よりによってその週に高くなります。別のアドレスを使う2つ目のブログは登録がもう1件必要で、ダッシュボードから追加します。

カタログには有料ウィジェットが38個、無料のブラウザツールが33個あって、どちらがどちらかは料金ページに載せています。ほかのホスティング型のコメントサービスと値段を並べた比較は比較のセクションにあります。その数字は動きますし、古い数字は無いより悪いからです。

テーマファイルを開いたついでに、もう一行

いま貼ったローダーは、ほかの BootSignal ウィジェットも同じように動かします。だから2つ目のウィジェットは div 一つで終わります。Blogger の記事でいちばん自然な相棒は閲覧数で、スレッドキーを同じ書き方で受け取るので、記事のキーをそのまま分け合えます。

<div data-bootsignal='viewcount' expr:data-thread-id='data:post.id'></div>

エディタを閉じる前に、自分の修正が入ったテーマのバックアップをもう一度ダウンロードして、2つのスニペットと site id を、ブログのメモと同じ場所に置くテキストファイルに書いておいてください。次にテーマを変えると Blogger が HTML を入れ替えて、マウントも2つとも一緒に消えます。そのファイルがあれば戻すのに2分で済み、無ければこの記事をもう一度読む夜になります。