HOME > Wordpress > Facebook > FacebookページにiFrameを設定する方法

FacebookページにiFrameを設定する方法 2011年3月4日
Tag: | |

Facebookは、3月11日以降、FBMLによるページのカスタマイズをするのに必要な「スタティックFBML」というアプリケーションを新規に追加することができなくなるそうです。今後はiFrameでのページ作りになりますが、その為に必要なiFrameアプリを追加する方法です。

１．まず、初めてアプリを登録する人は開発者登録をする必要があります。

開発者ページにて登録を済ませて下さい。

２．許可するボタンをクリックすると画面が遷移しますので、右端の「Create one.」をクリックします。

次に開発者の認証を促されますので、携帯電話、もしくはクレジットカードのいずれかで認証してください。

３．認証が修了したらアプリの開発者ページにもう一度アクセスします。

４．開発者ページの右上の「+Set Up New App」をクリックします。

５．次にアプリケーション名に任意の名前を入力します。

※アプリケーション名にはfacebookの文字は入らないようです。

セキュリティチェックの画面に遷移しますので、入力し、「送信」をクリックしてください。

５．次に遷移したページの右端の「設定を編集」をクリックします。

アプリケーション名：先程設定したアプリケーション名が自動で挿入されています。

５．言語：日本語を選択

ユーザーサポートのアドレス:はメールアドレスにチェックが入っていて、facebookを登録したメールアドレスが自動で挿入されています。

Contact Email:facebookを登録したメールアドレスが自動で挿入されています。

変更を保存で保存します。

６．左のメユーからFacebook Integrationを選択

Canvas Page:facebookのアプリケーションを表示する任意のページ名を付けます。
※半角英数で7文字以上ではないとエラーが出るようです。
Canvas URL:facebookで表示させるファイルの置き場所
[例]サーバーの/contents/というフォルダの中にindex.htmlというファイルを置いた場合は
http://msweb.moo.jp/Contents/になります。
Canvas Type:IFrameを選択
iframeサイズ:iframe内に読み込むコンテンツに合わせてサイズを自動でリサイズするか、スクロールバーを出すかを選択します。
タブ名：facebookページに表示されるボタン名を任意で付けます。
Page Tab Type:IFrameを選択
タブのURL:作成したページが表示されたときに最初に読み込まれるファイル名（index.html、index.phpなど）を指定します。

[例]サーバーに置いたファイルがindex.htmlならindex.htmlと書く。

変更を保存で保存します。

６．アイアプリページから「Application Profile Page」をクリック

７．facebookの作成したアプリ画面に遷移したら左の「マイページへ追加」をクリックして、アプリを登録したい自分のfacebookページを選択します。



自分のアプリを設定したfacebookページの左にアプリのボタンが追加されているはずです。

８．後は自分のサーバーに表示させたいファイルをＵＰロードして下さい。

facebookページにサンプルを表示させてありますので確認してみて下さい。
サンプル