iFrameによるFacebookページ作成法と6つのポイント

今回はiFrameを使ってFacebookページを自由にカスタマイズする方法を紹介します。Facebookページ自体はログインした状態で「Facebookページを作成」にアクセスすると作成することができます。

今まではFBMLというFacebook独自の言語を使っていたのですが、現在はiFrame（インラインフレーム）に移行されています。ということで、上の赤い部分に、自分で用意したサーバーのページを表示するということになります。

移行の理由はよく知りませんが、iFrameだとユーザーがサーバーを用意しないといけないので、やはりサーバーの負担を考えてなのでしょうか。

個人的にインラインフレームはあまり好きではないのですが、わけの分からないFBMLなんて言語を勉強するより、使い勝手はいいです。

iFrameへの変更にはこんなメリットがあるかなと思います。

• 今までの知識でページを作成できる
• phpなどのサーバーサイドスクリプトが使用できる
• Google Analyticsのトラッキングコードが追加できる

アプリの登録

iFrameによるページを設置するにはアプリとして作成しますので登録が必要となります。アプリは申請しない限り公開されません。

登録の際にインラインフレームで読み込むページのアドレスが必要となるため、ページ内容は後でもいいのでアドレスだけは決めておきましょう。

ではまず、アプリケーションを作成ページにアクセスします。

アプリケーション名を入力し、規約に同意します。

するとセキュリティチェックが必要となります。

次から具体的にアプリケーションの内容を編集します。

左にタブがあり色々編集できますが、とりあえずは登録に最低限必要な「about」と「Facebook Integration」を紹介します。

• アイコン　-　16×16サイズでサイドに表示されます
• ロゴ　-　75×75サイズですが公開しないしあまり必要ないかも
• メールアドレスは登録されているものが最初から入力されてます

• Canvas Page　-　アプリのベースURL。小文字で他のアプリとかぶらないよう設定します。
• Canvas URL　-　iFrame内で読み込むページのURL。最後は「/(スラッシュ)」で終わるようにしてください。
• Canvas Type　-　もちろん「iframe」にチェック
• iFrameサイズ　-　スクロールバー嫌いなので「Auto-resize」に
• タブ名　-　Facebookページ左側のメニューに表示される名前です

これで、登録は完了です。Directory Statusはアプリディレクトリへの登録に関するものですので、未提出で構いません。

次に「Application Profile Page」から作成したアプリを自分のFacebookページに追加します。

アプリのページに移動し、左下の「マイページへ追加」をクリックすると、自分のFacebookページの一覧が表示されますのでアプリを追加したいページをクリック。

これで、作成したアプリ（自分が別サーバーで作ったページ）がFacebookページに表示されます。

iFrameで読み込むページについて4つのポイント

ここから、iFrameで読み込むページについて個人的に注意したいと思うところを紹介します。

1. 拡張子はphpでないといけないかも

iFrameで読み込むファイルについて、最初は拡張子をhtmlにしていたのですが表示されず、その後たまたまphpを使用することになったので表示されました。

ただし、これはサーバーによって違うかも知れません。

ちなみに私はsakuraを使っています。sakuraはiframeによるFacebookページに使えないという記事を見たこともありますが、単に拡張子の問題だったのかもしれません。

とにかく、もしhtmlで表示されない場合はphpをお試しください。

2. ページサイズは520px

作成するページの横幅は520pxとなります。

縦は自由ですが、後で紹介するように長くなるとスクロールが現れてしまいます。

ちなみに私は以下のようにcssを設定しています。520pxは設定してもしなくてもいいですが。。

body {
  padding:0;
  margin:0;
  width:520px;
}

この設定で520pxの画像を挿入するとぴったり表示されます。

3. 縦にスクロールバーが表示される場合の対応

ページが縦に長くなると、スクロールが出てしまいます。

縦にスクロールが出ることで、その分横幅も狭くなり、横のスクロールまで出てしまいます。さすがにかっこ悪いですね。

そんなときはiFrameで読み込むファイルに以下のコードを挿入すれば解決です。

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  FB.init({ 
    appId : 'アプリID',
    status : true, // check login status
    cookie : true, // enable cookies
    xfbml : true, // parse XFBML
    logging : true
  });
  FB.Canvas.setAutoResize();
</script>

headでこのjavascriptを読み込み、body内の一番下に以下のコードを挿入します。

<div id="fb-root"></div>
<script>
  FB.Canvas.setSize({ width: 520, height: 1450 });
</script>

widthは520でいいと思いますが、heightはコンテンツの長さにより各自設定してください。

4. リンクターゲットに注意

iframeなんて久しぶりに使ったのでリンクターゲットの設定をうっかり忘れていました。

何も設定しないとフレーム内にリンク先のページが表示されてしまいます。

ということで、aタグ内にどらかを追加してあげましょう。

target="_parent" // 親フレームに表示

target="_blank" // 別フレームに表示

基本的なことですが忘れると恥ずかしいです。

Facebookページの設定について2つのポイント

1. デフォルトページに設定しましょう

最初はウォールがFacebookページのデフォルトページになっていますが、「権限の管理」から変更することができます

せっかくですので、作ったアプリをデフォルトページにしましょう

2.年齢制限するとログインしないと見れない

Facebookページはmixiと違いログインしなくても見ることができます。

ログインの必要ないということで、Google等の検索エンジンの検索対象にもなります。

ただし、閲覧制限を自分でかけてしまうとログインしないと表示されません。

今後Facebookページの作成はiFrame中心になるかと思いますが、サーバーを持っていない人にとっては不便ですし、細かいバグも色々あるようです。

何かだらだらとなってしまいましたが、参考になれば幸いです。