Quantcast
Viewing all articles
Browse latest Browse all 8

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

Image may be NSFW.
Clik here to view.
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]で取得できます。

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

Image may be NSFW.
Clik here to view.
Facebook

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

Image may be NSFW.
Clik here to view.
Facebook

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

Image may be NSFW.
Clik here to view.
Facebook

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

Image may be NSFW.
Clik here to view.
Facebook

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

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

Image may be NSFW.
Clik here to view.
Facebook

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

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

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

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

Image may be NSFW.
Clik here to view.
Facebook

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

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

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

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

Image may be NSFW.
Clik here to view.
Facebook Page :: form.

Viewing all articles
Browse latest Browse all 8

Trending Articles