Facebookでオリジナルページを制作
今回Facebookでウェルカムページ等の
オリジナルページを制作する依頼があったので
やり方をメモ
Facebookアプリケーションを作る
フェイスブックでオリジナルページを作るには
Facebookの「アプリケーション」としてページを制作しないといけないらしいので
そのやり方を紹介します。
私自身まだあまり理解していないので参考程度に・・・
- まず、FacebookのDeveloperページへ行き
右上の「新しいアプリケーションを作成」ボタンをクリック - クリックしたらポップアップで入力項目が出てくるので、「App Display Name:」
に作成するアプリケーション(ページ)の名前を入力し、下のチェックボックスにチェックを付け「続行」をクリック。
「App Namespace:」って項目はよく分からないのですが空白でOK。
※はじめてアプリケーションを作成する場合は、携帯アドレスかクレジット番号での認証が必要になります - セキュリティチェック画面が出るので指示に従って「送信」をクリック
これでアプリケーションの登録はとりあえず完了です。
Facebookアプリケーションの設定
次に、作ったアプリケーションの設定をしていきます。
いろいろ項目がありよく分からない項目もいっぱいありますが、
「ページタブ」をクリックすると
のように入力項目が出てくるので、
赤線で囲っている部分だけ入力し、「変更を保存」でとりあえずOK。
ここで重要なのがページに表示するHTMLをアップしたURLと赤文字で書いてある部分で、
このURLが何かというと、
Facebookのアプリケーションでは、作ったアプリケーションの中身を、
自分でHTMLなどで作ってサーバーにアップし、
そのサーバーへHTMLやPHPを読みにいき、iframeとしてFacebook内で表示させるので、
そのアップしたファイルのURLを記述します。
※表示するHTMLのサイズは横520px、縦800pxまでで作成しないとスクロールバーが表示されてしまうので注意。
ちなみにもしアイコンを付けたければ「アイコンを変更」から画像をアップロード。
これはFacebookページの左メニューに貼りつけたときに表示されるアイコンです。
※サイズは横16px、縦16px
Facebookアプリケーションを表示するページに追加
上記までのアプリケーションの設定が終わったら
次に実際に表示するページに作成したアプリケーションを追加します。
- まず、左メニューの
「アプリのプロフィールページを見る」からアプリのプロフィールページへ行きます。 - アプリのプロフィールページの左メニューの
「マイページへ追加」をクリック - ページの一覧が出ると思うので、アプリケーションを追加したいページの右側にあるボタンをクリックし選択
これで作成したアプリケーションがページに追加されたので、
最後に、追加したページの
「Facebookページを編集」をクリックしたページの
左メニューの「アプリ」をクリックすると、
登録しているアプリ一覧が表示され、
下の方に今回追加したアプリケーションがあるはずなので、
「設定を編集」から「追加」をクリックでOK。
以上で終了です。
ウェルカムページの作成
上記のアプリケーションをウェルカムページとして使用する場合は、
「Facebookページを編集」をクリックしたページの
左メニューの「権限の管理」をクリックし
「デフォルトで表示するタブ:」にウェルカムページで使用したいアプリを選択すればOK。
※ウェルカムページの設定はFacebookページの管理者には反映されず、管理者のアカウントでFacebookページに訪れても、一番最初に表示されるのはFacebookページではなくウォールなどが表示されるので確認の際は注意してください。