Google +1 ボタン設置

2013/01/06

各種ソーシャルメディアへの共有ボタンを設置している当サイトですが、遅ればせながらGoogle +1 ボタンを設置しました。

設置方法はGoogleが提供する+1 ボタンページより以下のようなコードを生成して各ページに配置するだけです。

+1 ボタンを表示したい位置に記述(当該ページが共有対象となる)

<g:plusone size='medium'></g:plusone>

+1 ボタンタグ以降に記述(1ページに複数のボタンを配置した場合は最後のボタンタグ以降に記述)

<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

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

ボタンの種類や各種オプションにより生成されるコードが変わりますが、当サイトでは以下の設定にしています。

サイズ

中(20px)

+1 情報

バルーン

言語

日本語

非同期オプション

有効

HTML5準拠の構文

無効(有効にするとChromeでDOMが崩れる)

細かい見た目の調整はCSSで指定すればよいでしょう。

その他の共有ボタン設置については以下の資料をご覧下さい。