やってみた! Google+インタラクティブ投稿ボタンの実装アレコレ

タイトルそのまんまなんですが。

このたび、Google+ APIを使ってGoogle+にインタラクティブ投稿させるボタンを実装してみました。

今回はその実装方法についてまとめてみましたよ。

インタラクティブ投稿って?

正直、あんまりきちっと理解が及んでるわけではないんですが、通常Google+へシェアを行う場合、対象サイト(ページ)に設置された+1ボタンをクリックして共有するか、あるいはURLをGoogle+に投稿するという方法があります。

インタラクティブ投稿というのは、これらとは扱われ方が違うとされています。

+1ボタンを使った通常の投稿

こちらは+1ボタンを使って投稿した場合ですね。見慣れた感じ。

インタラクティブ投稿

で、こちらがインタラクティブ投稿を用いた場合。大して変化がないように見えますね。
でも、大きな変化として、まず「Review」ボタンが追加されています。
また、名前・投稿時間が並ぶ右に表示されるテキストが異なってます。

これだけだと+1ボタンをクリックして共有する流れでもいいんじゃね? っていう気がするんですが、インタラクティブ投稿はGoogle+ページと連携させることで、投稿された回数や閲覧された回数、クリック数といったものを解析することができるようになるんですね。まぁ、Facebook Insightsと比較するとわずかなものではありますが、運用視点で見ればありがたいことです。

どんな感じに動くのか?

インタラクティブ投稿の遷移

現在、インタラクティブ投稿するボタンを記事下に設置しています。

ちなみに、その右側には以前実装方法を解説したFacebookのFeed Dialogを使ったシェアボタンを設置しました。これについては以下の記事からどうぞ。

設置したボタンをクリックすると、モーダルウィンドウで投稿画面が表示されます。

Share interactive post 05

実際には、このあいだにアプリケーションの認証許可画面があったりするんですが割愛。

まぁ、このインタラクティブ投稿を実装するのに、Google+アプリとして登録しなければならないので、初めてこのボタンを使って投稿するときだけ認証してもらわないといけないんですね。このへんはFacebookも似たような感じだったはず。だったよな・・・。

インタラクティブ投稿ボタンの実装

ここからは、実装の方法について説明していきますが、ちょーっとばかりややこしいんですよね・・・。

一応、Google+のSharing interactive postsですべて解説されているので、ざっくりと流れを書いていきます。

1) APIコンソールから「Client ID」を取得する

まずはGoogle+ APIをONにする必要があります。
Google APIコンソール」にアクセスし、プロジェクトを作成してから、Google+ APIのスイッチをONにしてください。

次に、OAuth 2.0を利用するための「Client ID」を作成していきます。

Google API Access

左メニューから「API Access」にアクセスしたら、「Create an OAuth 2.0 client ID…」をクリックします。

Create Client ID

クリックすると、このように「Client ID」作成のモーダルウィンドウが表示されるので、上から順に埋めて行きましょう。

Product nameには、ブログ名だったりサイト名なんかを入れておくといいですね。

Create Client ID

次の画面で、「Web application」を選択した状態で、「Your site of hosename」を入力します。これは、どこのサイトでこのCliend IDを使用するのかが問われていますから、ブログのドメインを入れてください。

「Redirect URI」は自動的に入力されるので、特にいじる必要はありません。

Client ID

これで「Client ID」を作成し終わりました。次の段階に進むために、「Client ID」を控えておきましょう。

2) javascriptを加える

続いて、インタラクティブ投稿を動作させるのに必要なjavascriptを</body>タグ直前に加えます。

<script type="text/javascript">
  (function() {
   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/client:plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>

このコードですが、おそらく+1ボタンを実装していれば、そのときに入れているはずなので、もし入っていればスキップしてください。

3) ボタンを表示させるタグを加える

そろそろラストが見えてきました。
インタラクティブ投稿を行うためのボタンを設置します。

以下のコードをボタンを設置したい場所に追加しましょう。

<button type="button" id="gplus_button"
class="g-interactivepost"
data-contenturl="<?php the_permalink(); ?>"
data-clientid="Client ID"
data-cookiepolicy="single_host_origin"
data-calltoactionlabel="READ_MORE"
data-calltoactionurl="<?php the_permalink(); ?>"
data-calltoactiondeeplinkid="/pages/create">
Google+にこの記事をシェアする
</button>

ここで、先ほど控えておいた「Client ID」の出番です。
data-clientidにClient IDを入れればOKですよ。

4) CSSでボタンを装飾

とりあえず 3) まで進めれば、ボタンの設置自体は完了です。
あとは、ボタンそのものをサイトのデザインに合わせてCSSで装飾してあげればいいですね。お好みで適宜どうぞ。

2013年のトレンドとなっているFlat UIなデザインにしてもいいかもしれません。

設置して何が変わるか?

うーーん、何がどのように変わるかというのは、なんとも言えません。
インタラクティブ投稿されることで、その投稿にメリットが生じるかどうかもわかりませんしねぇ。

ただ、上述したとおりGoogle+ページと連携させることで可能な解析があるので、これだけのために実装してみてもいいんじゃね? っていうのが個人的な見解です。

解析周りについては、ちょっと今回の記事が長くなりすぎたので、別の記事でまた方法を紹介しますね。