2011年03月28日(月) 11時18分11秒

Facebookページの作り方 ~ようこそページをiframeでつくろう~

テーマ:facebookページ制作

前回『Facebookページの作り方 ~登録編~』という記事を書きましたが、今回はその続きでようこそページをiframeで作る具体的な方法をご説明します。


まず、iframeのページをFacebookで使えるようにするためにアプリ登録をします。こちらのFacebook開発者ページを開き、画面上部の「マイアプリ」をクリックします。

Facebook開発者ページ


まだ何もアプリを作成したことがないと 「アプリケーションがありません。」 と表示されるので、「+Set Up New App」ボタン、または「作成する」をクリックします。

Facebook「マイアプリ」ページ


すると、「アプリケーションを作成」画面に移ります。

今回は、自分で作ったFacebookページに入れるiframeのページを登録するだけなので、アプリケーション名は自分で分かりやすい名前なら何でも大丈夫です。

Facebook「アプリケーションを作成」ページ

私の場合、「和装本っていいね!」というFacebookページに、「ようこそページ」を作るための登録だったので、「和装本っていいね!ようこそページ」というアプリケーション名にしました。

そして「同意する」にチェックを入れ、『アプリケーションを作成』ボタンを押します。


セキュリティチェックの画面で表示されている文字を入力し『送信』ボタンを押すと、編集画面へ移動します。

ここではぜひ、「アイコン」を設定しておくことをオススメします

Facebookアプリ編集ページ

デフォルトの画像でも問題はないのですが、このアイコンは実際のFacebookページにも表示されるので(画面左側のタグの欄に、アイコンとタグ名が出ます)、16px × 16pxのオリジナル画像を登録しておきましょう。


そして、「言語」は「日本語」を選びます。


次に、左側メニューの「Facebook Integration」をクリックします。

Facebook「Facebook Integration」ページ

キャンバス』項目の「Canvas Page」には自由なディレクトリ名が設定できます。(だたし、すでに取得されているディレクトリ名は取得できません。)


キャンバスページURL」には、自分のサーバ(契約しているレンタルサーバなど)のURLを入力します。設置するディレクトリの最後の「 / (スラッシュ)」まで書いてください。


Canvas Type」は「IFrame」を選択します。(FBML廃止にともなって、これはもう表示されなくなるのかな?)


iFrameサイズ」は、iframe表示枠の規定サイズ(横520px × 高さ800px)をはみ出してしまった場合、スクロールバーを表示するかリサイズするかを選べます。
私は枠内におさめたかったので、「Auto-resize」を選びました。

※高さ800pxを超えてもスクロールバーを出さずに表示させるには、Facebookが提供しているJavaScript SDKを使います。その方法については、後日また記事を書く予定です。



Discovery』項目の「Social Discovery」は「無効」にしておきます。(このアプリは自分で使うためだけのものなので、他のユーザの検索対象にする必要はありません。)


Page Tabs』項目の「タブ名」は、Facebookページに表示されるタブ名となります。私は「ようこそ」としました。


Page Tab Type」は「IFrame」を選択します。


タブのURL」には、自分のサーバに置くファイル名を入力します。(このファイルの中身が、iframeでFacebookページに表示されます。)
私は「index.php」と入力しました。(htmlではなくphpにしておくと、あとで「いいね!してくれた人だけに見せるコンテンツ」などを作ることができるのでオススメです。)


ここまで入力できたら、画面下の『変更を保存』ボタンをクリックします。

(繰り返しますが、今回は自分で作ったFacebookページに入れるiframeのページを登録するだけなので、必要最低限の項目しか設定していません。)


「マイアプリ」ページが表示され、今作ったアプリが登録されています。

画面右側の「Application Profile Page」をクリックします。

「マイアプリ」ページ


アプリのプロフィールページに移動するので、画面左下の「マイページへ追加」をクリックします。


アプリのプロフィールページ


自分のFacebookページの横にある『Facebookページに追加』ボタンをクリックします。

アプリのプロフィールページ


Facebookページを再び開いてみます。

すると、画面左側のタブの中に「ようこそ」タブが追加されていることがわかります。

Facebookページ「和装本っていいね!」

登録しておいたアイコンも一緒に表示されていますね。


ここまで設定できたら、画面右上の『Facebookページを編集』ボタンをクリックし、「権限の管理」画面で「デフォルトで表示するタブ」を「ようこそ」に変更しておきます。

「権限の管理」画面


これで、このFacebookページを見に来てくれた人には、最初に「ようこそ」ページが表示されるようになります。

(どうやら、「いいね!」を押してくれた人には、「ようこそ」ページではなく「ウォール」が最初に表示されるようになるみたいです。これはFacebookの仕様です。)


あとは、ご自分のサーバに置いたファイル(index.phpなど)をガッツリ作りこんで、ステキな「ようこそ」ページを作ってください!アップ


参考までに、下記が今回 私が作ったFacebookページです。

【和装本っていいね!】
http://www.facebook.com/wasoubon


この「ようこそ」ページでは、「いいね!」してくれた人と、まだ「いいね!」していない人に対して、それぞれ違う画面表示をしています。

このような条件分岐の方法も、また後日ご紹介させていただきますねニコニコ


2011/04/06 追記:

先日、「Facebook Integration」の画面に「Secure Tab URL」という項目が追加されました。

この欄に、「https://」で始まるURLを入力しておくと、SSL接続でFacebookを利用しているユーザにもタブが表示されます。

ここを空欄にしていると、SSL接続でFacebookを利用しているユーザにはタブ自体が表示されません。

ご自身のサーバでSSLが使えるようでしたら(レンタルサーバの共有SSLでも大丈夫です)、設定しておきましょう。

AD
いいね!した人  |  リブログ(0)

AD



Tsubasa Kikuchi

バナーを作成

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。