あなたのブログに“いいね！”ボタンは付いていますか？
bloggerサイトに設置＆表示シリーズ第三段目となります。
これまでのエントリ：はてなブックマークレット、はてなスターをbloggerサイトに設置＆表示する方法。
・[はてブ] Bloggerに“はてなブックマーク”を設置する方法
・[はてなスター] Bloggerに“はてなスター”を設置する方法
ではさっそく始めましょう！
流れを説明します。
1.blogger（自分のブログサイトに行く）ログイン
2.テンプレートの内容を編集する
3.一部HTMLタグの書き換えを行う（一般例）
4.一部HTMLタグの書き換えを行う（tweet Shareの隣に配置）
5.完成
1.blogger（自分のブログサイトに行く）ログイン
自分のブログサイトに行ってログインしてください。
2.テンプレートの内容を編集する
ダッシュボードから以下の用にクリックして進みます。
ブログを管理 > デザイン > HTML の編集 > テンプレートを編集
そして「ウィジェットのテンプレートを展開」にチェックを入れます。ここがポイントです！
3.一部HTMLタグの書き換えを行う（一般例）
まず<data:post.body/>を探してそのすぐ後に以下の貼り付け用コードをペーストします。
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + " &layout=button_count&show_faces=false&width=90&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:60px'/>
ここで「テンプレートを保存」すれば、facebookの「いいね！」ボタンをエントリの下に単独でつける場合はこれで完成です！
実は今回ちょっと工夫してみました。
ツイッターへの投稿（tweet Share）の隣にfacebookの「いいね！」ボタンを配置することにしてみました。つまり横並び表示です。
4.一部HTMLタグの書き換えを行う（tweet Shareの隣に配置）
まずツイッター投稿（tweet Share button）ボタンを配置してその後に「いいね！」ボタンを配置していきます。
4-1.ツイッター投稿（tweet Share button）ボタンの配置
最初に<div class='post-footer'>を探しましょう。
その直後に以下のコードを貼付けします。
<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='ユーザー名' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
4-2.いいね！ボタンの配置
4-1.で配置したツイッター投稿ボタンの下に以下のコードを貼付けします。
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + " &layout=button_count&show_faces=false&width=90&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/>
このコードはこちらのサイト(英語)から作ることが可能です。
こんな感じでコードを貼りつています。
最後に「テンプレートを保存」をクリック
5.完成
Bloggerをお使いの皆さんも“いいね！”ボタンの設置でfacebookのお気に入りを付けてもらいましょう♪
【あとがき】
今回はメッチャ苦労しました(o´д`o)=3
と言うのもイメージしていたところに「いいね！」ボタンがなかなか付けられなかったからです。綺麗にツイッター投稿と横並びにするのが難しかった。
参考となるサイトを読んである程度やるべきことは見えていました。しかし思った位置に配置できなかった。
一番の変更点は配置の高さのマージンを変えたこと。
height:20px 本来は60px位の高さですが思い切って20pxまで下げちゃいました。いまのところは問題ないですが今後もしかしたらレイアウトがずれてくる可能性もあります。そしたらまた考えます！
そしてもう一点。
いままで一つひとつエントリの最後に付けたしていたツイッター投稿部分もレイアウトの中に盛り込みました。なんとか上手く動いてくれてるようです。
おそらくHTMLの中身を読んで自在に書き換えられる方は、今回書いてあることは苦も無くサラッと出来てしまうのかもしれません。
しかしHTMLタグを少ししか知らない私が中身(大本のレイアウト部分)を触って書き変えるのは、かなりの労力を要しました。
検索して色々なサイトを探ってみましたが、どれも一発で解決できるところが中々見つからなかったのが実感です。
結局書いてあることを何度も試して実際反映される結果を検証しながら出来上がった感じ。
今回感じたのはBloggerというブログサービスの不便さ。
FAQも日本語に対応していないところがあったり、ググっても日本語で解説しているところが中々みつからない。英語で検索入力するといっぱい出てくるのですが中身を読んで理解しながら自分のやりたいことを実行するのはとても難しい。これが感想です。
本当はもっと自由にカスタマイズできるといいなぁと思ってます。
今回行った3つのボタン配置と表示は、実際にお試しして出来たことを備忘録的にエントリにしたものです。
もしBloggerユーザーでなおかつサーバーを借りずに「blogspot.com」ままブログサイトを運営されている方の助けになれば幸いです。
Kazwoo
関連するエントリ
・[はてブ] Bloggerに“はてなブックマーク”を設置する方法
・[はてなスター] Bloggerに“はてなスター”を設置する方法
参考にした記事
・FacebookのLikeボタンとShareボタンの使い方と付け方 | フランスの日々
・Facebook Like / Recommend Button For Blogger ~ Blogger Widgets《英語です》
