facebookページにHTMLを記述する方法
2013年9月15日
事の発端は、自分で運営するホームページを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」を選択。
手順2. 新しいアプリを作成を選択 クリックして先に進む
手順3. 適当にアプリ名を記述し、アプリのカテゴリはその他で「続行」
手順4. 表示されたページ「基本設定」はページタブだけいじる
”ページタブ名” ・ ”Page Tab URL” ・ ”Secure Page Tab URL” ３箇所記述。
※”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ファイルはフェイスブックページでは表示されないことが判明。
その対処としてenqu.htmlの拡張子をenqu.phpに変更する。
変更の際メッセージが出ても無視して「はい」する。
拡張子を.phpに変更したファイルをサーバーにアップロードし、
アプリの基本設定ＵＲＬを変更する。
以上の設定でフェイスブックページのページタブ表示され、自作htmlもフレーム内に表示
されと思います。実際のページはこんな感じ。
※ htmlをphpに変換した場合注意しなければいけないことがあります。
ｈｔｍｌを作成する場合“Ｗ3Ｃ” ではXML宣言 をするように強く求められています。
例えば次のようなもの。 <?xml version=”1.0″ encoding=”UTF-8″?>
しかしfacebookページに表示させる場合、この記述をするとエラーします。
よって、htmlをphpに変換する場合xml宣言を削除しなければいけません。
以上
コメントを残す