IFrameで既存サイト表示

◼︎既存のサイトをfacebookページに表示する

既存のサイトをfacebook内に表示する場合、IFrameという仕組みを使って表示します。

IFrameを使うと、一つのwebサイトページから読み込んだ内容を表示させることが可能なので、外部のwebサーバーに設置したファイルを読み込んで表示することができます。

この場合は、自分でアプリを作成して、facebookページに登録することになります。IFrameを利用するにはいくつか条件があります。

  • 外部に公開されたSSL通信対応のwebサーバーが必須

IFrameを使ってページを作成するには外部に公開されているwebサーバーがなければIFrameを使っtfacebookページを自分の好きなように作成できないということです。しかも、このwebサーバーはセキュア通信に対応している必要があります。SSL通信に対応している必要があります。SSL通信に対応するには有効なサーバー証明書を取得してinstallする必要があります。

  • 開発者登録

IFrameによるページの作成はfacebookアプリケーションの追加という扱いになるため、最初に開発者として登録する必要があります。facebookアプリの開発者登録をしていない場合は開発者登録をしましょう。

会派者ページにアクセスして丈夫メニューの「アプリ」をクリックすして上部メニューの「アプリ」をクリックすると開発者というアプリの認証画面が表示されるので「許可する」ボタンをクリックします。その後、携帯電話番号またはクレ10tおカード番号を使って本人認証を求められることがあります。

  • webサーバー側に表示するファイルを用意する

webサーバーに適当なディレクトリを容姿して表示するファイルまたはPHPファイルを格納しましょう。IFrameの表示サイズは520ピクセルまたは810ピクセル何尾で、どちらかのサイズでデザインすると良いでしょう。

◼︎開発者向けページでアプリ名を入力する

開発者向けページにアクセスする

上部のメニューから「アプリ」をクリックする

「+新しいアプリケーションを作成」ボタンをクリックする

「create new app」画面が表示される

「app name」に任意のアプリ名を入力する

「続行」ボタンをクリックする→app namespece、 web hostingは設定しなくても良いapp namespace は設定しなくても構いません。web hosting のIFrameアプリの場合は特に必要ないので、チェックを入れないでください。

セキュリティチェックのウィンドウが表示される

表示される文字列を入力し、送信ボタンをクリックする

◼︎アプリの基本設定を行う

①アプリの基本設定画面が表示される

→重要なapp ID

ここで表示される「app ID」は後で必要になるので、メモしておいてください。

②ページたぶをクリックする

③画面をスクロールして下の項目を設定する

・secure page tab URL

Iframeで表示するファイルのURL。httpsで始まること

・page tab width

ページタブの幅。

④変更を保存ボタンをクリックする


◼︎facebookページに追加して表示を確認する

ブラウザでURLにアクセスする

ページたぶを追加画面が表示されるので、アプリを追加するfacebookページを選択する

ページたぶを追加ボタンをクリックする

facebookページを表示すると、アプリメニューに追加したアプリが表示されているのがわかる。「welcome」をクリックする

正しく表示されることを確認する

→表示が反映されるまでに時間がかかることも。

アプリを新しく追加した時は表示が反映されるまで時間がかかる場合があります。表示が反映されない時はしばらく待ってからもう一度表示してみてください。