スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

iFrameによるFacebookページ作成法と6つのポイント

先日はじめたばかりなのにFacebookについて語るのも偉そうかもしれませんが、せっかくiFrame形式のページを設置したので、その作成方法や個人的に悩んだところをまとめてみます。
こちらの内容は古くなっていますので、内容を新たに作り替えました。ぜひこちらをご覧ください!
ページタブアプリ(iframe)の作成とFacebookページへの追加方法

今回はiFrameを使ってFacebookページを自由にカスタマイズする方法を紹介します。Facebookページ自体はログインした状態で「Facebookページを作成」にアクセスすると作成することができます。

facebook-pre.png

今まではFBMLというFacebook独自の言語を使っていたのですが、現在はiFrame(インラインフレーム)に移行されています。ということで、上の赤い部分に、自分で用意したサーバーのページを表示するということになります。

移行の理由はよく知りませんが、iFrameだとユーザーがサーバーを用意しないといけないので、やはりサーバーの負担を考えてなのでしょうか。

個人的にインラインフレームはあまり好きではないのですが、わけの分からないFBMLなんて言語を勉強するより、使い勝手はいいです。

iFrameへの変更にはこんなメリットがあるかなと思います。

  • 今までの知識でページを作成できる
  • phpなどのサーバーサイドスクリプトが使用できる
  • Google Analyticsのトラッキングコードが追加できる

アプリの登録

iFrameによるページを設置するにはアプリとして作成しますので登録が必要となります。アプリは申請しない限り公開されません。

登録の際にインラインフレームで読み込むページのアドレスが必要となるため、ページ内容は後でもいいのでアドレスだけは決めておきましょう。

ではまず、アプリケーションを作成ページにアクセスします。

facebook-app-start.png

アプリケーション名を入力し、規約に同意します。

facebook-security.png

するとセキュリティチェックが必要となります。

次から具体的にアプリケーションの内容を編集します。

左にタブがあり色々編集できますが、とりあえずは登録に最低限必要な「about」と「Facebook Integration」を紹介します。

facebook-app-menu.png

【about】 facebook-about.png

  • アイコン - 16×16サイズでサイドに表示されます
  • ロゴ - 75×75サイズですが公開しないしあまり必要ないかも
  • メールアドレスは登録されているものが最初から入力されてます


【Facebook Integration】 facebook-integration.png
  • Canvas Page - アプリのベースURL。小文字で他のアプリとかぶらないよう設定します。
  • Canvas URL - iFrame内で読み込むページのURL。最後は「/(スラッシュ)」で終わるようにしてください。
  • Canvas Type - もちろん「iframe」にチェック
  • iFrameサイズ - スクロールバー嫌いなので「Auto-resize」に
  • タブ名 - Facebookページ左側のメニューに表示される名前です


facebook-stats.png

これで、登録は完了です。Directory Statusはアプリディレクトリへの登録に関するものですので、未提出で構いません。

次に「Application Profile Page」から作成したアプリを自分のFacebookページに追加します。

facebook-add.png

アプリのページに移動し、左下の「マイページへ追加」をクリックすると、自分のFacebookページの一覧が表示されますのでアプリを追加したいページをクリック。

これで、作成したアプリ(自分が別サーバーで作ったページ)がFacebookページに表示されます。


iFrameで読み込むページについて4つのポイント

ここから、iFrameで読み込むページについて個人的に注意したいと思うところを紹介します。

1. 拡張子はphpでないといけないかも

iFrameで読み込むファイルについて、最初は拡張子をhtmlにしていたのですが表示されず、その後たまたまphpを使用することになったので表示されました。

facebook-index.png

ただし、これはサーバーによって違うかも知れません。

ちなみに私はsakuraを使っています。sakuraはiframeによるFacebookページに使えないという記事を見たこともありますが、単に拡張子の問題だったのかもしれません。

とにかく、もしhtmlで表示されない場合はphpをお試しください。

2. ページサイズは520px

作成するページの横幅は520pxとなります。

facebook-520px.png

縦は自由ですが、後で紹介するように長くなるとスクロールが現れてしまいます。

ちなみに私は以下のようにcssを設定しています。520pxは設定してもしなくてもいいですが。。

