【非公式】Bloggerに導入された「Google+コメント」機能を実装してみました

2013.04.22

Google+

先日、Bloggerに「Google+コメント」を表示することができるようになりましたが、それをWordPressを使っているこのブログに実装してみました。

ただ、あくまでも非公式の方法なので、今後の仕様次第で表示できなくなる場合もありますから注意が必要です。

設置箇所は、記事末にあるFacebookコメントの下。つまり、記事ページの最下部ですね。

「Google+コメント」に入るのは、当該URLをコメント付きでシェアされたものや、さらにそれを共有したアクティビティといったもののようですね。

こうやって見ると、Facebookコメントよりもいいかもしれないなぁ。
Facebookコメントの場合、あくまでも記事ページでコメントしたものだけが表示される仕様ですから、ページ上でコメントするしないに関わらずリアクションが眺められるのはいいですね。

現時点で、WordPressを含むBlogger以外のブログシステム、ブログサービスへの実装については非公式ですが、正式にリリースされたらFacebookコメントを脅かしかねないやもしれません。

WordPressでの実装方法

実装方法については、上の記事に詳しく乗ってますが、一応コードは以下のとおり。
WordPress版ですが、他のブログシステム、ブログサービスでも、data-hrefあるいはhrefを、自分が使っているブログの記事URLを呼び出す独自タグにしてやれば問題なく利用可能です。

javascript

<script src="https://apis.google.com/js/plusone.js"></script>

このjavascriptのコードを<head>内にぶっ込むか、</body>直前にでも加えます。
と言っても、これを設置する以前からGoogle+の+1 Buttonなどを導入している場合は、このコードは必要ありません。

html

<div class="g-comments"
    data-href="<?php the_permalink(); ?>"
    data-width="610"
    data-first_party_property="BLOGGER"
    data-view_type="FILTERED_POSTMOD"></div>

こちらはhtml5版のコードですね。

<g:comments
    href="<?php the_permalink(); ?>"
    width="610"
    first_party_property="BLOGGER"
    view_type="FILTERED_POSTMOD">
</g:comments>

で、こちらはhtml5以外の場合に用います。

これで、実装は可能なんですが、今のところ正式なものではないため、今後公式にGoogle Developersで実装方法が掲載された場合は、そちらに差し替えたほうがいいですね。このコードだと表示しなくなったり動作しなくなったりする恐れがあるので。

また、注意点として、このコードを実装するとiframeの高さが600pxほど必ず入るようになっており、仮にコメントがなかったとしても、その分高さが取られるため、設置箇所によって次のセクションまでの空白が目立つかもしれません。

一応、CSSで高さを制御しようと思ったんですが、ちょっと見た目が微妙になって上手くいかなかったので、このへんはまた別途いじってみたいと思います。