FacebookのLikeボタンを設置するJavascript
アクティビティを通知するLikeボタン(いいね!ボタン)の設置方法です。
オフィシャルドキュメントはこちらです。
設置方法
<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>
iframeのsrc内のhref=******
を設置したいページのURLに変更する必要があります。
Javascript
いちいち、ページごとにURLを変更するのは面倒なので、以下のJSを出力することで動的にLikeボタンを設置できます。
下記追記部分も参照ください。
<script type="text/javascript"> var url = encodeURIComponent(location.href); document.write('<iframe src="http://www.facebook.com/widgets/like.php?href=' + url + '" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>'); </script>
設置したデモはコチラです。
とても、簡単にクライアント側で実装が可能ですね。
2011/2/16 追記
公開していたJavascriptのソースにXSSによる攻撃を受ける可能性をご指摘いただきました。
var url = document.URL;
によるURLの取得方法ではなく
var url = encodeURIComponent(location.href);
によるURLの取得を行って下さい。
当エントリーを参考にして、実装いただいた方にはお詫びをいたします。また、お手数をお掛けいたしますが、ソースの修正を行って頂ければと思います。