Facebookでそれっぽいダイアログを出す方法

Facebookアプリを作っていて、Facebookと同じようなダイアログを出す方法を調べたので、メモっておく。

ちなみに、Facebookと同じようなダイアログっていうのは半透明の角丸の枠が付いてる、下のようなやつです。

ダイアログの作り方はいたって簡単で、FB.Dialog.createを呼び出すだけです。

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
33
34
35
36
37
38
39
40
41
42
43
44
<div id="fb-root">
<script charset="utf-8" type="text/javascript"
  src="http://connect.facebook.net/ja_JP/all.js" ></script>
<script type="text/javascript">
 FB.init({
   apiKey : 285434861495310
  ,  status : true
  ,  cookie : true
  ,  xfbml  : true});

 function showDialog() {
 var content = ''
  + '<div style="color:#FFFFFF;
      background-color:#3b5998;
      font-size: 15px;
      font-weight: bold;
      padding: 5px;
      text-align: left;">'
  + 'ここにタイトルがはいります'
  + ' '
  + '<p style="height:100px;
      margin:10px;">'
  + 'ここにテキストがはいります。'
  + '</p>'
  + '<div style="color:#000000;
      background-color:#f7f7f7;
      padding: 8px;
      text-align: right;
      border-top: 1px solid #cccccc;
      height:23px;">'
  + '<input type="button" value="閉じる"
      onclick="FB.Dialog.remove(this);"/>'
  + ' '

 var dialog = FB.Dialog.create({
  content  : content
 , closeIcon : false
 , visible  : true
// , onClose  : function(){FB.Dialog.remove(this);}
 });
 dialog.style.width = '450px';
}
</script>
[Sample](#)

content には、ダイアログ内のhtmlソースを設定します。
closeIcon は左上にペケポンを出すかどうかの設定です。
onClose は closeIconをクリックしたときの処理です。

ダイアログを消すときは、「FB.Dialog.remove(FB.Dialog._active);」や「FB.Dialog.remove(this);」を使って消します。
FB.Dialog.create に関しては、公開されているAPIではないので急に使えなくなるかもしれないです。
（オフィシャルなAPIも仕様変更で使えなくなったりするので、あまり変わらない気もします。）