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

以前書いた「iFrameによるFacebookページ作成法と6つのポイント」という記事のアクセス数が結構あるのですが、Facebookページの仕様がコロコロ変わるため内容が古くなってしまっています。

ということで、今回記事を作り直してみました。参考になれば幸いです。

fb2-8.png

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

fb2-1.png

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

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

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

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

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

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

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

fb2-1.png

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

fb2-1.png

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

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

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

fb2-2_20120318221144.png

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

fb2-1.png

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

You must also specify a Secure Page Tab URL which is the HTTPS address of your content. Users browsing Facebook who have HTTPS enabled will be unable to use your tab if this URL is empty. Note that SSL support for your page tab app has been mandatory since October 1, 2011.
「Secure Page Tab URL」の欄に、httpsで始まるコンテンツのアドレスを入力する必要があります。もし、URLを入力していない場合、セキュアな接続でFacebookを閲覧しているユーザーはページタブアプリを見ることができません。ページタブアプリのSSL対応は2011年10月1日以降義務化されているので注意してください。
 ※ Page Tab Tutorial - Facebook開発者より

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

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

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

facebook-runtime-page1.png

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

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

fb2-1.png

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

facebook-runtime-page4.png

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

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

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

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

fb2-5.png

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

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

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

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

コンテンツの横幅に注意

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

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

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

やっぱりphpで作ろう

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

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

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

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

fb2-6.png

解決するには、</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内にリンク先が表示されます。

fb2-7.png
target="_parent" // 親フレームに表示
target="_blank" // 別フレームに表示

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

『a 要素と area 要素の target 属性は非推奨ではなくなりました。これは iframe など、Web アプリケーションにおいて役立つものであるからです』
参考:HTML5 における HTML4 からの変更点

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

最後に

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
とても魅力的な記事でした!!
また遊びに来ます!!
ありがとうございます。。
【2012/03/30 15:42】 | 職務経歴書の作成 #- | [edit]
以前と仕様が変わり、自作アプリの追加方法がわからず、一日悩みましたが、なんとURLに直接記述するとは・・・大変たすかりました。
【2012/03/30 20:21】 | - #- | [edit]
こんばんは

この記事がお役に立てたようで嬉しいです。
仕様がコロコロ変わるのでほんと困ったものですよね。

アプリの追加方法は私もだいぶ困りました。

今後もよろしくお願いします~。
【2012/03/30 23:58】 | 管理人 #E2ywrYdA | [edit]
こんにちは、有難う御座います。
無事追加することができました。

一つ質問があるのですが、友達招待のボタンを設置したりできるのでしょうか?

よろしくお願い致します。
【2012/06/30 16:41】 | まいど~♪ #- | [edit]
#宜しくお願いします。
【2013/08/11 19:58】 | 高峰関次郎 #GRfp8Qb6 | [edit]
高峰さま

コメントありがとうございます。
こちらこそよろしくお願いします!
【2013/08/12 06:07】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加