(icon:http://www.iconfinder.com/)
先週よりようやくFacebookをはじめました。
といえど、なんだかアプリばかりやっている毎日なのですがw
まあそれはともかくとして、Facebookをはじめたことで、いろんなところで見かける「いいね!」ボタンの使い道がようやく理解できたところです。
いままでは指をくわえて見ていることしかなかった「いいね!」ボタン。いくら「いいね!」と思っても押すことが許されていなかったあのボタン―――これからはいくらでもポチポチできます。
そうなれば自分のブログにもつけたいじゃん! という野望がむくむく湧いてくるのは当然のこと―――なので、さっそく設置してみました。
私が使っているのがBloggerなので、Bloggerに設置する方法をメモがてらまとめておきます。
(調べてみたところ、「いいね!」ボタンのコードが少し変わったみたいですので…。昔はiframeのコードぽかったですね)
1:自分のブログ用のコードを取得する
下記URLにアクセスします。で、自分のブログ用のコードを取得します。
取得までは下記のページがわかりやすいので参考にしてください。
「いいね!」ボタンを設置しよう | 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 コメント:
どうしてもいいねボタンが設置できません・・・。bodyタグのすぐ後ろとbody/>のうしろに該当のコードを貼り付けたのですが。。。
どのサイトも初心者にはわかりずらく困っています。。。
naocoさんこんばんは。
bloggerをお使いでしょうか。
「 <body>」タグのすぐ後ろに上記のひとつめのコードをはります。
2つ目のコードは、「いいね!」ボタンを置きたい位置にはりつけますが、
もし表示されないのであれば、ふたつめのコードの位置がおかしいのかもしれません。
試しに、2つめのコードは消して「あああ」とか文字を置いた場合に
理想の位置に「あああ」が表示されるでしょうか。
お試しいただければと思いますm(__)m
コメントを投稿