初心者でも大丈夫！2012年春版_Facebook追加ページ（welcomeページなど）の作り方。
2012年04月27日
先日Facebookの追加ページ作成を行ったのですが
新しいやり方が少々ややこしかったので今回新しいバージョンでまとめてみました。
追加ページ作りたかったけど難しそうと思っていた方や、
作ってみたかったけどどうすればいいんだろうと思っていた方など、ぜひご覧ください！
ではFacebook_追加ページ（welcomeページなど）の作り方をご紹介していきたいと思います！
作成に掛かる前に。
追加ページを作るには自分のサーバーが必要です。
※ifremeを読み込むページのURLが必要になる為サーバが必須となります。
※今回作成する追加ページになります。
画面右下のスタッフ募集のページをを追加しました。
クリックすると下記ページに。
※こちらが実際のページ。
http://www.facebook.com/skyarcsystem/app_427079437304535
1. サイトを作成
まず、htmlゃphpなどそれぞれの方法で作りたいページを作成します。
html記述の際に</body>の前に
<div id="fb-root"></div> を記述しておいてください。
大きさは幅520pxと810px、2サイズ_どちらかとなります。
高さが800pxを超えるとスクロールバーがでてきてしまうので
その場合はJavaScriptを記述します。
今回は簡単に設定をしていきたいと思いますので
JavaScriptでスクロールバーを消す方法はまた後日紹介したいと思います。
JavaScriptを使わずスクロールバーのでないサイズだったのですが
高さを795px以内で作成すれば スクロールバーはでないようです。
ページができたら自分のサーバーにアップします。
※後ほどアプリの設定でURL設定が必要となります。↓↓↓↓
【4.アプリをFacebookページで見れるようにする設定】を参照。
サーバーにアップが完了したら、次はアプリの登録です。
2. アプリの登録
まず、最初にFacebook_developersのページへいきます。
右上の新しいアプリケーションを作成をクリックし、新規アプリを作成します。
新規アプリを作成すると上記画面になります。
App Nameにはアプリの名前を入れてください。後からも変更可能です。
Web Hosting部分にもチェックを入れて、続行をクリック。
続行をクリックするとセキュリティチェックの画面になります。
記載されている文字を入力し送信をクリック。
送信をクリックすると上記の画面になります。
今回は携帯電話の確認登録方法を行いたいと思います。
画面右上の携帯電話部分をクリックします。
クリックすると上記の画面になります。
携帯メールアドレス部分に自分のアドレスを入れ承認を押すと携帯メールに確認コードが送られてきます。
携帯メールに送られてきたアドレス確認コード番号をコード部分に入れて承認を押すと承認完了となります。
承認が完了されたら上記画面になるので作成をクリックしまます。
3. アプリの設定
上記画面でアプリの基本設定を行います。
A
App IDは後で使います。
※アプリの設定でURL設定が必要となります。↓↓↓↓
【4.アプリをFacebookページで見れるようにする設定】を参照。
B
B-①
アプリの表示名はこのアプリの名前になります。
【2.アプリの登録】で登録したApp Nameになります。
C
ページタブ
C-①
Facebook＿Topページに表示される追加のタブ名となります。
C-②
【1.サイトを作成】の部分で作ったURLを入れます。
page Tab URLにはhttp〜。
Secure page Tab URLにはhttps〜を入れてください。
C-③
Facebook＿Topページに表示される追加のタブ画像になります。
C-③の右上のChangeをクリックし画像をアップします。
サイズは111×74pxになります。
C-④
追加ページのサイズになります。
520pxまたは810pxのどちらかを選んでください。
登録が完了したら変更を保存をクリック。
4. アプリをFacebookページで見れるようにする設定
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
上記URLにID(【3.アプリの設定】−A参照)とURL(【3.アプリの設定】C-②参照)を
入れると下記画面になります。
Facebookページを選択し、ページタブを追加をクリックで完了です！
お疲れ様でした！