03 6月Facebookページの作り方。 その3

■Facebookページの作り方 (応用編)

Facebookページの作成方法の仕様が変更となっています。最新版はこちら(2011年8月30日現在)

Facebookページの基本的な作り方に関しては「初級編」で解説した。
この項ではFacebookページに「ランディングページ」や「お問い合わせフォーム」と言った独自のページを追加する方法について解説する。

Facebookページにオリジナルのページを追加するには「iFrame」というテクニックを使うことになる。iFrame自体インターネット創明期から有った技術で特に目新しいものではない、簡単に説明すると、「Facebook上のページに窓を開けて、その窓の向こうに、ユーザーが自ら用意したホームページを表示する」というもの。

このため、厳密に言うとFacebook上にオリジナルページを作るのではなく、Facebookを通して自分のサーバーの自分のホームページをお客に見せる技術である。

※2010年まではFBMLというFacebook専用言語を使い、Facebookサーバー上に自分のオリジナルページを設置できたが、現在このサービスは終了している。

では早速設置方法について見ていこう。

1.サーバーを準備する
iFrameでオリジナルページをFacebook上に表示するためには、オリジナルページのファイルを置くためのサーバーが必要になる。
サーバーは基本的には何でも良いが、サーバーの仕様やApacheのバージョンによってはエラーになることも報告されているため、Facebookページ対応をうたっているサーバーを選択するのが無難

2.Facebookにて開発者登録を行う。
自分のFacebookページに設置するiFrameは「Facebookアプリケーション」扱いとなるため、自分で設置するには開発者として登録する必要がある。

【開発者登録ページ】

https://www.facebook.com/developers/

1)開発者登録をするためには「アプリ許可」のダイアログボックスが表示されるので、「許可」をクリック
2)開発者ページのトップページに飛ぶので、右メニューにある「Create one.」のリンクをクリックする。
3)認証画面が表示され、携帯電話・もしくはクレジットカードでの認証を促されるのでどちらかで認証を完了する。

以上の段取りで開発者としての登録は完了、次にアプリケーションの登録に移る。

3.アプリケーションを登録

うえの画面でこれから作成するページ(アプリケーション)の名前を任意でつけて登録


うえのセキュリティーチェック画面でテキストを入力してチェック

左メニューの「 Facebook Integration」をクリックして、自分のサーバー情報を入力しする。

■設定項目


1)キャンバスページ このアプリケーションのFacebook上のURLを設定する。
方法はキャンパスページのテキストボックスに任意の文字列を入れればOK,すでに使われているものは使えない。

2)Canvas URL ここには自分のサーバーのFacebook用ページのあるURLを入力する。
ファイル名までは入れずに/(スラッシュ)で終わる形で入力

3)iFrameサイズ ここは「Auto-resize」を選択する。
Auto-resizeとはFacebook側が読み込むサーバーのファイルの大きさを認識して、窓の大きさを自動設定する機能となる。

4)ディスカバリ Social Discovery ここではこのアプリケーションがFacebook上の検索で見つかるようにするか否かが選択できる。
通常は自分のページのみの対応で良いため、「無効」を選択する。

5)Page Tabs 「タブ名」を入力、何でも良い、ここで入力した文字列が、自分のFacebookページの左メニューに表示されるタブの名前になる

6)Page Tabs 「タブのURL」このにはこのタブをクリックしたときにiFrame内に表示されるページのファイル名を入力する。

例)Canvas URLが「 http://koukou.twinkle100.info/wp/ 」の場合
iFrameで最初に表示したいページが「http://koukou.twinkle100.info/wp/」のトップページの場合、「http://koukou.twinkle100.info/wp/index.php」など、index.php・index.html などのURLを入力する。

indexファイルとは違うページを表示したい場合、「http://koukou.twinkle100.info/wp/toppage.php」等を入力

最後に「保存」ボタンをクリックして入力した内容を保存する。これで設定は完了
※読み込み先のページは別途php・HTML等で作成する。

■今作ったアプリケーションを自分のFacebookページに追加する。

1.「マイアプリ」のページ、右メニュー内にある「Application Profile Page」をクリック

2.左メニューの「マイページへ追加」ボタンをクリック

3.表示されているダイアログボックスの中から、自分の追加したいFacebookページを選択して、「Facebookページに追加」ボタンをクリック。
これで自分のFacebookページに今作ったiFrameページが追加された。

4.追加したページを見てみると、左のメニュー内に今つかしたページが表示されているのが確認できる。

5.ページ上部の「基本データを編集」のリンクをクリック。

6.左メニューの「権限の管理」をクリックして、中央付近の「デフォルトで表示されるタブ」に今つかしたタブを選択して保存する。
これで、ビジターがあなたのページを訪れたとき、最初に表示されるページをオリジナルページに設定することが完了。

Facebookページを作ろう。 その4 へつづく

■ソーシャルネットおすすめ情報

現在コメントはありません

コメント:

コメントをどうぞ
お名前
メールアドレス
URL
コメント記入欄