2012/01/22

Bloggerの各記事に「いいね!」ボタンを設置する方法(divタグ版)

1327219732_facebook1327219795_blogger
(icon:http://www.iconfinder.com/)

先週よりようやくFacebookをはじめました。
といえど、なんだかアプリばかりやっている毎日なのですがw
まあそれはともかくとして、Facebookをはじめたことで、いろんなところで見かける「いいね!」ボタンの使い道がようやく理解できたところです。
いままでは指をくわえて見ていることしかなかった「いいね!」ボタン。いくら「いいね!」と思っても押すことが許されていなかったあのボタン―――これからはいくらでもポチポチできます。
そうなれば自分のブログにもつけたいじゃん! という野望がむくむく湧いてくるのは当然のこと―――なので、さっそく設置してみました。
私が使っているのがBloggerなので、Bloggerに設置する方法をメモがてらまとめておきます。
(調べてみたところ、「いいね!」ボタンのコードが少し変わったみたいですので…。昔はiframeのコードぽかったですね)

1:自分のブログ用のコードを取得する

下記URLにアクセスします。で、自分のブログ用のコードを取得します。

Like Button - Facebook開発者

取得までは下記のページがわかりやすいので参考にしてください。

「いいね!」ボタンを設置しよう | Facebook Guide

2:bloggerテンプレートの編集

下記の2種類のコードが作られます。
まず1つめのコードは<body>タグのあとに貼り付けます。

<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>

これはとくに編集せずそのままコピー&ペーストで大丈夫です。

次に、<div>で始まるコードですが、発行されたままではブログトップのURLに対する「いいね!」ボタンとなります。
毎記事ごとに「いいね!」ボタンを設置することを考慮し、記事ごとURLを埋め込むためには次のように変更します。

↓変更前

<div class="fb-like" data-href="http://moumou-nakunaku.blogspot.com/" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>

↓ ↓ ↓

↓変更後

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

※赤字が変更箇所

あとはこのコードを「いいね!」ボタンを置きたい場所に貼れば完了です。

この記事下方にある「いいね!」ボタンのように表示することができますし、押したらこのエントリに対するいいね! になります。(押してもいいのよ)

bloggerの細かいテンプレートカスタマイズあれこれについては、別のサイトさんでご確認くださいませー(∀`*ゞ)

ところで、「いいね!」の親指ボタンがツボ押しマッサージに見えないこともなくて
押すたびに気持ちいいですね///

4 コメント:

kodawa Rou さんのコメント...
このコメントは投稿者によって削除されました。
naoco さんのコメント...

どうしてもいいねボタンが設置できません・・・。bodyタグのすぐ後ろとbody/>のうしろに該当のコードを貼り付けたのですが。。。
どのサイトも初心者にはわかりずらく困っています。。。

moumou さんのコメント...

naocoさんこんばんは。
bloggerをお使いでしょうか。
「 <body>」タグのすぐ後ろに上記のひとつめのコードをはります。

2つ目のコードは、「いいね!」ボタンを置きたい位置にはりつけますが、
もし表示されないのであれば、ふたつめのコードの位置がおかしいのかもしれません。
試しに、2つめのコードは消して「あああ」とか文字を置いた場合に
理想の位置に「あああ」が表示されるでしょうか。
お試しいただければと思いますm(__)m

mayumi さんのコメント...
このコメントは投稿者によって削除されました。

コメントを投稿