2010年5月9日日曜日

Blogにいいね!ボタンを追加した

Blogにretweeetボタンを追加したばかりだが、調子に乗ってFacebookのいいね!ボタンを追加した。
右上のretweet(あるいはtweet)ボタンのすぐ左側にいいね!ボタンが表示されているはずだ。

いいね!ボタンは、世界最大のSNSであるFacebookが今年4月に公表した新機能だ。Facebookにアカウントを持っていれば使うことができる。
いいな、面白いなと感じたblogやWebサイトにいいね!ボタンをクリックする。
いいね!ボタンの横に何人がクリックしたかを示すので、blogの人気のバロメーターになる。

Blogにretweetボタンを追加したのと同じ程度の作業だ。それほど難しくはない。
追加するに当たっては、「フランスの日々」というblogの「FacebookのLikeボタンとShareボタンの使い方と付け方」が大いに参考になった。

retweetボタンを追加したときと同様に、Bloggerの管理画面にあるレイアウトのタブをクリックし、移動した画面で「HTMLの編集」をクリックする。
この画面にある「テンプレートの編集」の下に、blogテンプレートのHTMLのコードが書き込んである。
ここで前もって、右上にある「ウィジェットのテンプレートを展開」というボックスをチェックしておく。

retweetボタンのすぐ横にいいね!ボタンを表示したいので、こんな方法をとった。
まず<>で囲まれたdiv style="float:right;padding:4px;"というコードを探し、すぐ後にやはり<>で囲んだ以下のコードをコピペする。
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'/
あとはテンプレートを保存のボタンを押せばいい。

記事の文末というか、コメント欄の前にいいね!ボタンを表示したい人は、「フランスの日々」を参考にするといい。

これで終わりだ。分かっていれば作業は数分で終わる。
このblogを読まれた方は、よければいいね!ボタンあるいはretweetボタンを押してほしい。

0 件のコメント: