Facebookページを拡充する
公開しているサンプルFacebookページ
今回は、そのFacebookページに、「1からHTMLソースを記述して自由にデザインしたページ」を必要なだけ加え、Facebookページの内容をもっと拡充させてみましょう。
本記事では例として、「ホームページ作成TIPS」という名称のFacebookページを作成する過程を使って解説しています。このFacebookページは実際に以下のURLで公開していますので、覗いてみて下さい。
http://www.facebook.com/hp.tips
Facebookページに、1からHTMLソースを記述した独自のページ(※以下、「独自ページ」と呼びます)を加えるためには、以下のような手順が必要です。
[1] 外部サイトに、Facebookページとして表示させたいHTMLを用意する。
[2] 開発者機能を使って、「独自ページを表示させる」ためのアプリを登録する。
[3] Facebookページに、([2]で作った)アプリを追加する。
今回は、上記の手順を用いて、独自ページをFacebookページに加える方法をご紹介致します。
独自ページを「Facebookページ」上で表示する仕組み
独自に作成したHTMLを、直接Facebookサイト上にアップロードして表示することはできません。「インラインフレーム」という方法を用いて、任意のサーバ上にアップロードしたHTMLファイルに、Facebookの外枠を加えるような形で表示します。外部サイトに置いたページを、インラインフレームで合成
ですから、独自ページをFacebookページに加えるには、どこかにある任意のサーバ上に(独自ページの)HTMLファイルをアップロードしておく必要があります。
例えば、冒頭でご紹介したサンプルFacebookページ内にある「ようこそ!」ページでは、実体のHTMLファイルは以下の場所に置いてあります。facebook.com内にはありません。
http://tomoyo.sakura.ne.jp/sns/facebook/3/
上記のHTMLが、インラインフレームを用いてFacebookページ内に合体されることで、以下のような「ようこそ!」ページができあがります。
http://www.facebook.com/hp.tips/app_469959693019693
SSLを利用できるウェブサーバが必須
また、データを暗号化して送受信する仕組みである「SSL」を使ってアクセス(HTTPではなくHTTPSでアクセス)できる必要があるため、無料のホームページスペースには置けないと考えた方が良いでしょう。アップロード先には、SSLが利用できるサーバを用意して下さい。先ほどご紹介したサンプルFacebookページの実体は、以下の場所にありますが、
http://tomoyo.sakura.ne.jp/sns/facebook/3/
このページは、以下のようにプロトコルをHTTPSにしてもアクセスできます。
https://tomoyo.sakura.ne.jp/sns/facebook/3/
このように、SSLを使ってアクセスできる必要があります。これは、単純に「http://」を「https://」に書き換えれば良いわけではない点に注意して下さい。サーバ側でSSLが利用可能でなければなりません。
SSLは、レンタルサーバ会社が提供している「共有SSL」サービスを利用する方法で構いません。例えば、「さくらインターネット」や「ロリポップ」などのレンタルサーバでは、安価なコースでも共有SSLが利用可能です。
それでは、Facebookページに独自のページを追加する手順を見ていきましょう。