Blogger ブログに従来のコメント欄と Google+ のコメント欄の両方を表示する方法

(cc) THOR

2013 年 4 月に、Blogger ブログに、通常のコメント欄と入れ替える形で Google+ のコメント欄が設置できるようになりました（参考）。複数のブログについたコメントや他人のブログにつけたコメントが Google+ で一元的に閲覧できるので非常に便利なんですが、その一方で通常のコメント欄と比べ不便なところもいくつか指摘されています。

Google+ ユーザーしかコメントできない。
通常のコメント欄なら Google ユーザー、OpenID ユーザーに加え、「匿名」も選べます。
公開範囲が分かりにくい。
Google+ のサークルが適用されるため、誰にどのコメントが見えているのか把握しにくいかと。
ブログのドメインを変えられない。
Google+ 上でのコメントは、リンクの URL で Blogger ブログと関連付けられているため、ドメインを変更してしまうと、ブログから以前のコメントが見れなくなってしまいます。
記事ごとのコメント表示・非表示、新規受け付けの可否設定ができない。
Blogger の投稿エディタのオプション指定が効きません。
コメントの「オーナー承認後公開」ができない。
ブログにコメントがつくというより、Google+ での言及をブログに表示できる、というのが本質なので、しょうがないといえばしょうがないんですが。
ブログについたコメント一覧が確認できない。
通常のコメントだと、ダッシュボードやコメントフィードで確認できますね。

参考：

The Real Blogger Status: Reverting Your Blog Back To Blogger Comments, From Google+ Comments

ということで、従来のコメント欄も Google+ のコメント欄も両方ブログに載せてしまおうと思ったわけです。参考にしたのはこちらのブログ。

Google+コメント機能をBlogger以外に設置する方法【非公式】 | アンギス

導入してみた様子が、次の画像です。

導入方法

１．Blogger の管理画面「Google+」から「このブログで Google+ のコメントを使う」のチェックを外します。元々 Blogger ブログを Google+ プロフィールと関連付けていない人は、そのままで。

２．Blogger 管理画面「テンプレート＞ HTML の編集」から

というコードを見つけます。「Ctrl + f」キーからエディタの検索機能を使うと便利です。

３．２のコードのすぐ後に

<div id='g-comments-container'>
<h4 id='g-comments-label'>Comments on Google+:</h4>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='600' expr:data-href='data:blog.canonicalUrl'/>
</div>

というコードを挿入して「テンプレートを保存」ボタンを押します。赤字部分は Google+ コメント欄の最大幅です。通常のコメント欄の幅に合わせて調整するのがいいと思います。

青字の部分は、Google+ コメント欄の上部に表示されるメッセージで、自由に書き換えることができます。閲覧者がどちらにコメントすればいいのか迷わないように、何か説明を書いてもいいかもしれませんね。

なお、<div id='backlinks-container'> は 2 箇所あるので、両方のコードの後に同じコードを貼り付けてください。

ということで、「Google+ のコメント欄を置きたいけど、前についたコメントも表示しときたいんだよな…」という人も、「Blogger アカウントと Google+ アカウントをまだ関連付けていないんだけど…」という人も、ぜひお試しください。

ちなみに

テンプレートによっては、Blogger のコメント欄が 425px 幅で固定になっているものがあります。これは、Blogger 公式の外部 CSS ファイルで指定されているもので、Blogger 管理画面「テンプレート＞ HTML の編集」から、テンプレートの CSS 部分

/* Comments
----------------------------------------------- */

のすぐ後にでも、

.comment-form{max-width:600px;}

と挿入することで、テキストエリアの幅の上書きが可能です。Google+ のコメント欄と幅を合わせたいというときに思い出してください。

スポンサードリンク：

お願い：

「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　