ま〜さんのブログ: Bloggerに「いいね！」を設置

2013年5月19日日曜日

Bloggerに「いいね！」を設置

どうせ使われないと分かりつつも何となくやってみたくなったので・・・

参考にさせてもらったサイト。

clmemo@aka: Blogger に Facebook の「いいね!」ボタンを設置する

１．Like Button - Facebook開発者のページにアクセス

Configuratorに必要事項を入れて「Get Code」をクリック。
テンプレートに追加するコードが表示される。

２．コードを変更

そのままだと各記事には表示されないようなので、赤字のコードを追加／変更。

--------------------
<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>
--------------------
<b:if cond='data:post.isFirstPost'>
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</b:if>
--------------------

３．コードをテンプレートに挿入

最後にBloggerの設定に反映する。
対象となるブログの「テンプレート」ページに「HTMLの編集」というボタンがあるのでクリック。

「１．Like Button - Facebook開発者のページにアクセス」で表示された窓に「理想的には、<body>のすぐ後に配置します。」と記載されていたのでその通りに一つ目のコードを挿入。
もう一つはのすぐ下に二つ目のコードを挿入。私の場合は三か所ありましたが、内容を確認しつつ試しながら決定。

これでうまく出来ました！

＜2014/12/29追記＞
設定を元に戻しちゃいました。