ページタブアプリ(iframe)の作成とFacebookページへの追加方法

名称自体もコロコロ変わっていますが、ページタブというアプリの種類なので「ページタブアプリ」と呼ぶようにします。

「ページタブアプリ」は、上の部分をインラインフレーム（iframe）で表示することになります。iframeの中身は自分でサーバーを用意しますので、自由にコンテンツを作成することができます。

この「ページタブアプリ」の作成方法と、Facebookページへの追加方法がこの記事の内容になります。

Facebookページをまだ作っていないという方は、こちらから簡単に作ることができます。

すでにお持ちの方も多いと思いますし、設定自体簡単ですのでFacebookページ自体の登録方法は割愛させていただきます。

ページタブアプリの作成方法

まず、Facebook開発者にアクセスしましょう。

右上にある「新しいアプリケーションを作成」をクリック。

アプリの名称を入力します。

Herokuを使ってiframe内のコンテンツを作成する場合、下の「Web Hosting」にチェックします。

Herokuは、ウェブサービスのホスティングサービスですが、私は使ったことがないので、ここからは自分でサーバーを用意することを前提に説明を続けます。

セキュリティチェックをします。ほんと見にくいです。

ページタブをクリックして内容を入力します。

今まで私は、http:// で始まるURLのみ「Page Tab URL」の欄に登録していたのですが、セキュアな接続をしているユーザーが閲覧した場合に備え、https:// で始まるURLに対応したセキュアなページも用意する必要があるみたいです。

私が使っているsakuraインターネットは、ライトプラン以外ならSSLが使えるのでhttps:// で始まるURLも大丈夫でした。

私の場合、「Page Tab URL」と「Secure Page Tab URL」を両方入力しないと表示されませんでした。ここらへんはサーバーによって違いがあるかもしれません。

あと、今まで横幅は520pxでしたが、520pxと810pxから選べるようになっています。

520pxだと左右にスペースができますので810pxの方がいいと思います。

次に、アイコンとロゴを設定します。アイコンは16x16、ロゴは75x75です。

今回のタイムライン化に伴い、ロゴがFacebookページのトップに表示されるようになりました。

最後に作ったページタブアプリをFacebookページに表示するのですが、ここが一番悩むところだと思います。

アプリIDと自分で用意したインラインフレーム内のURLを使った以下のアドレスにアクセスします。

で、どのFacebookページに追加するかを指定すれば完了です。

どうでしたか？私は以前との違いにびっくりでした。公式解説ページもありますが、内容が仕様の変化に追いついていない状態です。

ということで、ページタブアプリの作成と登録について説明しました。

インラインフレーム内の作成方法

インラインフレーム内は通常のサイトと同じように作成するだけですのですが、少しだけ注意点がありますので紹介します。

コンテンツの横幅に注意

まず、横幅は810pxと520pxから選べますが、どちらにせよインラインフレーム内のコンテンツが大きくなりすぎないようにしなくてはいけません。

body {
  width:810px;
  padding:0;
  margin:0;
  overflow: hidden;
}

絶対こうというわけではないですが、参考程度に。念のためoverflow: hidden;を入れておいた方がいいですかね。

やっぱりphpで作ろう

以前もiframeで表示するコンテンツは、HTMLではなくphpでないといけないと紹介しました。

今回、念のためHTMLでも表示されるか再確認しましたがやっぱりダメでした。別にphpを使う必要はないのですが、拡張子はphpにしましょう。

スクロールバーが表示されてしまう

コンテンツが画面より長くなると、スクロールバーが表示されてしまいます。

解決するには、</body>の直前に以下のコードを挿入しましょう。

<div id="fb-root"></div>

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({ 
appId : 'アプリのID'
});
FB.Canvas.setAutoResize();
</script>
<script>
  FB.Canvas.setSize({ width: Fluid, height: Fluid });
</script>

アプリのIDは基本設定の画面等で表示されている15個（私の場合）の数字です。

リンクターゲットに注意

インラインフレームなのでリンクターゲットには注意する必要があります。何も設定しないとiframe内にリンク先が表示されます。

target属性に抵抗を感じる方もいるかもしれませんが、HTML5から非推奨ではなくなりましたし、iframeの場合仕方ないですよね。

ちなみに私は親フレームに表示しています。

最後に

ということで、ページタブアプリの作成方法とFacebookページにに追加する方法を解説しました。最初にも言いましたが、Facebookは仕様がコロコロ変わるので、この記事もいつまで使えるかわかりませんが参考になれば嬉しいです。