Blogger に google の "+1" ボタン を 設置 する 方法

Blogger に google の "+1" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。

※その他の ソーシャルボタン もまとめて追加する方法は こちら。

※ソースコード は ダブルクリック すると、全選択できます。

google +1 ボタン の 設置手順

1. マイブログ から [テンプレート] → [HTML の編集] を選択します。
   
2. google API スクリプト を読み込む以下の ソースコード を body 終了タグ の直前に コピー & ペースト します。
   

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

3. 以下から好きな表示形式を選んで、テンプレート の任意の表示したい場所へ ソースコード を コピー & ペースト します。
   テンプレート編集 をしている 以下の画像の場合、投稿記事タイトル の直後に配置するようにしています。
   

   ボタン のみ表示

   <div class='g-plusone' data-annotation='none' data-width='300' data-size='medium' expr:data-href='data:post.url'></div>
   

   ボタン カウント 表示

   <div class='g-plusone' data-annotation='bubble' data-width='300' data-size='medium' expr:data-href='data:post.url'></div>
   

   縦 カウント 表示

   <div class='g-plusone' data-annotation='bubble' data-width='300' data-size='tall' expr:data-href='data:post.url'></div>
   

今回、以下のサイトを参考にしました。

• Google Develpers - Google+ +1 ボタン

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter