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

Facebookページに「独自ページを表示するアプリ」を追加する

※以下の手順は、2011年12月に大きく仕様変更されました。今後も変更される可能性がありますから、もしうまくいかない場合には、検索するなどして最新情報を確認してみて下さい。

「App ID」はアプリ毎に異なる番号

まず、「独自ページを表示するアプリ」の「App ID」を用意します。このIDは15桁の数値で、アプリごとに異なります。アプリを作成した際にメモしていなかった場合は、前ページで紹介した「アプリ一覧」ページなどから確認できます。

そのIDを、以下のURL中にある「■■■」部分に置き換えて下さい。

http://www.facebook.com/add.php?api_key=■■■&pages=1

例えば、App IDが「123000000000321」であれば、以下のようなURLになります。

http://www.facebook.com/add.php?api_key=123000000000321&pages=1

■アプリケーションの追加先を指定

追加先Facebookページ名を選択

上記で作ったURLにブラウザでアクセスすると、右図のような画面が表示されます。ここで、「アプリケーションの追加先」として、Facebookページ名を選択します。

※このリストには、「Facebookページ」名以外にも、過去に作成した「アプリ名」も表示されているので、紛らわしい名称を付けている場合には注意が必要です。「独自ページを追加したい先の『Facebookページ名』」を選択して下さい。

「追加する」ボタンをクリック

すると、右図のような確認画面が表示されます。ここでは、Facebookページ「ホームページ作成TIPS」に対して追加するので、それを選択しています。

Facebookページ名の選択に間違いがなければ、下部にある「○○○を追加する」ボタン（○○○はアプリ名）をクリックします。

タイムラインの上部に追加された

すると、Facebookページに自動的に移動され、タイムラインの上部にあるアプリ一覧部分に追加されたことがわかります。

メニューに項目が追加された

さらに、右図のように、表示ページを選択するメニュー内にも項目が追加されています。

■表示確認

メニューから独自ページにアクセスできるようになる

アプリ一覧やメニューから独自ページの項目をクリックすれば、その独自ページが表示されます。

他にも複数のページを追加したい場合は、それぞれのApp IDを使って、上記の作業を繰り返します。

Method Not Allowed エラー

ここで、もし、「Method Not Allowed」と表示されてしまった場合は、サーバ側がPOSTでのHTMLファイルへのアクセスを認めていないことが考えられます。

その場合は、ファイル拡張子をphpに変更するとうまくいく場合がありますので試してみて下さい。ファイルの中身は何も変えずに（HTMLのまま）、拡張子をphpに変えるだけで構いません。特に、「さくらインターネット」のサーバでは、この方法でうまくいきます。

独自ページ（アプリ）の表示順を変更する

アプリ画像群の右端の矢印をクリック

独自ページを表示するアプリは、作成する度に、タイムラインの上部や、メニューの中に順次追加されます。それらの順序は、自由に変更ができます。順序を変更するには、タイムラインの上部にあるアプリが（最大）4つ表示されている区画の右端にある、右図のような矢印をクリックします。

表示位置を入れ替えるメニュー

すると、右図のようにアプリの表示欄が複数段に拡張されます。この状態で、各アプリの画像上にマウスを載せると、右肩に「鉛筆」アイコンが現れます。それをクリックすると、「位置を入れ替える」メニューが表示されます。そこから、入れ替えたい先の項目名をクリックすることで、表示順を変更することができます。

なお、ここで順序を変更すると、表示ページを切り替えるプルダウンメニュー内の順序も併せて変更されます。また、独自ページの使用を取りやめる場合は、ここで「アプリをアンインストール」をクリックします。

補足：独自ページが最初に表示されるようにはできなくなった

Facebookページにアクセスした人が最初に目にするページは「タイムライン」です。以前は、目次としての役割を果たす独自ページ（「ようこそ！」ページなど）を作成し、そこを最初に表示されるよう設定することができました。しかし、現在では、最初に表示されるページを指定できる「デフォルトで表示するタブ」設定項目がなくなっており、必ず「タイムライン」が最初に表示される仕様になっています。

独自ページをFacebookページに追加完了

以上で、独自ページをFacebookページに追加する方法は完了です。必要なだけ独自ページを作成して、情報量の豊富なFacebookページを作ってみて下さい。なお、今回の記事用にサンプルとして作成した「ホームページ作成TIPS」Facebookページも覗いてみて下さい。

なお、次回の記事「Facebookページ用HTMLの書き方TIPS」では、縦方向のサイズ制限をなくす方法、単独で閲覧された場合にFacebook側へ誘導する方法、複数の独自ページ間でリンクする際の注意点など、「独自ページ」用のHTMLを記述する上で役立つ3点のTIPSを解説しています。そちらもぜひ、ご参照下さい。

【関連記事】