Facebook ファンページで JQuery を使いたい

Facebookのファンページ FacebookページでFBMLアプリケーションや独自のアプリケーションタブを作成するときに、JQueryを使う方法です。
正規のJQueryは使えないので、有志の方が作成した、FBML用のJQuery互換のライブラリー「FBjqRY」を使います。
ライセンスは、MITライセンスです。

安定版:(2010/11/4現在、バージョン0.2)
http://code.google.com/p/fbjqry/

開発版:(2010/11/4現在、バージョン0.6)
https://github.com/darwin/fbjqry

安定版と開発版では、作りが異なっているようなのでつかえるメソッドなどに違いがあるかもしれません。
開発版については、JQuery1.3.2と、1.4.2のいくつかの機能をベースにしているそうです。
実際の使い方としては、FBMLアプリケーションや、独自のアプリケーションタブでは、
外部スクリプトの読み込みが許可されていないので、直接 JavaScriptを記述する必要があるようです。
安定版は、ダウンロード・解凍したファイルの中にある、FbjqRY.min.jsの内容を

下記のようにコピペします。
(外部スクリプトの読み込みをしようとすると「Cannot allow external script」って怒られます。)

1
2
3
4
5
<script>
<!--
var Utility={};(function() ................
//-->
</script>

開発版は、ダウンロード・解凍したファイルの中にある、fbjqry.min.jsの内容を
下記のようにコピペします。

1
2
3
4
5
<script>
<!--
var FBjqRY= ................
//-->
</script>

これで、FacebookファンページのFBMLタブでJQueryが使えるようになりました。
これが

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
<!--
function change_color_size() {
var sample = document.getElementById('sample1');

sample.setStyle('color', '#FF0000');
sample.setStyle('font-size', '40px');

// まとめて指定する場合は、こっちでもOK
// sample.setStyle({'color':'#FF0000', 'font-size':'40px'});
}
//-->

</script>
<div id="sample1" onclick="change_color_size()">
テキスト

こんな感じに変わります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
<!--
var FBjqRY= ................
//-->
</script>
<script>
<!--
function change_color_size() {
$('#sample1').css('color', '#FF0000').css('font-size', '40px');
// まとめて指定する場合は、こっちでもOK
// $('#sample1').css({color:'#FF0000', fontSize:'40px'});
}
//-->

</script>
<div id="sample1" onclick="change_color_size()">
テキスト

使い慣れているJQueryで開発したいという方には、おすすめのライブラリーです。