iFrameでFacebookページを自由に

iFrameとは、Inline Frame（インラインフレーム）のこと。

1つのWebページの中にフレームを作って、別のWebページを表示させることができます。
iFrameを使うことにより、HTML、javascript、CSSなどで作成したコンテンツをFacebookページ上に表示することができるので、自由度が高いです。

1）iFrameを利用するには、iFrameの中に表示させるのは別のWebページとなるため、そのWebページを公開するためのSSLというセキュアな接続（https）のWebサーバが必要。


2）iFrameの中に表示するWebページを用意。
iFrame内に表示するHTMLファイル（PHPファイル）を、Webサーバにアップロードしておきます。

コンテンツ内容が幅520px、縦800pxを超えているとスクロールバーが表示される。


3）アプリ開発者として登録する
アカウントにログインした状態で、Facebook開発者ページにアクセスし「アプリの許可」ページが開いたら［許可する］をクリック

■アプリの登録
右上の［+新しいアプリケーションを作成］をクリック
↓
「App Display Name（アプリの表示名）」に任意のアプリケーション名を入力します。
「App Namespace」は空欄で構いません。
Facebookの利用規約を確認し問題なければ「I agree to the Facebook Platform Policies.」にチェックを入れ、「続行」をクリックします。
↓
セキュリティチェックの画面が表示されるので、入力して［送信］
このとき、ユーザーアカウントの認証が済んでいない場合は、「携帯電話番号」もしくは「クレジットカード情報」の 入力による認証が必要です。
↓
アプリケーションの基本設定画面が開きます。
左にタブがあり、色々と編集できるのですが、とりあえず登録に最低限必要な箇所のみ設定をします。


●基本データ
「アプリの表示名」と「連絡先メールアドレス」は初めから入力されています。
その他の項目は空白でも問題ありません。

●アプリをFacebookに結合する方法を選択してください
「Facebook上のアプリ」と「ページタブ」を設定します。
それぞれの項目をクリックすると、入力欄が開きます。

【Facebook上のアプリ】
Canvas Page：
作成したアプリケーションのURL（自由）
キャンバスURL：
iFrameに読み込むファイルを置いてあるサーバのURL。
URLの最後に「/(スラッシュ)」を入力するのを忘れずに。
セキュリティで保護されたキャンバスのURL：上記サーバーのhttpsのURL

【ページタブ】
Page Tab Name：
Facebookの左メニューに表示される名前です。
「ようこそ！」「Welcome!」など、任意の文字列を16文字以内で入力します。
Page Tab URL：
タブをクリックした時にiFrame内に最初に読み込まれるファイル名
（index.html、index.phpなど）を指定します。
Secure Page Tab URL：iFrameで読み込むページのhttpsのURL

「変更を保存」をクリックします。これでページが作成されました。


4）アプリをFacebookページに追加する
左にある「関連リンク」の［アプリのプロフィールページを見る］をクリック
アプリのスタートページが開きます。
↓
左の［マイページへ追加］をクリック
↓
自分の管理しているFacebookページの一覧が開くので、iFrameを追加したいページの［Add to Page］をクリックします。
↓
［閉じる］ボタンで一覧を閉じます。
↓
iFrameを追加したFacebookページにアクセスして、左側にタブが新しいタブが追加されているかを確認。
↓
新しいタブをクリックして、ページが表示されていれば完了。