css
body {
  padding:0;
  margin:0;
  width:520px;
}

この設定で520pxの画像を挿入するとぴったり表示されます。

3. 縦にスクロールバーが表示される場合の対応

ページが縦に長くなると、スクロールが出てしまいます。

facebook-scroll.png

縦にスクロールが出ることで、その分横幅も狭くなり、横のスクロールまで出てしまいます。さすがにかっこ悪いですね。

そんなときはiFrameで読み込むファイルに以下のコードを挿入すれば解決です。

js
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  FB.init({ 
    appId : 'アプリID',
    status : true, // check login status
    cookie : true, // enable cookies
    xfbml : true, // parse XFBML
    logging : true
  });
  FB.Canvas.setAutoResize();
</script>

headでこのjavascriptを読み込み、body内の一番下に以下のコードを挿入します。

html
<div id="fb-root"></div>
<script>
  FB.Canvas.setSize({ width: 520, height: 1450 });
</script>

widthは520でいいと思いますが、heightはコンテンツの長さにより各自設定してください。

2011.7.22 追記
このブログのfacebookページにエラーが出てしまっていました。<div id="fb-root"></div>の直下にヘッダーで読み込んでいたJavaScriptを入れると解消しました。

4. リンクターゲットに注意

iframeなんて久しぶりに使ったのでリンクターゲットの設定をうっかり忘れていました。

何も設定しないとフレーム内にリンク先のページが表示されてしまいます。

facebook-iframe.png

ということで、aタグ内にどらかを追加してあげましょう。

target="_parent" // 親フレームに表示
target="_blank" // 別フレームに表示

基本的なことですが忘れると恥ずかしいです。


Facebookページの設定について2つのポイント

1. デフォルトページに設定しましょう

最初はウォールがFacebookページのデフォルトページになっていますが、「権限の管理」から変更することができます

せっかくですので、作ったアプリをデフォルトページにしましょう

facebook-defult.png

2.年齢制限するとログインしないと見れない

Facebookページはmixiと違いログインしなくても見ることができます。

ログインの必要ないということで、Google等の検索エンジンの検索対象にもなります。

ただし、閲覧制限を自分でかけてしまうとログインしないと表示されません。

facebook-13.png

今後Facebookページの作成はiFrame中心になるかと思いますが、サーバーを持っていない人にとっては不便ですし、細かいバグも色々あるようです。

何かだらだらとなってしまいましたが、参考になれば幸いです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
このコメントは管理人のみ閲覧できます
【2011/03/29 03:45】 | - # | [edit]
はじめまして。

「To make sure users can view your app over a secure browser connection (https), please visit the developer console to update your callback URL.」

というエラーとうことですが、

https://www.facebook.com/help/?page=1079

あたりではないでしょうか?


> これは、「Facebook Integration」内の「Secure Canvas URL」の設定が必須ということなのでしょうか?

私は入力していませんが大丈夫です。


私も先週始めたばかりで確かなお返事できず申し訳ございません。
【2011/03/30 00:17】 | 管理人 #E2ywrYdA | [edit]
こんにちは。
上記に沿って作ってみましたが・・
うまくいきません。

フェイスブックページの編集から
アプリ(sampleという名称)をクリックすると
追加済みアプリケーションとして作った
アプリは追加されています。

が、
設定を編集という文字しか表示されていません。
そしてこれをクリックすると・・・
sample1の設定を編集
このアプリケーションには設定がありません。

とでます。

他のアプリのように
「アプリケーションへ移動 · 設定を編集」
というりんくがでません。


これはどこが悪いのでしょうか??
【2011/04/10 15:40】 | 長澤 #5D78iiBI | [edit]
おはようございます。

iFrame内で表示するページに問題があっても
仰るように状態にはならないと思いますので、
アプリ自体の設定が間違えているということだと思います。

ただ、どこがおかしいというところまでは想像がつきません。

アプリの設定を一から見直すしかないのではないでしょうか。

すいません。。
【2011/04/11 06:05】 | 管理人 #E2ywrYdA | [edit]
初めまして。以前たまたま検索していてコチラの記事までたどり着きまして、参考にさせて頂いたのですが、コチラに記述されているコードを記述して「スクロールバーの非表示」に関して問題が解決出来たかと思ったのですが、win版で見て見るとスクロールバーが表示されてしまっていて、削除できていませんでした。。。

