岐阜ホームページ制作 アイ・ラボ

いよいよオリジナルのコンテンツをfacebookに掲載します。

facebookへの掲載は『アプリケーションを開発する』という言い方をします。

大変敷居が高そうな表現ですが、facebookにオリジナルコンテンツを掲載するのは何もウェブページだけに限りません。

ちょっとしたゲームを作って掲載したりクーポンを発行したりと、それぞれ様々なコンテンツを登録しています。

facebookではウェブページを含めたこれらのコンテンツをiframeを使ってオリジナルコンテンツを表示します。

iframeとはインナーフレーム、サイト内に別枠を設けてコンテンツを表示させることです。右側・下側とは別にサイト内にスクロールバーのあるサイト、見たこと有りませんか?あれがiframeです。

アプリの登録に絶対に必要なもの(事前準備)

 

 1.掲載するコンテンツ

 2.SSLが使えるサーバ

 3.facebookのユーザ認証

 

上記の3つ、必須です。順に解説します。

1.掲載するコンテンツ

コンテンツは予め用意しておきましょう。

アプリの登録はコンテンツのURLを設定して、facebookサイドが本当に設定されたURLにコンテンツが存在するか判断した上で、はじめて登録が可能になります。

 

2.SSLが使えるサーバ

SSLとはセキュリティ上の暗号化技術のこと。httpsで始まるサイトがSSLに対応したサイトです。

コンテンツが置いてあるサーバが、SSLに対応している必要があります。

今のところレンタルサーバの共有SSLでも登録できます。

 

3.facebookのユーザ認証

新規にfacebookに登録する場合は携帯電話での認証が必須になっているようですが、以前からのユーザは認証をしておく必要があります。

筆者自身ユーザ認証は随分以前ですのでこの場で再現することができません(忘れました^-^;)。

『facebook ユーザ認証』でググると紹介しているサイトが出てくると思います。

ただ、アプリの登録を進めていくうちにユーザ認証を促すダイアログが必ず出てきます。ダイアログに従って認証をおこなえばよいかと思います。

 

アプリの登録(オリジナルコンテンツの登録)

オリジナルのウェブページを表示するコトを目的に説明を進めます。

facebookにアクセスし、ページの下部、『開発』をクリックします。

 

『開発』をクリックするとデベロッパーページに飛びます。

『アプリ』をクリックします。

 

 

これはアプリをクリックした時の筆者の画面です。

既にwelcome用のページが登録してあるのでその内容が掲載されていますが、はじめてこのページアクセスした方は真っ白になっていると思います。

かわりに右上の『新しいアプリケーションを作成』のボタンが青で表示されています。

このボタンをクリックします。

 

ダイアログが表示されます。

『app name』は必須です。作成するページ名を入力します。

これはアプリ名でページ名ではありません。自身のわかり易い名前をつけましょう。

ネーミングに問題がなければ右側にグリーンで『valid(有効)』と表示されます。

facebookの規約に同意する欄にチェックを入れ、『続行』をクリックします。

 

セキュリティチェックのダイアログになります。

ここでは読みにくい画像に書かれた文字を入力して『送信』をクリックします。

 

facebookのユーザ認証がまだの場合、ここでエラーメッセージが出ます。

ダイアログの指示に従ってユーザ認証をすすめて下さい。

ユーザ認証が完了した後、このページ戻れるとは限りません。もし、いつもの個人ページになどに戻った場合は、再度『開発』からはじめて下さい。

 

セキュリティチェックが完了するといよいよアプリの登録です。

絶対に入力しなければならないのは1箇所のみ。『ページタブ』の欄です。

 

『ページタブ』をクリックすると下図のように4項目の入力欄が開きます。

一番上、『ページタブ名』は実際にメニューに表示される名前です。今回は『テストページ1』とつけました。

2番目はコンテンツがアップロードされているURLです。ここはhttp://から始まるURLを記入します。

3番目はセキュアページのURLです。セキュアページとはSSLで保護されたページのことで、https://から始まるURLを記入します。

レンタルサーバで、共有SSLをバーチャルURLでサービスしているところがありますが、必ず正規のURLで入力して下さい。

 

バーチャルURLとは様々な解釈がありますがこの場合、共有SSLを独自ドメインでアクセスできるようにしているサービスです。

たとえばRENTAL-SERVER.co.jpというドメインのレンタルサーバでexample.comというドメインのサイトを運営している場合、共有SSLを利用すると

https://SECURE_SERVER_NAME.co.jp/USERNAME/example.html

といったURLになるところを、

https://example.com/example.html

といったURLでアクセスできるようにするサービスです。

この場合、バーチャルURLでアクセスするとブラウザによってSSLエラーを返します。

 

以上、3点の入力が完了したら、一番下の『変更を保存』をクリックします。

 

次に左上メニュー、『設定』の欄の『詳細設定』を開きます。

このページは全く触らなくてもオリジナルコンテンツは表示されます。

ただ、ベターな設定として『移行』の欄の『deprecate offline_acces』は、無効にしたほうが良いようです。

また、制作したコンテンツが『いいね』ボタンによって変わるようなコンテンツならPrivacyPolicyは必要です。プライバシーポリシーのページを作ってURLを設定してください。

これはおそらく今後必須項目になる可能性が大です。

 

ここまでで入力項目は終わりですが、以前はここで左側メニューに『アプリのプロフィールページを見る』というメニューがあり(以前の記事参照)、今はこの項目はなくなっています。

ちなみに以前作成したアプリにはまだ『アプリのプロフィールページを見る』というメニューは存在し、クリックすると下の画像のようになります。

『ページを削除して下さい』というエラーメッセージが表示されます。

 

この状態のままでは新たに作ったアプリはfacebookページに表示されません。

そこで新たに設定ページに移動してfacebookページに表示させます。

この場合直接URLを打ち込むことになります。

https://www.facebook.com/dialog/pagetab?app_id=APP_ID&next=YOUR_URL

 

APP_IDは先ほどページタブを設定したページ、基本設定の上部に表示される15桁の数字です。

YOUR_URLはhttp://で始まるURLに置き換えます。

 

ページにアクセスすると下記のようなダイアログが表示されます。

 

プルダウンメニューで掲載したいfacebookページを選択します。

 

『ページタブを追加』をクリックします。

自身が作ったコンテンツのURLに飛びます。以上で設定は完了です。

 

実際にどう表示されるか見てみます。

左に『テストページ1』というメニューが表示されてコンテンツも表示されました。ここから実際のページが確認できます。

 

登録の方法は以上です。

が、お気づきでしょうか?facebookページの中にスクロールバーが表示されてしまいました。

facebookページのiflameは520px × 800pxに固定されています。

 

次回はこの規制を外す方法なども含め、オリジナルコンテンツの作り方を解説します。