Google+APIを利用した「インタラクティブな投稿」ボタンをBloggerに設置する方法（※追記あり）

インタラクティブな投稿ボタン

Google+APIを利用した「インタラクティブな投稿」ボタンを設置しました。意外と苦労しましたので、メリットと設置までのおおまかな流れと、注意点についてまとめておきます。設置にあたっては +bouya Imamura さんと +Satoshi Yoshida さんに多大なご協力を頂きました。ありがとうございます。感謝、感謝。

そもそも「インタラクティブな投稿」とはなんぞや？

Google+APIを利用した「インタラクティブな投稿」というのは、このようなボタンが付いている投稿のことです。「Read more」以外にも、さまざまな表示を選択できます。

インタラクティブな投稿

さてこの「インタラクティブな投稿」にはどんなメリットがあるでしょうか？

  • 他の投稿とちょっと違うので目立ちやすい
  • 投稿の表示回数とクリック回数といった統計情報がわかる
  • ストリームへの滞留時間が長くなる（※観測による推測）

他の投稿とちょっと違うので目立ちやすい

インタラクティブな投稿に表示されるボタン

そもそも普通にURLを貼った投稿には表示されないものですから、他の投稿に比べれば多少目立ちます。まあこれは、「多少」です。

投稿の表示回数とクリック回数といった統計情報がわかる

これが面白い。ボクがこのブログにボタンを設置したのが5月4日。以来、ボク自身は5回このボタンを使ってGoogle+へ投稿しています。その「インタラクティブな投稿」がストリームで表示された回数と、リンクがクリックされた回数とクリック率が、ブラウザ、iOS、Androidそれぞれで把握できるようになっています。

インタラクティブな投稿の統計情報

設置から1週間しか経っていないのでまだデータが不十分のようですが、それでもなかなか興味深いデータが取得できています。ちなみにボクの投稿が表示される率は、ブラウザよりiOSの方が多いようです。この傾向は、フォロワーとその利用環境によって変わると思います。

［追記］

この記事を公開した翌日から、グラフが表示されるようになりました。

インタラクティブな投稿の統計情報グラフ

現時点で、公開されたインタラクティブな投稿10件に対し、閲覧数が9293、クリック数392、クリック率4.455という感じです。CTR4.5%って、結構いい数字のような気がする。

（※追記ここまで）

ストリームへの滞留時間が長くなる

Google+のストリームは完全な時系列順ではなく、Googleのアルゴリズムによってある程度重要度や関連度が高い投稿が上位に表示されるようになっています。そして、ボクの観測では「インタラクティブな投稿」は明らかにストリームへの滞留時間が長くなります。新しくGoogle+の画面を開いた時に、半日くらいはだいたい上位10件くらいに入ってる感じです。

Google AnalyticsによるGoogle+からの流入データ

Google Analyticsの参照元ソーシャル ネットワークでも、ボタン設置後はGoogle+からの流入がやや多くなっています。もっともこういうデータは、記事の内容にも依りますし、期間が短いのと元々の流入量がそれほど多くないので、単純に前後を比較するのは難しいのですが。

どうやって設置するの？

大雑把に流れを説明すると、以下の通りです。

  1. サイトのGoogle+ページを作成する
  2. BloggerとGoogle+ページを関連付けする
  3. Google APIコンソールでGoogle+APIのプロジェクトを作成する
  4. 設置するサイトのクライアントIDを作成する
  5. Google DevelopersのGoogle+ Platformでコードを取得する
  6. コードを個別記事に対し動的に対応できるよう書き換える
  7. BloggerのテンプレートからHTMLの編集でコードを貼り付ける
  8. CSSでボタンデザインを整える

Bloggerへ設置する際、特に注意すべきなのは6番目と7番目です。

1. サイトのGoogle+ページを作成する

Google+（パソコン版）の左メニュー［ページ］右上の［新しいページを作成］から、サイトのGoogle+ページを作成します。個人ブログであれば、カテゴリは［その他］でいいでしょう。

ページの名前とURLを入力すれば、作成完了です。せっかくなので、ついでにプロフィール画像やプロフィール情報を整えておきましょう。

2. BloggerとGoogle+ページを関連付けする

Blogger管理画面の［Google+］から、先ほど作成したGoogle+ページを関連付けします。関連付けをすると、BloggerのプロフィールはそのGoogle+ページのものになります。

BloggerのGoogle+設定

Google+ページと自分のウェブサイトのリンクは、通常はGoogleウェブマスターツールを使うか、<head>タグ内に<link href=”https://plus.google.com/{+PageId}” rel=”publisher” />といったコードを埋め込む必要がありますが、Bloggerの場合は簡単に関連付けできます。

Bloggerガジェット

ちなみに関連付けをすると、そのGoogle+ページの［Google+フォロワー］や［Google+バッジ］のガジェットが貼れるようになります。また、Google+のコメントをBloggerのデフォルトコメント機能の代わりに使用できるようになります。

3. Google APIコンソールでGoogle+APIのプロジェクトを作成する

4. 設置するサイトのクライアントIDを作成する

5. Google DevelopersのGoogle+ Platformでコードを取得する

6. コードを個別記事に対し動的に対応できるよう書き換える

3～6の手順は、 +bouya Imamura さんのエントリーが非常にわかりやすいので、そちらを参照して下さい。

基本はWordPressでの設置方法の解説ですが、Blogger用のコードも載っています。Blogger用のコードでポイントになるのは、以下の2点です。

  • 個別記事のURLを動的に入れるにはValue（値）を data:blog.url と指定する
  • data:blog.url を指定するKeyの前に expr: と記述しておく

この2つを押さえておけば、いろいろカスタマイズもできると思います。

［追記］

Google APIコンソールのAPI Accessを見たら、［Edit branding information］というボタンを発見しました。

Edit branding information

「これ何のアプリだっけ……？」というのがパッと見てわかるように、ちゃんと名前やアイコンは指定しておいた方がいいと思います。

アプリの管理画面

（※追記ここまで）

7. BloggerのテンプレートからHTMLの編集でコードを貼り付ける

ここでボクはトラップに引っかかりました。このコードは、Bloggerガジェットの［HTML/JavaScript］にコードを貼り付けても機能しません。Blogger管理画面の［テンプレート］から［HTMLの編集］でコードを貼り付ける必要があります。

記事のヘッダー部分であれば

<div class=’post-header-line-1′></div>

の中に。

記事のフッター部分であれば

<div class=’post-footer-line post-footer-line-1′></div>

<div class=’post-footer-line post-footer-line-2′></div>

<div class=’post-footer-line post-footer-line-3′></div>

のどれかの中へ貼るといいでしょう。ちなみに post-footer-line post-footer-line-1 は2ヶ所あり、それぞれパソコン版とモバイル版に対応しています。また、

<b:if cond=’data:blog.pageType == “item”‘></b:if>

で囲っておけば、トップページには表示されません。

8. CSSでボタンデザインを整える

これで設置されるのは<button>タグによるボタンなので、見た目があまり美しくありません。そこでボクは、CSS Button Generatorを使ってデザインを変更しました。Blogger管理画面の［テンプレート］［カスタマイズ］［上級者向け］の一番下にある［CSSを追加］から、カスタムCSSを追加できます。インタラクティブな投稿ボタンのコードは class=’g-interactivepost’ になっているので、.g-interactivepost{}で指定しましょう。

これで↓このようなボタンが設置できます。

タイトルとURLをコピーしました