• twitter
  • Facebook
  • はてなブックマーク
2012年02月20日(月)

Google+のボタン設置方法

Google+のボタン設置もtwitterやfacebook同様、公式サイトからjavascriptをロードし、HTML内にタグとパラメータ記述を行って出力を行います。Googleの提供する「plusone.js」には、+1ボタン設置以外にも、Google+アカウントの個人バッジ(個人のアカウントをサークルに追加するためのウィンドウ)や、Google+への投稿シェアの機能も含まれています。

ヘッダーエリアへのネームスペースの記述

+1ボタンの設置も、facebookで利用されているXFBML版同様、独自タグによる埋め込み方式で設置タグを記述する事が出来ます。InternetExplorerなどの古いブラウザに対応させるため、htmlへネームスペースの記述を行います。Googleのネームスペース設定は、Webサイトの運営形式に合わせて「ブログ」や「書籍」「人物」などのカテゴリーに分類したitemscopeを明示的に記述する必要があるため、Googleスニペットであらかじめコードを取得しておくと便利です。

自動レンダリングで+1ボタンを設置

非同期通信でplusone.jsのロード

  1. <script type="text/javascript">
  2. // 言語設定と、パースするタイミングの指定(なくてもOK)
  3. window.___gcfg = {lang:'ja', parsetags:'onload'};
  4. (function(){var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
  5. </script>

ボタンを埋め込むエリアにタグを記述(HTML5版)

  1. <div class="g-plusone" data-size="medium"></div>
+1ボタンに設定できるオプションパラメータ
(HTML5版の場合、data属性として記述。data-link="●●"や、data-send="●●")
キー 概要
href 現在のページのURL
size +1ボタンのサイズ(‘small’ ‘medium’ ‘standard’ ‘tall’いずれか)
annotation +1ボタンを押した人数を表示する方法(‘none’ ‘bubble’(吹き出しでクリック数を表示) ‘inline’(テキストでクリック数を表示))
width ボタンの表示サイズ幅。annotation=’inline’にした場合、最小値は450px。
align 横並びにした場合の、ボタンを配置する位置(‘left’または’right’)
expandTo +1ボタンにマウスオーバーした際に表示される情報ボックスの表示位置(‘top’ ‘right’ ‘bottom’ ‘left’)
callback +1ボタンをクリックした後に呼び出されるコールバック関数。引数はJSONオブジェクト形式で、href(+1ターゲットのURL)と、state(onまたはoff)が渡される。
onstartinteraction +1ボタンホバー時(または情報ウィンドウ表示中)にコールバック関数として呼ばれる関数。表示中のページが動的なものなどで構成されていて、一時停止のような事をしたい場合などに指定する。引数は、id(+1ターゲットのURL)と、type(hoverまたはconfirm)が含まれるJSONオブジェクト。
onendinteraction +1ボタンマウスアウト時、または+1の確認ダイアログ表示が非表示になった際に呼ばれるコールバック関数。上記、onstartinteractionで停止した機能を再開するなどに使用。
count +1ボタンクリック数をカウントするかどうか(trueまたはfalse)設定は非推奨。

関連投稿記事

Comment: