ロゴ

デザインはShikisya Designへ!

ページトップへ

お問合せ

2011.05.01
Welcomeページをiframeで作る
[記事のカテゴリ]その他
サイトトップ > ブログトップ > その他 > Welcomeページをiframeで作る

さぁ、facebookページその3です。


今回は少し難し目ですが、facebookページのWELCOMEタブを作ります。

WELCOMEタブというのは、facebookページにアクセスした人に
一番最初に見てもらうためページになります。


iframeでの表示になるのですが、
こちらで、開発者登録をしないと行けません。。。

1.開発者登録
http://www.facebook.com/developers/
右上の『Set Up New App』をクリック

2.任意の好きな『アプリケーション名』を入力

3.表示されるパスワードを入力して進む!!


。。。。。。。

だめです、、ここ2,3日ログイン出来ません。

エラーが発生しました。
We're working on getting this fixed as soon as we can.

この表示が出て前に進めません。。。他の人も同じ現象のようです。。。
しばらく中断。。。

※5/1

現在仕様変更の最中らしく、携帯電話認証ではなく、クレジットカード認証のみのようです
さぁ、何とか次のfacebookページの作り方に進めそうです!


4.基本情報の入力(アプリケーション名 説明 言語 メールアドレス)を設定して、
『facebook integration』を選択。

5.Canvas Pageに、英語の小文字でアプリケーションのURLを入力
Canvas URLに、自分で管理するサーバのURLを入力(弊社の場合はhttp://shikisya.com)
iFrameサイズは、とりあえずAuto-resize
タブ名にShikisya Design
タブのURLにindex.html
これで保存へ。

6.保存されたら『Application Profile Page』ページへ。
左メニューの『マイページへ追加』をクリック。
導入したいfacebookページを選択して追加ボタンをクリック。

7.「5」で指定した自分で管理するサーバにindex.htmlのファイルを置いておけば、
左のメニューからfacebookページを見るとindex.htmlが表示されます。

8.さて、肝心のWELCOMEタブですが、基本的には上記と同じ流れ出で作成します。
基本情報の入力(アプリケーション名 説明 言語 メールアドレス)を設定して、
『facebook integration』を選択。

9.Canvas Pageに、英語の小文字でアプリケーションのURLを入力(shikisya-welcome)
Canvas URLに、自分で管理するサーバのURLを入力(弊社の場合はhttp://shikisya.com)
iFrameサイズは、とりあえずAuto-resize
タブ名にWelcome
タブのURLにindex.html
これで保存へ。

10.
保存されたら『Application Profile Page』ページへ。
左メニューの『マイページへ追加』をクリック。
導入したいfacebookページを選択して追加ボタンをクリック。

11.facebookページの編集の左インデックスの『アプリ』を選択して、『設定を編集』をクリックしてOKを押します。

12.これで、設定は完了です。
あとは、facebookページの編集をクリックして『権限の管理』の中の『デフォルトで表示するタブ』を、Welcomeにすれば完了です。
※反映されるまで少し時間がかかります。

後は、index.htmlとwelcome.htmlを修正すれば、facebookページが個性的にに作れます!!

※『イイネ』を押した人が見ると、ウォールが表示されていますが、まだ『イイネ』を押していないアカウントからログインするとちゃんとWelcomeが表示されます
とりあえず現在のfacebookページの状態(良ければいいねボタンを。。。)↓