Facebookページの作成 第1回『iframe対応ページ追加』

Facebookページ制作

今回から3回に分けて、当ブログのFacebookページを制作した手順をご紹介したいと思います。

• 第1回目は『iframe』に対応したページの制作方法を紹介します。
• 第2回目はFacebookページからスクロールバーを非表示にする方法を紹介します。
• 第3回目は『Static HTML Iframe Tab 』アプリを紹介します。

尚、今回の『iframe』に対応したページの制作方法でオリジナルページは作れるのですが、｢https｣でアクセスした場合にSSLサーバーを用意できないとFacebookページが上手く表示されないようです。実際に私もこの現象に遭遇しました・・・。
※2011年10月1日から仕様が変更になり『https』の対応が必須になりました。SSLの対応方法はこちらの記事を参考にしてください。
そこでこの問題の回避方法として、第3回に『Static HTML Iframe Tab 』アプリを紹介したいと思っています。

新規Facebookページ作成

Step01

まずは、新規にFacebookページを作成します。
http://www.facebook.com/pages/create.php

上記のリンク先で｢地域ビジネス/会社名または団体名 / ブランドまたは製品 / アーティスト、バンドまた著名人 / 芸能・エンタメ / 慈善活動またはコミュニテイ｣の6っつのカテゴリーから制作予定ページに一番近いカテゴリーを選択してページを制作してください。

尚、ページ作成時にFacebookページ名を記入しますが、｢いいね｣が100名を超えるまでは変更可能です。

Step02

Facebookページを作成すると下の画像ような画面が表示されます。ここでは3ステップで簡単な設定をするように促してくれます。

まずはプロフィール写真の設定です。画像はサイトから読込むか、PCから画像をアップロードするかのどちらかを選択します。画像のアップロードが完了するとプレビューされるので合っているかを確認して次のステップへ進んでください。

次のステップでは友達に作成したページを紹介することができます。

最後のステップではページの基本データを編集します。もしウェブサイトがあるようでしたらURLを登録することができます。

尚、この3ステップの設定は後からでも編集可能なのでスキップしても問題ありません。それでは『続行』ボタンをクリックして設定を完了します。

Step03

3ステップの設定完了後、Facebookページのスタート画面が表示されると思います。この画面の右上にある『Facebookページを編集』をクリックすることでページの編集画面に移動できます。

移動すると左側に複数のタブメニューが表示されています。各種設定をページに合った内容に変更します。

以上で基本設定は完了です。次はこの記事の本題でもあります『iframe』を使ってオリジナルページを追加したいと思います。

『iframe』によるオリジナルページの作成

オリジナルページを作成する場合、iframeで読み込むコンテンツ部分の内容を先に決めておく必要があります。このコンテンツ部分の最大サイズは幅520px、縦800pxになり、これ以上のサイズではスクロールバーが表示されます。ただし、このスクロールバーはJavaScriptを使うことで非表示にすることができます。

コンテンツを制作したら、ファイルをサーバーにアップします。私は今回『hello.html』を用意してアップしました。ただしファイルをアップする場合、できればSSLサーバーを用意すほうが良いようです。もしSSLサーバーで無く『https』でアクセスすると下の画像のような表示がされるので注意してください。
※2011年10月1日から仕様が変更になり『https』の対応が必須になりました。SSLの対応方法はこちらの記事を参考にしてください。

※尚、これを回避するアプリケーションを第3回目でご紹介したいと思います。

Step01

コンテンツ部分の内容が確定したら、オリジナルページを制作していきます。Facebookでは『iframe』のページを1つのアプリケーションとして扱います。オリジナルタブを増やすためにまずはFaceBookアプリケーションの登録を行います。

開発者ページ
http://www.facebook.com/developers/

上記のページ右上の『+Set Up New App』ボタンをクリックして開発者登録を行ってください。登録には『携帯電話のアドレス』もしくは『クレジットカード番号』が必要になります。私の場合は携帯アドレスで登録をしました。登録後に登録番号を求める画面が表示されます。携帯電話には登録番号が記されたメールが届くので、その番号を入力欄に入れて完了です。

Step02

次にアプリケーションを制作するためにアプリケーション作成ページにいきます。

アプリケーションを作成ページ
https://www.facebook.com/developers/createapp.php

アプリケーション名を入力し『同意する』を選択したら、『アプリケーションを作成』ボタンをクリックしてください。

『アプリケーションを作成』ボタンをクリックした後にセキュリティチェックを行います。表示されている文字を入力してください。

Step03

セキュリティチェック後は、アプリケーションの編集ページが表示されます。左のタブメニューから『Facebook Integration』を選択してください。ここで『iframe』で追加するコンテンツ情報を入力します。

まずは『キャンバス』の内容を決めます。

次は『Page Tabs』の設定です。

赤枠内の設定が完了したら『変更を保存』をクリックしてください。

Step04

『変更を保存』ボタンをクリック後に『マイアプリ』ページが表示されます。ページ右側に『Application Profile Page』という項目があるのでクリックしてアプリページを表示してください。

Step05

アプリケーションプロフィールページへ移動したら、左メニューの『マイページへ追加』をクリックします。

クリック後に画面上には、Facebookページやアプリケーションページが表示されるのでアプリを追加したいページの右側にある『Facebookページに追加』をクリックします。

Step06

Facebookページに戻りページが追加されているかを確認します。

Step03の『Page Tabs』のタブ名設定で『ようこそ！』と名前を入れていたので『ようこそ！』のタブが表示されています。最後の確認でクリックしてみます。ページに設定したコンテンツが表示されていれば完了です。

尚、ここでコンテンツ内容が幅520px、縦800pxを超えていると下画像のようにスクロールバーが表示されます。

次回の第2回は、このスクロールバーを非表示にする方法を紹介したいと思います。

参考サイト：

• iframe対応！初めてのFacebookページの作り方　【ASCII.jp】