facebookのLike!ボタンを自分のサイトに追加する方法

facebookのLike!ボタンは、ボタンを押したサイトへのリンクや更新情報を、facebookのマイページに登録するボタンである。ここでは、自分のサイトをfacebookに登録するLike!ボタンを作成し、自分のサイトにLike!ボタンを追加する方法を解説する。

1. Likeボタンの作成

facebookの開発者向けページで、Likeボタンを作成します。

■Like Button - Facebook開発者

"Get Code"をクリックすると、対応するHTML(iframe)と、XFBMLが表示されます。XFBMLは、facebookアプリケーションをXHTMLに記述する仕組みですが、使うにはfacebookへの登録や準備が必要です。HTMLの方が簡単で、すぐに終わります。

2. Likeボタンの貼り付け

作成したHTMLを、自分のページに貼り付けていきましょう。ただ、Likeボタンを表示するiframeの高さが

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fringoon.jp%2F&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light" allowtransparency="true" style="border: medium none ; overflow: hidden; width: 450px; height:px;" frameborder="0" scrolling="no"></iframe>

3. 個別エントリーへのLikeボタン

iframeのsrcの href=http%3A%2F%2Fringoon.jp%2F を個別のURLに置き換えれば、個別エントリーへのLikeボタンが貼れる・・・と思います。

MovableTypeなら

<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTArchiveLink$>&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light" allowtransparency="true" style="border: medium none ; overflow: hidden; width: 450px; height: 25px;" frameborder="0" scrolling="no"></iframe>

javascriptなら

<script type="text/javascript"><!--
  var url = "http://www.facebook.com/plugins/like.php?href=" + encodeURIComponent(location.href) + "&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light";
  document.write('<iframe src="' + url + '" allowtransparency="true" style="border: medium none ; overflow: hidden; width: 450px; height: 25px;" frameborder="0" scrolling="no"></iframe>');
  //-->
</script>

という感じです。