インラインフレーム

facebookページにHTMLを記述する方法

Categories | ホームページ facebook

事の発端は、自分で運営するホームページを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」を選択。

2013 091501 400x17 facebookページにHTMLを記述する方法

手順2. 新しいアプリを作成を選択 クリックして先に進む

2013 091502 facebookページにHTMLを記述する方法

手順3. 適当にアプリ名を記述し、アプリのカテゴリはその他で「続行」

2013 091503 400x130 facebookページにHTMLを記述する方法

手順4. 表示されたページ「基本設定」はページタブだけいじる

”ページタブ名” ・ ”Page Tab URL” ・ ”Secure Page Tab URL”  3箇所記述。 

2013 091505 400x158 facebookページにHTMLを記述する方法※”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 を記述

2013 091507 400x304 facebookページにHTMLを記述する方法

表示された「ページのページタブを追加」をクリック↓

2013 091508 400x167 facebookページにHTMLを記述する方法

*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/

通常上記設定でアプリはfacebookページに追加されるはずですが

多分エラーでます。

*/*//*/*/*/*/*/*/*/*/*/*/*/*/*/*/

2013 0915081 400x167 facebookページにHTMLを記述する方法

どうやらhtmlファイルはフェイスブックページでは表示されないことが判明。

その対処としてenqu.htmlの拡張子をenqu.phpに変更する。

変更の際メッセージが出ても無視して「はい」する。

2013 091509 400x148 facebookページにHTMLを記述する方法

拡張子を.phpに変更したファイルをサーバーにアップロードし、

アプリの基本設定URLを変更する。

2013 091512 400x175 facebookページにHTMLを記述する方法

以上の設定でフェイスブックページのページタブ表示され、自作htmlもフレーム内に表示

されと思います。実際のページはこんな感じ。

2013 091513 369x400 facebookページにHTMLを記述する方法

※ htmlをphpに変換した場合注意しなければいけないことがあります。

htmlを作成する場合“W3C” ではXML宣言 をするように強く求められています。

例えば次のようなもの。 <?xml version=”1.0″ encoding=”UTF-8″?>

しかしfacebookページに表示させる場合、この記述をするとエラーします。

2013 091510 400x115 facebookページにHTMLを記述する方法

よって、htmlをphpに変換する場合xml宣言を削除しなければいけません。

以上

Comment(0) | Trackback(0)

TAGS: / / / / / | 2013年9月15日 |