少し前ですが、Google+のAPIを利用して「インタラクティブな投稿」ができるようになりましたね・・・。最近、私は「インタラクティブな投稿」用のボタンをこのブログに設置して、新しい記事を書くと、Google+のストリーム上に投稿（共有）しています。

ところで「インタラクティブな投稿」とは、何か

「インタラクティブな投稿」は、通常の「+1」ボタンや共有ボタンを使った投稿（共有）とは扱われ方が全然違っていまして、別物なんですね。

こんなイメージ

・・・もっと具体的に書きます。例えば見た目がちょっと違います。これは下の図を見てもらえた方が手っ取り早くわかります。

このブログに設置している+1ボタンから投稿。これが通常

これが、APIを使った「インタラクティブな投稿」です。見た目がちょっとちがいますね

一見、「なんだ、そんなくらいじゃないの」と思われるかもしれないですが、この「インタラクティブな投稿」とGoogle+ページを連携すると、ちょっとした解析ができたりします。連携方法と解析についてはこちらに少し書きました。というわけで今回は、まず「インタラクティブな投稿」をするための投稿用ボタンを設置する方法を書きました。

長い前置きはここまで、ここからが本題です。

もし機会がありましたら、ご覧くださいませ。

まず、ボタンの設置方法はGoogle+の公式ページに書いてあります

Google+のSharing interactive postsページに「インタラクティブな投稿」について、すべて方法が書いてあります。今回はPCサイト用のボタンの設置方法をご紹介しますね。（Android、iOSそれぞれの設置方法も掲載されています。）ただ、書いてあるんですが、英文ですね。あと、そこそこ細かく書いてあります。細かすぎるくらいなので、初めて挑戦するにはちょっとハードルが高い気がします。ですので、いろいろ端折って書きました。

１．APIコンソールで「Client ID」を控えておく

前提として、GoogleのAPIコンソール画面でプロジェクトなどを作成しておきます。ここで、下の画像にある「Client ID」を控えます。あとで使います。

「Client ID」をメモします（※これ人によって違います）

まだAPIコンソールを使ったことがない方は、まずはプロジェクトの作成からスタートすると思います。「5分でわかるGoogle+APIで紹介されている手順」が、とてもわかりやすいです。頑張ってプロジェクトを作成しましょう。あと、こちらでも書きました。何とかたどり着きましょう・・・。

２．コードをサイトに貼り付けます

「Client ID」をメモったら、次は下のコードをお持ちのホームページやブログなどに入れましょう。そのままコピー＆貼り付けでOKです。</body>タグの直前に入れます。コードはSharing interactive postsページの「2」に掲載されているコードそのままです。

<!-- Place this asynchronous JavaScript just before your </body> tag -->
<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>

３．ボタン表示用のコードをサイトに貼り付けます

それでは次は、ボタンを設置します。下のコードをホームページやブログで表示したい箇所に貼り付けます。コードはSharing interactive postsページの「4」に掲載されているコードを、自分のブログ用にカスタマイズしています。

<button id="gplus_button"
 class="g-interactivepost"
 data-contenturl="<?php the_permalink(); ?>"
 data-clientid="847853708202.apps.googleusercontent.com"
 data-cookiepolicy="single_host_origin"
 data-prefilltext="興味がありましたら、ご覧ください＞＜"
 data-calltoactionlabel="REVIEW"
 data-calltoactionurl="<?php the_permalink(); ?>?action=gplus_article"
 data-calltoactiondeeplinkid="/pages/create">
 このボタンで、Google+に今見ている記事を投稿できます
</button>

カスタマイズした箇所を少しだけ解説しますね・・・

data-contenturl

投稿のテキストURLの部分です。私の例では、WordPressの個別記事のURLを動的に入れるようにしています。この部分は、ご使用の環境に合わせて適宜解釈ください。

bloggerでやるにはどうすればいい？

ということで、よっしーさんに教えていただきました。最近ブログも書き始めている・・・何かの前兆かもしれない。

【HTML版】

<button
 class="g-interactivepost"
 expr:data-contenturl='data:blog.url'
 data-clientid="xxxx.apps.googleusercontent.com"
 data-cookiepolicy="single_host_origin"
 data-prefilltext=""
 data-calltoactionlabel="READ_MORE"
 expr:data-calltoactionurl='data:blog.url'
 data-calltoactiondeeplinkid="/pages/create">
 この記事を Google+ へ投稿する
</button>

【Javascript版】

<div id="sharePost"></div>
<script type="text/javascript">
 var options = {
 contenturl: '<data:post.url/>',
 clientid: 'xxxx.apps.googleusercontent.com',
 cookiepolicy: 'none',
 prefilltext: 'Create your Google+ Page too!',
 calltoactionlabel: 'READ_MORE',
 calltoactionurl: '<data:post.url/>'
 };
 // Call the render method when appropriate within your app to display
 // the button.
 gapi.interactivepost.render('sharePost', options);
</script>
<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>

data-clientid

先ほどメモった「Client ID」を下のように入れます。

data-clientid="847853708202.apps.googleusercontent.com"

data-prefilltext

投稿内にあらかじめ文言をいれることができます。

data-calltoactionlabel

投稿内のラベルの（ボタンみたいなもの）設定です。

これも、Sharing interactive postsページの「3」に書いてあります。利用できるラベル一覧が紹介されています。用途に合ったラベルを選びましょう。(例えばREAD_MOREとか、ブログ記事を投稿するのに使い勝手がいい気がします)ちなみに、このリストにないラベルの設定はできませんでした。

data-calltoactionurl

ラベルのリンク設定です。私の場合は、「data-contenturl」と同じURLを設定しましたが、ボタンからの流入を計測したかったので、値を付けています。

というわけで、動作サンプルをご紹介します。

動作サンプル

ボタンが表示されます

ここまでの作業が一通り完了したら、下のようにボタンが表示されます。（※これは画像なのでクリックできません）

もちろん、ボタンはcssなどでカスタマイズもできます。（※これも画像なのでクリックできません）

ボタンをクリックして、アプリの承認許可をしましょう

ボタンをクリックすると、下のようにアプリの承認許可を求められます。

「ユーザーのリストの確認」とは・・・？

「承認する」をクリックすると、下の画面が出る場合があります。下の説明には「確認をクリックすると、・・・」とありますが、正直ここよくわからないです・・・。「[変更]をクリックすると」の間違いじゃないのかな・・・理解力が足りないです。ですが、そう読み換えると、「このAPIを利用していますよ～」ってことが、自分のプロフィールの基本情報の欄に公開されます。（公開範囲は後程変更もできます。Google+のプロフィールで基本情報に「アプリ」と表示されると思います。そこから「編集」をクリックして変更しましょう）私の場合を例として「変更」をクリックして、サークルをすべて通知しない設定にします。

というわけで、下の画面が表示されます。英文ですが、書いてあることは同じことで、自分が使用しているアプリの一覧を一切見られたくない場合は、このチェックをすべて外して「OK」をクリックします。

というわけで、設定を完了させて、アプリの承認を許可しましょう。次回以降は、アプリの認証許可は現れず、下のように投稿画面が表示されます。ちなみにですが、許可したアプリは、こちらで一覧として確認できます。設定変更もできますので、併せてご参考くださいませ～。

【Google+で許可したアプリの管理（アプリとの接続解除やアクティビティ削除）をする方法】

プロフィール画面に表示させる「アプリ」項目の公開範囲を設定

Google+のプロフィールページの「アプリ」の項目に、承認したアプリをどの範囲まで見せるかわかります。下の画像は、自分にしか許可アプリは見えない設定にしてあります。

ではでは、いよいよ「インタラクティブな投稿」をしましょう～。

インタラクティブな投稿

ここで、投稿するサークルを指定して「共有」しましょう。今まで「+1」ボタンで共有をしていた方法と同じです（Send to Do ShareはChrome拡張なので、拡張を入れていない方は表示されません）

というわけで、インタラクティブな投稿ボタンの設置方法でした。

ところで、この「『インタラクティブな投稿』をすることで何ができるの？」ってところが知りたいと思います。下記にまとめました。

「インタラクティブな投稿」を使って共有するメリットは大きく２つあります

１．「Google+ストリームの上部に滞在する時間」が通常の投稿よりも長い（気がする）

「+1」ボタンからの投稿や共有ボタンからの投稿、また、Google+内から直接の投稿など、そんな通常の投稿よりも、「インタラクティブな投稿」はストリーム上の上位に表示される時間が長いです（体感的長いと感じます。妄想ではないと信じたいです。が、さっき「妄想だろｗ」っていう意見もいただいてますんで様子見です）とてもシンプルに表現すると、人目に触れる機会が多いってことですかね。

２．Google+ページとの連携で「解析」ができる

この部分は過去に連携の方法を書きましたので、ご参考くださいませ。

【Google+ページと「Google API コンソール」を接続（連携）して、モバイルアプリやウェブサイトのパフォーマンスを監視しましょう】

参考が面倒な方は・・・ここもシンプルに表現すると、アプリの承認許可数や「インタラクティブな投稿」が見られた数やクリック数など確認することができます。これが、けっこうおもしろいです。いつか詳しく書きますね。

文章で書くと、「これだけなの？」って感じですが、実際に試された方がそのメリットを実感できるんじゃないかなぁ・・・と思っています。

ご参考頂けますと幸いです

ものすごくシンプルに表現すると、「インタラクティブな投稿」は、Google+のストリームとGoogle+ページに関係しているってことですね。この機会に、「インタラクティブな投稿」用のボタンを作って、Google+のストリームに自分のサイトやブログの新着記事などを投稿してみましょう～。