Google+インタラクティブな投稿ボタンをサイトに設置してみましょう。

前回Google+インタラクティブな投稿ボタンの概要とメリットについて説明しました。今回は設置方法について説明して行きたいと思います。

Google+インタラクティブな投稿ボタンをサイトに設置するためには、まずGoogle プロジェクトを作成して、取得したクライアントIDを使ってHTMLタグを作成してサイトに埋め込む必要があります。

まずはGoogleプロジェクトの作成から順番に見ていきましょう。

Googleプロジェクト

Googleプロジェクトの作成はGoogle APIs ConsoleでのProjectの作成方法に書いてある手順と基本的に同じですが、Google+ APIのステータスをONにする必要があります。


注意しないといけないのはクライアントIDを生成する時に入力する「Redirect URIs」と「Javascript Origins」必ず存在するURLにしないとうまく動きません。



HTMLタグをページに埋める

Googleプロジェクトを作成してクライアントIDを取得できたら、いよいよHTMLタグの埋め込みです。そんなに難しくありませんので、手順を見ていきましょう。

まずHTML のbody終了タグの直前に以下のJavaScriptを埋めます。

<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タグを作成して、表示したい場所に埋めます。作成するタグはボタンでもそれ以外のタグでも問題ありません。今回はSPANタグを使ってスタイルシートを適用してみます。

また、今回はメニューを表示するためのラベル「VIEW_MENU」を利用して、Google+の投稿にサイトの目次ページに遷移するためのボタンを追加してみます。

では具体的なHTMLタグをみていきましょう。

<span
  class="g-interactivepost"
  data-contenturl="http://g-master.appspot.com/article/1/70001/50051.html"
  data-contentdeeplinkid="/article/1/70001/50051.html"
  data-clientid="<Client ID>"
  data-cookiepolicy="single_host_origin"
  data-prefilltext="Google+インタラクティブポストボタンをサイトに設置してみましょう。"
  data-calltoactionlabel="VIEW_MENU"
  data-calltoactionurl="http://g-master.appspot.com/">
  <span class="icon">&nbsp;</span>
  <span class="label">共有を試してみて!</span>
</span>

タグ内ののdata-clientidに先ほど作成したGoogleプロジェクトのClient IDを埋めます。他のオプションについては次回詳しく説明したいと思います。

下は適用するスタイルシートの例です。サイトのデザインに合わせてお好みのデザインを適用できます。

.g-interactivepost {
    padding: 5px;
    background: #fff;
    cursor: pointer;
    line-height: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
  }
.g-interactivepost .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('/images/btn_icons_sprite.png') transparent 0 -40px no-repeat;
  }
.g-interactivepost:hover {
    background-color: #cc3732;
    color: #fff;
    border: #dd4b39;
  }
.g-interactivepost:hover .icon {
    background: url('/images/btn_icons_sprite.png') transparent 0 0px no-repeat;
  }


実際動かしてみましょう。

実際のインタラクティブな投稿ボタンは以下のように表示されます。

対象サイトのGoogle プロジェクトをまだ許可していない場合は、クリックするとユーザー認証(OAuth2)画面が表示されます。


次に、「承認する」をクリックするとGoogle+投稿フォームが表示されます。いつもの投稿に「View Menu」が追加されていますね。



「共有」ボタンをクリックしたら、下のような投稿がGoogle+で共有されます。


ここに表示されている「View menu」ボタンをクリックするとこのサイトの目次ページに飛びます。

終わり

最後まで読んで頂いてありがとうございます。次回はGoogle+インタラクティブな投稿ボタンの設定についてもっと詳しく説明していきたいと思います。





この記事のGoogle+での反応

  • 2Google+インタラクティブな投稿ボタンをサイトに設置してみましょう。

<