Google+ シェアボタンの設置方法

WEB大手であるGoogleは米国時間4月24日にGoogle+用のシェアボタンを発表した。


Google+のシェアボタンはFacebookやmixiのいいねボタンなどと同様にWEBサイトを訪れた際に、そのサイトに対し評価･共有できるボタンとなっている。



Googleシェアボタン設置方法とソースはDevelopersに記載されてあるので、そのコードを利用することでこのGoogleシェアボタンを自身のWEBサイトに加えることができる。




サンプルコード

--------------------------

<!-- 共有ボタン を表示したい位置に次のタグを貼り付けてください。 -->

<div class="g-plus" data-action="share" data-annotation="inline" data-height="60"></div>

<!-- 最後の 共有 タグの後に次のタグを貼り付けてください。 -->

<script type="text/javascript">

window.___gcfg = {

lang: 'ja',

parsetags: 'onload'

};

(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);

})();

</script>

----------------------------------

ボタンは大きく分けて4種類あり、上記コードのdata-annotation="○○"

○○の部分を変更すれば形状(種類)を変える事が可能です。


inline

ページとページを共有しているユーザーの数を共有して接続しているユーザーのプロファイル画像が表示されます。

bubble

ボタングラフィック次のページを共有しているユーザーの数を表示します。




vertical-bubble

ボタンの上にグラフィックでページを共有しているユーザーの数を表示します。




none

追加の注釈を表示しません。

以上が基本的なシェアボタンの作り方となる、詳しくはDevelopersのサイトに書いてあるので参照して頂ければ自由にボタンを配置できるようになると思う。