>--> Blogger ブログに従来のコメント欄と Google+ のコメント欄の両方を表示する方法 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

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

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

Comments (cc) THOR

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

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

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



導入方法

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

2.Blogger 管理画面「テンプレート > HTML の編集」から

<div id='backlinks-container'>
  <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
    <b:if cond='data:post.showBacklinks'>
    <b:include data='post' name='backlinks'/>
    </b:if>
  </div>
</div>

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

3.2のコードのすぐ後に

<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+ のコメント欄と幅を合わせたいというときに思い出してください。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:23

  1. クリボウさん、こんにちは。
    さっそく使わせていただきました。

    それでなんですが…従来のコメント欄にコメントがある場合に、設置したGoogle+コメントが消えてしまいました。ぼくのテンプレートの問題なのかもしれませんが、原因がつかめずにいます。

    お手数かと思いますが、なにか解決のヒントをばいただけたらと思います。

    ReplyDelete
    Replies
    1. 2 箇所ある backlinks-container のコード、両方の後に、手順 3 で示したコードを入れないといけないみたいですね。記事本文で「最初の方です」としていたのを「両方」に改めました。コメントありがとうございます。

      Delete
    2. クリボウさん、ありがとうございます!

      Delete
  2. クリボウさん、いつも参考にさせていただいております。

    今回、私のブログで、G+コメントを表示するように変更しましたが、コメント行が固定されていて、コメント数が多いと下のコメント部分が表示されない状況が出ております。マウスでも矢印キーでも、表示できないため、何か良い方法がないか探しておりまーす。

    ReplyDelete
  3. Google+のコメント欄、デザインもシンプルで良いのに、Googleアカウントを持っていないと使用できないというのはとても残念ですね。。。

    ReplyDelete
  4. Judi Gratis via Bandar QQ Kyu-Kyu Yuzhno-Sakhalinsk Region Capital Situs www.pokerrusia.net Melalui BPD Kalsel Indonesia Kode Bank 122.

    ReplyDelete
  5. I find reading this article a joy. It is extremely helpful and interesting and very much looking forward to reading more of your work.
    Pinoy Tv Replay
    Pinoy Tv Show

    ReplyDelete
  6. hi, thank for the great information. فارکس

    ReplyDelete
  7. تقدم شركة ماسترتك باقة متميزة من اسعار ماكينة تعبئة وتغليف حيث انك ستجد افضل ماكينات التعبئة والتغليف المصنعه بجودة ودقة عالية في التصنيع باشراف كبار مهندسي ومختصين صناعة ماكينات التعبئة والتغليف، مع ضمان الصيانة من الشركة لضمان لعملائنا عمل المكينة بافضل جودة وانتاجية.

    ReplyDelete
  8. I find reading this article a joy. It is extremely helpful and interesting and very much looking forward to reading more of your work. دانلود آهنگ جدید سینا بطحایی

    ReplyDelete
  9. The content was useful and complete
    Of course, it could be the whole semester
    thanks anyway

    Alireza Rahimpoor Ghadir

    Mostafa Ebrahimi Arosak

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.