Facebook Page カスタマイズ

FacebookPage カスタマイズ作業手順

Facebookには、個人用のそれと、Facebookページという2種類があります。今回は、Facebookページの左サイドに新規にタブ（下記図の①）を作り、そのタブをクリックすることで、新しいページを作るものです。レイアウトは変更されませんが、中央部の主たるエリア（下記図の②）に好みのコンテンツを掲載しようとする作業です。

本解説は既にFacebookページが作成済みとして進めます。もし、まだ作成されていない場合は、今直ぐに作成しておいて下さい。簡単にできます。→ Facebookページ作成

それでは、以下の3つのステップに分けて解説します。＜Facebook仕様はよく変更されます。本解説は2012年2月時点のものです＞

Facebookに用意されているプログラム（App＝「アプリ」と称している）を使用するための開発者登録
コンテンツ（図２の部分）作成し自身のサーバーにアップロード
Facebookページにタブ（図1の部分）および、コンテンツを表示設定

STEP-1（App 登録）

Facebookページの一番下に小さなメニュー項目があります。その一つに開発なるリンクがあるので、これをクリック
Facebook Developersというページが表示されます。ページ上段にアプリというメニューがあるので、これをクリック
ページ上段に新しいアプリケーションを作成というボタンあるので、これをクリック
Create New Appというウィンドウが表示されます。 App Display Name欄に任意の名称、例えば「UserBox」と入力し、I agree to the Facebook Platform Policies にチェックを入れ、「続行」ボタンをクリック（App Namespace欄は入力不要）
セキュリティチェックが必要ですというウィンドウが表示されるので、表示されたテキストを入力欄に入力して「送信」ボタンをクリック
基本設定の入力枠が表示される
この基本設定の中で要入力は、Facebook上のアプリ及びページタブそれぞれのリンクをクリックすると入力枠が表示されます。すべて入力し終わったら下にある変更を保存ボタンを忘れずにクリック

①にはコンテンツを表示するFacebookページのURLを入力します。ディレクトリーまでの表示ですので、当社Facebookページの例でいうなら、 http://www.ro-ro.fbjs.facebook.com/pages/J-Net/331441960219626/ となります。
②には、機械的にSSLのURLとして、「http」をhttpsに変えて、以下同じアドレスを入力します。
③には、Facebookページの左サイトに表示するタブ名（=メニュー名）を入力します。当社例は、「Welcome」としています。
④にはユーザー独自のサーバーに保存するコンテンツのURLを入力します。ここでもディレクトリーまでの表示としますので、例えば、http://abc.com/xyz/ とします。実際のコンテンツは、xyzディレクトリーの中に、index.htm やindex.phpとして作成することになります。
⑤にはSSL上のURLを表示します。（SSLを使えるサーバーが必須となります）通常は、④の場合なら、https://abc.com/xyz/ となります。
⑥は入力不要
STEP-2のコンテンツを先に作成済みの場合は、続けてSTEP-3に進む

STEP-2（コンテンツ作成）

コンテンツは、通常のHTMLで作成し、ファイル名をindex.htm(または、index.html) やindex.phpとして作成し、自身が契約しているレンタルサーバーの指定のディレクトリー（STEP-1の７　④　⑤）にアップロードします。

このコンテンツがFacebookページに表示される場合、横幅がMax520pxとなりますので、余裕をみて、自身で作成するHTMLファイルの横幅は510pxとしておきます。文字列は横に長くても折り返されますので問題がありませんが、画像の場合は、レイアウトが崩れますので要注意（横幅 520pxの画像を配置すると横スクロールバーが表示されるので、510pxにしておきましょう）

STEP-3（タブ・コンテンツの表示）

パラメーターとしてAPP_IDと⑤を代入して以下のURLにアクセスします。

APP_IDは、STEP-1　手順-6で付与されたID、　⑤は、手順-7で入力した⑤を代入
APP_IDを忘れた場合は、開発（下段にある）　→　アプリ（上段にある）　→　 STEP-1　手順-4で設定したApp Display Name をクリックすれば表示されます。
以下のウィンドウが表示されるのでFacebookページを選択欄から表示させたいページを選択し、ページタブを追加ボタンをクリック
⑤で作成したHTMLが表示されれば、正常にタブが追加されている筈ですので、 Facebookページを表示させ確認しておきましょう。
うまくできたでしょうか？当社での代行をご希望の場合は以下から