FacebookファンページのStatic FBMLでFBJS (Facebook JavaScript)を使ってみた。

最近、Facebookが国内でもちょくちょく話題に出てきているみたいなので、いろいろと調べたした結果をメモとして残しておきます。（どっかの誰かが流行らそうとしている陰謀かもしれないですが）
Facebookのファンページ Facebookページで、タブのカスタマイズによく使われているのは
・Static FBML アプリケーションを使う
・独自にアプリケーションを構築する
の２パターンだと思います。 ファンページ Facebookページっていうのは、芸能人とか、企業とかのコミュニティ用のサイトみたいな感じです。 掲示板とか、動画とか、イベントとか、独自のアプリケーションとか、いろんな機能を ファンページのタブとしてくっつけることが出来ます。
(このへんは、あんまり真面目に調べてないので大きく間違っているかもしれません。)
で、Static FBML とよばれるアプリケーションを使ってタブを作成すると、 FBML(FaceBook Markup Language) と FBJS (FaceBook JavaScript)を使って かなりカスタマイズしたページを作ることが可能になります。
ただ、PHPとか使ったページを作りたい場合は、独自にアプリケーションを構築する必要があります。
アプリケーションの作り方とかは、ググってください。
[2010.10.26追記] 【Facebook】Facebookアプリがわからなすぎるので調べてみたが分かりやすかったです。
FBMLは、Facebook内で使える独自のタグです。
FBJSは、Facebook内で使えるJavascriptのサブセット？です。
FBJSで出来ることのうち、ひとまず動かした結果を貼っつけておきます。
(随時、追記・修正するので貼っつけたままだと動かない可能性があります。)

##FBSJは、scriptタグで囲んだ中に記述する。

1
2
3
4
5
6
<script>
 <!--

 //-->

</script>

##クリックしたら、フォントサイズと色を変更する場合

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
<script>
 <!--
 function mouse_over(evt) {
  var id = evt.target.getId(); // target.getId()で対象のIDを取得できる
  document.getElementById(id).setStyle({'color':'#FF0000', 'font-size':'40px'});
 }

 function mouse_out(evt) {
  var id = evt.target.getId();
  document.getElementById(id).setStyle({'color':'#000000', 'font-size':'10px'});
 }
 //-->

</script>
 <div id="sample" onmouseout="mouse_out(event)" onmouseover="mouse_over(event)">
テキスト

##イベントリスナーを使って、指定する場合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
 <!--
 function mouse_over(evt) {
  var id = evt.target.getId();
  document.getElementById(id).setStyle({'color':'#FF0000', 'font-size':'40px'});
 }

 function mouse_out(evt) {
  var id = evt.target.getId();
  document.getElementById(id).setStyle({'color':'#000000', 'font-size':'10px'});
 }
 // イベントリスナーの定義
 document.getElementById('sample').addEventListener('mouseover', mouse_over);
 document.getElementById('sample').addEventListener('mouseout', mouse_out);

 // メソッドチェーンも出来ます
 // document.getElementById('sample').addEventListener('mouseover', mouse_over).addEventListener('mouseout', mouse_out).setStyle('color', '#00FF00');
 //-->

</script>
 <div id="sample">
テキスト

##スタイルの変更にアニメーションを適用する場合

アニメーションの作り方は、ここのサイトを参考にしました。
ざっくり自分でもまとめてみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
 <!--
  function change_anime() {
   Animation(this)
    .to('color', '#0000FF')   // 色変えます
    .to('font-size', '60px')  // サイズ変えます
    .duration(1000)     // １秒かけて
    .ease(Animation.ease.end)  
   .checkpoint()      // ここまでワンセット
    .to('font-size', '10px')
    .duration(2000)
    .ease(Animation.ease.end)
   .go();
  }
 //-->

</script>
 <div onclick="change_anime()">
aaaaaaaaaaaaaa

##ダイアログを表示する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
 <!--
  function choice_dialog(obj) {
   var dialog = new Dialog(Dialog.DIALOG_CONTEXTUAL).setContext(obj);
   // click left button
   dialog.onconfirm = function() {
    obj.setTextValue('Leftをクリックしました');
   }

   // click right button
   dialog.oncancel = function() {
    obj.setTextValue('Rightをクリックしました');
   }
   dialog.showChoice('Title', 'Left Or Right', 'Left', 'Right')
  }
 //-->

</script>
 <div onclick="choice_dialog(this);">
選択

##AJAXについて

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
 <!--
 function load() {
  var ajax = new Ajax();

  // Ajax.JSON, Ajax.FBML, Ajax.RAW の中からセット
  ajax.responseType = Ajax.FBML;

  // ajax実行結果をどうするかを設定
  ajax.ondone = function(data) {
   docuent.getElementById('result').setInnerFBML(data);
  }

  // Ajaxの実行にログインが必要かどうかを設定
  ajax.requireLogin = false;

  ajax.onerror = function() {
   // Ajaxエラー時の処理を記述する
  }
  params = new Object();
  params['field1'] = 'sample1';
  params['field2'] = 'sample2';

  // これきっかけで実行される
  ajax.post('http://example.com/', params);
 }
 //-->

</script>
 <div onclick="load();">
読み込み
<div id="result">

##とりあえず、注意する点

  • onclickで指定したJavaScriptはクリックすれば動く
  • addEventListenerとか、onclick以外で指定したJavascriptは、onclickで何かしらのJavaScriptを実行しないと動かない。