facebookいいね!ボタンの設置法はまぞう版

facebookいいね!ボタンの設置法はまぞう版 最近、身近に Facebook(フェイスブック) を利用される方が増えてきました。 Facebook とは日本ではまだユーザ数は少ないですが世界最大の SNS(Social Networking Service:ソーシャルネットワーキングサービス) です。 日本で代表的な SNS は mixi(ミクシィ) になりますね。

Facebook で有名な機能が いいね! ボタンです。 これの設置されたホームページでこのボタンを押せば、 Facebook と連絡して自分がそのホームページに対して好意的であることを示せる、 という機能です。 この機能で Facebook の友達に良い情報が有ったことを知らせることが出来るのですね。

そうとなれば自分のブログにもこの いいね! ボタンを設置してみたくなるのが人情と言うもの、 早速やってみましょう。 Facebook から2010年11月現在与えられているのは以下の呪文(HTMLコード)です。

<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>
これをブログであればテンプレートに書き込めば良い訳です。

但し、上のままでは自分のブログに いいね! と言ってもらうことにはなりません。 自分のブログであることを Facebook に知らせる必要があり、それには呪文中の赤字の部分を 自分のブログ用に書き換える必要があります。 例えば本ブログ HamaZoランクチェック!Blog (※) 用には

rank.hamazo.tv
(※) と書き換えることになります。

またまた但し、 このままでは折角 いいね! と言ってもらってもブログ全体への評価になってしまいます。 出来たらどの記事に好意を示して貰ったか知りたいですよね。 実ははまぞうブログではこれを実現することが出来ます。

はまぞうブログでは各記事ごとに固有の数字が振られています。 これを目印にプログラムがデータベースに保存したブログ記事を読み出して表示しているのですが、 テンプレートの中でこの固有の数字を示すことを表現することが出来るのです。 それが

<%EntryId%>
と言う呪文になります。 従って記事毎に いいね! ボタンを表示するには、ブログの表示したい位置に
<iframe src="http://www.facebook.com/widgets/like.php?href=http://*****.hamazo.tv/e<%EntryId%>.html" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>
と、ホームページであることを示す e.html を補完してブログテンプレートに書き込めば良い事になります。 この時*****の部分は貴方のブログID (ブログIDって何?) に変える様にご注意下さい。 設置してみて実際に いいね! ボタンを押してみて Facebook に反映されていれば設置完了です。 Facebook とはまぞうブログとの連携をお楽しみ下さい。 そして宜しければこの記事の いいね! ボタンのクリックをお願いします(笑)。

※ 現在では HamaZoランクチェック!Blog は本ブログ( Acenumber Technical Issues )に統一しました。

7件のコメント

  1. RockMeltとFacebook

    一昨日2010年11月20日の記事ブラウザって何?で紹介したRockMeltの公式サイトを訪れると下の動画が用意されています。見るからに楽しそうなブラウザでインターネットの閲覧を楽しくさせてくれそうな予感がします。さてこのRockMeltと言うブラウザを利用するには実は事前に必

  2. facebookの始め方

    本ブログ2010年11月13日の記事facebookいいね!ボタンの設置法はまぞう版でもお話した様にfacebookと言うインターネットサービスが流行の兆しを見せています。また新進ブラウザRockMeltを利用するには昨日2010年11月23日のRockMeltとFacebookでもお話した様にfacebookアカウ

  3. Facebook Comments機能のブログへの設置方法

    本ブログの2010年11月13日にご紹介したfacebookいいね!ボタンの設置法はまぞう版も、2010年11月18日の記事twitterで気軽にはまぞうブログを見た人にフォローして貰う方法の tweet ボタンと同様にはまぞうブログシステムに正式にブログ環境設定 > facebook > いいね!ボタ

  4. Google +1(PlusOne:プラスワン)をブログへ設置する

    最近話題によく上るようになったのがGoogle +1(PlusOne:グーグルプラスワン)です。アメリカでdel.icio.us(デリシャス)が先鞭を告げ日本でははてなブックマーク(しばしばはてブと略されます)がその嚆矢となったのが、ソーシャルブックマークサービスでインターネット

  5. 本ブログ的ヒット記事達成第2号

    2011年7月27日に第1号が登場したのは本ブログの分に於いてヒット記事と位置付ける1,000PV(ページビュー)越えの記事iPadアイコン画像素材でした。これに引き続いて昨日は2011年8月15日に第2号となる記事が登場してくれました。それは2010年11月13日投稿のfacebookいいね!ボ

  6. 新はてなブックマークボタンのはまぞうブログへの設置

    日本に於けるソーシャルボタンの走りと言えばはてなブックマークボタンで、今話題のFacebookのいいね!ボタンやGoogleの+1ボタンより以前から多くの人に愛用されてきました。特にIT系の方やネットを古くから利用している方に慣れ親しまれているソーシャルボタンです。従って

  7. Facebookいいね!ボタンの新しくなった設置方法はまぞうブログ版

    幾つものソーシャルメディアがこれだけ世の中に普及し、それぞれがそれなりのシェアを有するとブログに設置する連携ボタンも幾種類にもなります。ブログシステムで、本ブログでははまぞうブログですが、連携ボタンをすべて用意してくれていればいいのですが、時にはブログと

コメントは受け付けていません。