Google+ Interactive Posts を WordPress へ導入してみた

『WordPress → Google+ への自動投稿はないもんかなぁ（無料かつエレガントに）…』とウロウロしておりましたら、Google+ Interactive Posts なる言葉を初めて知りました。

Google 先生の文言によると『ストリームの中で目立つ』『ユーザーをアプリケーションに呼び込んで特定の操作を実行させる』ことを目的とした Google+ のプラットフォームだそうです。？？？なんだこりゃ？？？
先のページを読むと、どうやら単に Google+1 ボタンを設置して押してもらう以上のことをユーザに促してくれるようです。このサイトでは OGP を導入済みなので、画面左に浮いている G+1 を押してくれればコネクションが広がっていきますが、この『インタラクティブな投稿』を使うと、例えば自分を連絡先に追加するとか、レストランの予約をするとか、品物をカートに入れるとか、先生が用意した100以上のラベルを使ってより高度な（インタラクティブな）ことができるようになるみたいです。
自動投稿とは全く違いますが、これはこれでサイトの集客には有意義なことらしい（のかな…？）ので、導入してみることにしました（なんかわかったようでよくわからないけどやれることはやっとこうってことさ）。

参考にさせていただいのはこちら↓
『Google+ Interactive Post のラベルを見てたら113種類もあった。』
『【Google+APIを使って「インタラクティブな投稿」をするための準備】はじめて「Google API コンソール」を設定する方法』
『【Google+APIを使って「インタラクティブな投稿」をする方法】投稿から得られるデータもおもしろいです』
ありがとうございますっ！

まず、先生の『インタラクティブな投稿の共有』を読み、『ページへの共有ボタンの追加』に従ってボタンを作っていきます。
自分の場合、作成するボタンは単純に自サイトへのリンクなので、ラベルは “REVIEW” を選びました（何を選ぶのが最適なのかようわからん）。
できたボタンはこんな感じです。実際に設置されたボタンはマウスホバーで赤白反転します。

コードはこちら↓
【HTML /bodyタグ直前へ】
[html]
<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>
[/html]

【HTML ボタンを描画したい所へ】
[html]
<span id="myBtn" class="gip g-interactivepost"
data-clientid="*** your Client ID ***"
data-contenturl="<?php the_permalink(); ?>"
data-calltoactionlabel="REVIEW"
data-calltoactionurl="<?php the_permalink(); ?>?action=gplus_article"
data-cookiepolicy="single_host_origin"
data-prefilltext="Take a look! – Inside of Papaya">
<span class="icon">&nbsp;</span>
<span class="label">Post to your Google+!</span>
</span>
[/html]

【CSS】
[css]
<style type="text/css">
#myBtn {
padding: 5px;
}
#myBtn.gip {
background-color: #fff;
cursor: pointer;
line-height: 32px;
border: 1px solid #e6e6e6;
border-radius: 4px;
padding: 5px;
margin-right: 3px;
}
#myBtn.gip .icon {
width: 32px;
height: 32px;
display: inline-block;
background: url(‘../../uploads/2013/05/btn_gplus_sprite_32x32.png’) transparent -47px -5px no-repeat;
}
#myBtn.gip:hover {
background-color: #cc3732;
color: #fff;
border: #dd4b39;
}
#myBtn.gip:hover .icon {
background: url(‘../../uploads/2013/05/btn_gplus_sprite_32x32.png’) transparent -5px -5px no-repeat;
}
</style>
[/css]

スプライト画像（ボタン）はこちら↓（赤の G+ マークの左に白の G+ マークがあるんだけど見えんな～）

ボタンの元ネタは『ブランディングに関するガイドライン』からダウンロードして、sprite 画像作成サイト（ググればいくつか出てきます）で作成しました。CSS とかさっぱわからんからえらい苦労した～ f^^);

さて、結果を確認してみますか？
ボタンを押して、とにかく記事を共有します。
Google+ の画面で、普通に G+1 ボタンで共有した時と見比べてみると…

違いますな～。Google+ Interactive Posts からの共有の方が、よりインプレッシブだと思います。

とりあえずできたボタンを当サイトに設置してますので、ジャンジャン押してみてください！

※Google+ への自動投稿は、有料か Hootsuite 使うかって感じらしくてイマイチな感じなので中止…

[amazon_enhanced asin=”4844330993″ /] [amazon_enhanced asin=”4881668757″ /] [amazon_enhanced asin=”4048860674″ /]