Blogger に facebook の "いいね" ボタン を 設置 する 方法

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

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

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

facebook いいね ボタン の 設置手順

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

   facebook API スクリプト

   ?

   1 2 3 4 5 6 7 8

   <div id="fb-root"></div> <script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

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

   標準表示

   ?

   1	<div class='fb-like' expr:data-href='data:post.url' data-width='450' data-show-faces='false' data-send='false'></div>

   ボタン カウント 表示

   ?

   1	<div class='fb-like' expr:data-href='data:post.url' data-width='450' data-layout='button_count' data-show-faces='false' data-send='false'></div>

   ボックス カウント 表示

   ?

   1	<div class='fb-like' expr:data-href='data:post.url' data-width='450' data-layout='box_count' data-show-faces='false' data-send='false'></div>

今回、参考にしたサイトは以下の通りです。

• Facebook - Like Button

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

• Facebook ページ
• twitter