事の発端は、自分で運営するホームページをfacebookページ内に表示させること
が出来ないものか?ってことから色々調べてみたら、
直接フェイスブック内にHTMLを書くことが出来ない とのことなので、その手立て
として「インラインフレーム」という方法なら可能らしく、かいつまんでその手順を
自分用にメモ書きします。
1. 自分で借りているサーバーに、facebookページ内に表示させたいホームページ
(htmlファイル)を前もってアップロード
※「https」で表示できるサーバでなければいけない。(SSLが可能であること)
当方が利用しているサーバーは「XREA」で、独自ドメインを取得しています。
URL「https://」を知る方法は、別ページで説明します。→ XREA:SSL表示
ページ幅は指定あり。
横は固定サイズ(520px か 810px)
縦は自由(800px以上はスクロールバーが表示される)
横幅の固定サイズ以上のファイルサイズはスクロールバーは表示される。
2. Facebookページ内(ページタブ)に表示させるためにアプリを作る
※1ページにつき1アプリ作成が原則。
手順1. フェイスブックにログイン後 https://developers.facebook.com/ に
アクセスし、ヘッダーの「Apps」を選択。
![facebookページにHTMLを記述する方法 2013 091501 400x17 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091501-400x17.png)
手順2. 新しいアプリを作成を選択 クリックして先に進む
![facebookページにHTMLを記述する方法 2013 091502 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091502.png)
手順3. 適当にアプリ名を記述し、アプリのカテゴリはその他で「続行」
![facebookページにHTMLを記述する方法 2013 091503 400x130 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091503-400x130.png)
手順4. 表示されたページ「基本設定」はページタブだけいじる
”ページタブ名” ・ ”Page Tab URL” ・ ”Secure Page Tab URL” 3箇所記述。
※”Page Tab Width”はページの表示幅。
”Secure Page Tab URL”は「https:」から始まるURL → XREA:SSL表示
3. facebookページ(ページタブ)にアプリを表示させる
アプリを作ったはいいが、facebookページには追加するボタンは現状ありません。
よってアドレス(URL)を直接打ち込んで追加するページを表示させます。
https://www.facebook.com/dialog/pagetab?app_id=××××&next=●●●●
××××には App ID を記述 ●●●●には Secure Page Tab URL を記述
![facebookページにHTMLを記述する方法 2013 091507 400x304 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091507-400x304.png)
表示された「ページのページタブを追加」をクリック↓
![facebookページにHTMLを記述する方法 2013 091508 400x167 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091508-400x167.png)
*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/
通常上記設定でアプリはfacebookページに追加されるはずですが
多分エラーでます。
*/*//*/*/*/*/*/*/*/*/*/*/*/*/*/*/
![facebookページにHTMLを記述する方法 2013 0915081 400x167 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_0915081-400x167.png)
どうやらhtmlファイルはフェイスブックページでは表示されないことが判明。
その対処としてenqu.htmlの拡張子をenqu.phpに変更する。
変更の際メッセージが出ても無視して「はい」する。
![facebookページにHTMLを記述する方法 2013 091509 400x148 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091509-400x148.png)
拡張子を.phpに変更したファイルをサーバーにアップロードし、
アプリの基本設定URLを変更する。
![facebookページにHTMLを記述する方法 2013 091512 400x175 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091512-400x175.png)
以上の設定でフェイスブックページのページタブ表示され、自作htmlもフレーム内に表示
されと思います。実際のページはこんな感じ。
![facebookページにHTMLを記述する方法 2013 091513 369x400 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091513-369x400.png)
※ htmlをphpに変換した場合注意しなければいけないことがあります。
htmlを作成する場合“W3C” ではXML宣言 をするように強く求められています。
例えば次のようなもの。 <?xml version=”1.0″ encoding=”UTF-8″?>
しかしfacebookページに表示させる場合、この記述をするとエラーします。
![facebookページにHTMLを記述する方法 2013 091510 400x115 facebookページにHTMLを記述する方法](https://www.hcz.jp/blog/wp-content/uploads/2013/09/2013_091510-400x115.png)
よって、htmlをphpに変換する場合xml宣言を削除しなければいけません。
以上