3/4 自由にHTMLを書くFacebookページの作り方 [ホームページ作成] All About

Facebookページ内に独自ページを表示するアプリの作成手順

■開発ページへアクセス

ページ最下部の「開発」をクリック

まずは、Facebookの開発ページにアクセスします。右図のように、各ページの最下部にあるテキストリンクから、「開発」をクリックして下さい。もしくは、http://developers.facebook.com/へ直接アクセスしても構いません。

上部の「アプリ」をクリック

右図のような画面が表示されたら、ページ上部にある「アプリ」をクリックします。

■アプリを作る準備

開発者アプリに許可を出す

初回アクセス時には、右図のように許可を求めるダイアログが開きますから、許可を出します。

「アプリ」の最初の画面

すると、右図のような画面が表示されます。この画面では、これまでに自分で作成したアプリが一覧表示されます。

初回アクセス時は、まだ1つもアプリを作っていないため、右図のような解説画面が表示されています。

■アプリを作る

「新しいアプリケーションを作成」

ページ右上にある「新しいアプリケーションを作成」ボタンをクリックします。

分かりやすい名称を付ける（※長くならないよう注意）

すると、右図のような、小さなダイアログが表示されます。「App Display Name」欄に、これから作成するアプリ名を入力して下さい。

ここで入力する名称は、実際にFacebookページのメニュー項目として表示される名称とは異なります。「どんなページを表示するためのアプリなのか」を示す、自分にとって分かりやすい名称を付けて下さい。ただし、長すぎると後半が省略されてしまうので注意して下さい。

※入力欄の右隣に「Valid」と表示されていれば、入力内容に問題はありません。「Failed」と表示された場合は、その名称は使えませんから、他の名称に変えて下さい。

画像中に見える英字を入力

「続行」ボタンをクリックすると、右図のように画像で表示された数文字の英字を読んで入力するセキュリティチェック画面が表示されます。表示された通りに入力して「送信」ボタンを押して下さい。

※読みにくい場合は、他の画像に変更することもできます。

■アプリの基本設定

App IDはアプリを識別する番号

右図のような「アプリの基本設定」画面が表示されます。ページ上部に表示されている「App ID」は後々必要になりますから、どこかにコピー＆ペーストしておくと便利です。

基本データ欄は、特に編集する必要はありません。「Namespace（アプリの名前空間）」欄や「App Domains（アプリのドメイン）」欄は空欄のままで構いません。自分しか使わないアプリなので、カテゴリも「その他」のままで構いません。

■表示するページのURLやサイズを設定

「ページタブ」欄に設定を入力

下部にある「ページタブ」欄をクリックして、右図のような入力欄を出します。ここで、以下の4項目を入力・選択して下さい。

『ページタブ名』：
Facebookページのメニューやタイムラインの上部などに表示される名称（長すぎると末尾が見えなくなるので注意）
『Page Tab URL』：
独自ページのURL （http://～で始まるURL）
『Secure Page Tab URL』：
SSLを使った独自ページのURL（https://～で始まるURL）
『Page Tab Width』：
独自ページの横幅。「Wide（810px）」の方を選択して下さい。

なお、「Page Tab Edit URL」欄は空欄のままで構いません。

■ページタブの画像を登録

Facebookページに加えた「独自ページ」群（アプリの形で表示）

Facebookページの「タイムライン」の上部には、右図のようにアプリの一覧が画像で表示されます。これは、自分で作成した「独自ページを表示するためのアプリ」でも同様です。この画像があると、独自ページの存在がとても分かりやすくなります。ぜひ、登録しておきましょう。

「Change」をクリック

「ページタブの画像」欄の右端に、右図のように小さく「Change」というリンクがあります。ここをクリックすると、アプリの画像を登録できます。

ページタブの画像をアップロード

すると、右図のように、画像ファイルを指定する画面が表示されます。ここで、画像ファイルを指定すると、自動的にアップロードされます。

実際に表示される画像サイズは 110×74pxですが、大きめの画像を登録すれば自動的に縮小されて使われます。

ページタブの画像が登録された

アップロードが完了すると、右図のように画像が表示されます。

※アップロード直後には右図のようには表示されないこともありますが、（後述の方法で）設定内容を保存すれば、表示されるようになります。今、表示されなくても、気にせずに次の作業に進んで下さい。

■設定(2)

「Facebook上のアプリ」欄にも、「ページタブ」欄と同じ内容をコピーして入力

「Facebook上のアプリ」欄にも、同じ内容をコピーして入力

さらに「Facebook上のアプリ」欄をクリックして、右図のような入力欄を出します。ここで、以下の2項目を入力して下さい。

『キャンバスURL』：
先ほど「Page Tab URL」欄に入力したのと同じURL
『セキュリティで保護されたキャンバスのURL』：
先ほど「Secure Page Tab URL」欄に入力したのと同じURL

■アイコンを登録

メニューにはアイコンを付けられる

Facebookページ内で表示ページを選択するプルダウンメニューには、右図のように、項目名の先頭に小さなアイコンが表示できます。このアイコンがあるのとないのとでは分かりやすさがかなり違いますから、ぜひアイコンを登録しておきましょう。

※このアイコン登録は必須ではありません。何も登録しなければ、デフォルトのアイコンが使用されます。

「アイコンを変更」をクリック

アイコンを登録するには、右図のように、ページ上部にある「アイコンを変更」リンクをクリックして下さい。

アイコン用の画像ファイルを指定

すると、右図のように、アイコン用画像ファイルを指定する画面が表示されます。ここで、画像ファイルを指定すると、自動的にアップロードされます。

実際に表示されるアイコンのサイズは 16×16pxですが、大きめの画像を登録すれば自動的に縮小されて使われます。

アイコンが登録された

アップロードが完了すると、右図のようにアイコンが表示されます。

※アップロード直後には右図のようには表示されないこともありますが、（次の方法で）保存をすれば、表示されるようになります。

■保存

保存すれば作成完了

以上で、設定は完了です。ページ最下部の「変更を保存」ボタンをクリックして保存して下さい。

「Changes saved.」と表示されれば、アプリの作成は完了です。

■アプリの一覧

作成済みアプリ一覧

ページ上部の「アプリ」をクリックすると、作成済みのアプリが一覧表示されます。後ほど必要になる「App ID」は、この画面からでも確認できます。

右図では、「ようこそ！」ページ以外にもたくさんのページを作成済みのため、複数のアプリが表示されています。

追加で新しいページ（を表示するアプリ）を作る場合は、右上の「新しいアプリケーションを作成」ボタンをクリックします。その先は、これまでご紹介してきた手順と同じです。

さて、これだけでは、まだ「独自ページを表示するアプリ」を作っただけです。次に、このアプリを使って「Facebookページにアプリを追加」する必要があります。

それでは最後に、独自ページ表示アプリを使って、Facebookページ内に独自ページを表示させてみましょう。