復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

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の取得を行って下さい。
当エントリーを参考にして、実装いただいた方にはお詫びをいたします。また、お手数をお掛けいたしますが、ソースの修正を行って頂ければと思います。



Twitterに投稿 Facebookでshare