backyard.weblog

Main Contents

Facebookページのデザインカスタマイズをしてみた(iframeの方ね)

/ Service, Web, Works / , ,

Post

2011年10月1日よりfacebookのキャンバスアプリおよびタブアプリはSSL対応が必須となりました。
SSL対応についてのメモと、新しいキャプチャは[Facebookページをカスタマイズしている場合のSSL対応メモ]に書きました。


2011年12月10日以降新規作成アプリにはアプリアプリケーションページがなくなりました。
タブをFacebookページに追加する方法は[Facebookページにタブを追加する方法が変わった?]に書きました。

Facebook Page :: form.

form. の Facebookページを作りましたよ。
form. Facebook Page

DJレーベル化した form. のお手伝いをしています。
24日はついに form.room を Ust 配信する予定です!
原宿に来られない人は Ust 見てください^^
頑張ります。回を重ねるごとにおもしろくなるようにしていきたいなー。

というわけで、form. のDJ陣に頼まれたわけではないんですけど、どうしてもやってみたい!っていう好奇心だけで、Facebookページを作ったわけです。というメモ書き。

「ファンページ」がどうとか「FBML」がどうとか一時期盛り上がったにも関わらず、「ファンページ」と呼ばれていたページは「Facebookページ」と呼ばれるようになり、今やもう iframe でページのタブを作れるようになったので、サーバを借りていて、html とか css とか js とかをあーしてこーすることができればいいわけですね。

必要な物

  • Facebook ページ
  • アプリケーションID
  • iframe に読み込む HTML 等一式と、それら置いておくサーバ
    (外部ブログとかでもいいかも。やってみてないけど。)
    2011年10月1日よりfacebookのキャンバスアプリおよびタブアプリはSSL対応が必須となりました。
    SSL対応についてのメモと、新しいキャプチャは[Facebookページをカスタマイズしている場合のSSL対応メモ]に書きました。

アプリケーションIDを取得する

Facebook DEVELOPERS]で取得できます。

ページ上のナビゲーションから[マイアプリ]を選択。
※開発者登録をしていない場合は、[マイアプリ]へ移動する時点で登録が促されますので、登録します。

Facebook

[+Set Up New App]をクリックして、アプリケーション登録をします。

Facebook

アプリケーション名を入力して、利用規約に同意して[アプリケーションを作成]をクリック。

Facebook

セキュリティチェックの画面に遷移するので、入力して送信します。

Facebook

アプリケーションの設定を編集する

アプリケーション登録が済んだら、基本情報を登録するなどしてください。
Facabookページに iframe を読み込む場合は、左ナビゲーションから[Facebook Integration]という項目に移動して、最低限の項目を入力します。

Facebook

[Canvas Page]は Facebookアプリケーションの URL になります。
[Canvas URL]には用意している外部サーバの URL を設定します。※最後にスラッシュをつけること。

[タブ名]は、Facebookページの左側のメニューとして表示される名前です。
[タブのURL]は、作成したページが表示されたときに最初に読み込まれるファイル(iframe に読み込みたいファイル)を指定します。

iFrame アプリケーションを、Facebookページに表示する

[Application Profile Page]からアプリケーションページに移動して、左のメニューの中から[マイページへ追加]を選ぶと、追加先が選べるので、追加したいページを選択します。選択すると追加されていますのでめでたくデザインカスタマイズ完了です。
2011年12月10日以降新規作成アプリにはアプリアプリケーションページがなくなりました。
タブをFacebookページに追加する方法は[Facebookページにタブを追加する方法が変わった?]に書きました。

Facebook

Facebookページに iframe 出た!けどスクロールバーが・・・っていう場合

デフォルトでは、縦800px 幅520px(bodyに対して margin:0; padding:0; を指定している場合)まではスクロールバーが出ません。下の画像の色のついたエリアが 縦800px 幅520px のイメージです。

でもでも、そんなサイズの壁を飛び越えたい!という場合は JavaScript SDK を使用して iframe の高さを変更できます。

↓説明はこのページがわかりやすいと思うので書きませぬ。
iframe版 Facebookページのスクロールバーを消す方法

Facebook Page :: form.
  • Check
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote

Similar Posts

Add Comment

WP-SpamFree by Pole Position Marketing

Comments

From:キウイまろん
November 26, 2011 (Sat)

大変参考になりました。
解りやすい解説をありがとうございました。

From:akey
November 26, 2011 (Sat)

キウイまろんさん
お役に立てていれば何よりです。
コメントありがとうございました^^

From:ryotait0
February 07, 2012 (Tue)

これで、Facebookのページをより見易くできる☆
Facebookページのデザインカスタマイズをしてみた(iframeの方ね) :: Backyard.weblog http://t.co/xGbKdn2k

Trackbacks

Trackback URL

From:YuccaのFacebookページちょっといじった。 « Yucca web
May 14, 2011 (Sat)

[…] 参考にしたのは↓のページ。 http://backyard.chocolateboard.net/201104/facebook-page.html […]