原因はなんなんだろう?と調べてみた物のどうしてもわからず、もし同じような現象などあれば教えて頂けたらと思い書き込みをさせて頂きました。

初めての書き込みなのに質問になってしまい申し訳ございません。
【2011/06/29 01:06】 | Keita #- | [edit]
keitaさん
はじめまして~

ブラウザによって表示したときの縦の長さが違ってくるからではないでしょうか?
Chromeだと縦の長さが800pxで収まってもIEだと850pxになってしまうということも考えられます。

そんな時以下のように指定すると

<script>
FB.Canvas.setSize({ width: 520, height: 800 });
</script>

IEだとスクロールが出てしまいます。

ですので私はちょっと長い目に縦の長さを設定しています。
【2011/06/29 21:38】 | 管理人 #E2ywrYdA | [edit]
お返事ありがとうございます!!
なるほどですね・・・
長めに設定を変えてみて再度確認してみます!
ありがとうございます!
【2011/06/29 22:20】 | Keita #- | [edit]
私も同じ問題で高さを長い目にすることで解決しました。

うまくいくことを願っています~
【2011/07/01 04:47】 | 管理人 #- | [edit]
私もiFrameでHTMLが表示されませんでした。
サイトサーブのレンタルサーバーですが、
やはりPHPじゃないと上手くいかないかも。

これからも参考にさせてください。
ありがとう~。
【2011/07/14 14:09】 | カマダ #- | [edit]
やっぱりphpじゃないとだめなんですかね。
なんでなんだろう?
理由が思いつかない。。

無料サーバーだとphpも使えないでしょうし不便ですね。
【2011/07/14 21:16】 | 管理人 #nwwtm.uk | [edit]
拡張子の情報、非常に助かりました。ありがとうございました。
【2011/09/02 15:56】 | kumu #- | [edit]
kumaさん

お役に立ててうれしいです。
またお越しください~。
【2011/09/03 09:45】 | 管理人 #E2ywrYdA | [edit]
こんばんわ。最近Facebookページの作成を始めまして、大変に参考にさせて頂いております。
実はアプリがファンページに追加できずに困っております。大変恐縮では有りますが、アドバイスを頂きたく存じます。
アプリの登録部分はおおむね完了しており、canvas上で画面の確認まで出来るのですが、なぜだか「Application Profile Page」というボタンが現れません。どのような原因が考えられるのかご教授頂ければと思います。

以下に参考画像をアップさせて頂きますが、記載内容は問題があるものとは思えません。。。当方途方に暮れております。。。
http://www.luxury-ltd.com/fb/fbapp/img/need_advice.jpg

仕方ないのでStaticHTMLで強引にページを作ったりしてます...
【2011/12/20 02:26】 | uovo #OCf05V0c | [edit]
uovoさん

私もたぶん同じところでつまづきました。

下記サイトが参考になるでしょうか?
http://dollsent.jp/wordpress/?p=10225

なぜ「Application Profile Page」が出ないのかは不明ですが。。。


それはそうと
こちらのページのおかげで無事facebookページが作成でき助かりました。
感謝です。
【2011/12/26 11:50】 | moro #- | [edit]
http://apps.facebook.com/lig_facmo/
Facmoはサーバー不要でフェイスブックページに
オリジナルのカスタマイズページを作れるアプリです!
もちろんSSLにも対応しています!
ぜひ使ってみてください!
【2012/02/27 00:10】 | lig develop #mQop/nM. | [edit]
【無料】Facebookファンページ作成ツール
最も簡単に無限のファンページを作成、管理することができます。最も簡単に無限のファンページを作成、管理することができます。1つのファンページや、数千のファンページを構築する必要がったとしても... ボタンををすだけで無限数のファンページを作成、管理できます。かつてない簡単さ。
Facebook Developer Centerにアプリケーションを追加する際のSSL対応のセキュアURL取得には、無料URL提供サーバーが利用できます。

http://john3825.blog.fc2.com/blog-entry-24.html
【2012/06/20 16:40】 | john3825 #KI29p8jE | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。