iframeのfacebookページを作成する時に使う、エラーのないテンプレート

iframeで作るfacebookページのテンプレートを作りましたので、勝手にコピペして持って行ってくださいな。IE6でもしっかり確認しました。“root” is null or not objectとかいうエラーも吐き出しません。もし間違いなどありましたら、是非コメントでお願いします。

テンプレート

  • 修正 9/16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <title>タイトル</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js"></script>
  <script type="text/javascript">
    // サーバに置いてあるページに直接来られたら、リダイレクトさせてfacebookページに戻す処理
    if(self == top){
      top.window.location = 'http://www.facebook.com/facebookページのURLを入力';
    }
  </script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
  FB.init({
    appId: 'ここにアプリのID',
    status: true,
    cookie: true,
    xfbml: true
  });
  FB.Canvas.setAutoResize();
  FB.Canvas.setSize({ height: ここにコンテンツの高さ });
</script>

  <!-- ここから作りたいHTMLを書いていく -->

</body>
</html>

下の方に参考記事一覧を載せていますが、一番勉強になるのはやはり実際にあがってるサイトのソースを読むことです。
参考になるサイトは、できるだけ最近ローンチされたページにしたほうがいいでしょう。少し前のfacebookページだと、FBMLというfacebookが独自で作ったマークアップ言語で作られていたので、今主流のiframeのソースではないので参考になりません。
実際に自分が参考にさせてもらった、または参考になるfacebookページを載せておきます。

Google Chromeだと、facebookページのなかで右クリックして、「フレーム内のソースを見る」でソースを確認できます。

まだ解決していないバグ

そうです。まだ解決していないところもあるのです。

MacのFireFoxのページ内アンカーリンクのバグ
リンクをクリックしても、なぜかMacのFireFoxのアンカーリンクだけ効かないのです。(facebookというより、ifrmeのバグです。)
様々な方法で試しているのですが、どうしてもこのバグだけ治らないです。
もし解決している方がいましたら、是非コメントなりでお知らせください。すごく喜びます。

参考にさせてもらった記事一覧