カテゴリー : Facebook

FacebookアプリのCookieをIEで有効にする方法

 

FacebookアプリをIEことInternet Explorerへ対応する方法を調べたのでメモ。
 

Facebookページ内に埋め込むタイプのFacebookアプリは、iframe内で別ドメインのコンテンツを読み込んで動作しています。
 

iframeで別ドメインのコンテンツを読み込むと、そのCookieはサードパーティーのCookieとなります。IEのデフォルトでは、ポリシーが定義されていないサードパーティーのCookieは受け入れないようになっていて、P3P (www.w3.org)でポリシーを宣言すれば受け入れられるようになります。

・引用元:P3Pコンパクトポリシーをコピペするのが流行らないことを祈る | 水無月ばけらのえび日記 はてなブックマーク - P3Pコンパクトポリシーをコピペするのが流行らないことを祈る | 水無月ばけらのえび日記

 

IEの場合、デフォルトの設定で「P3Pコンパクトポリシーが定義されていないサードパーティーcookieは受け入れない」動作となっている為、Facebookアプリでも、FirefoxやChromeだとちゃんと動くのにIEだとなぜか動かない…という現象に遭遇したりします。

・引用元:FacebookアプリのCookieがIEで無効になってしまう現象を回避する方法 – でぶぬる日記 はてなブックマーク - FacebookアプリのCookieがIEで無効になってしまう現象を回避する方法 - でぶぬる日記

 

解決方法は、レスポンスのHTTP headerに具体的なポリシーの内容を出力するだけでOKです。
 

■ Ruby on Rails
 

1
2
3
4
5
6
# application_controller.rb
before_filter :ie_p3p_fix
 
def ie_p3p_fix
  response.headers["P3P"] = 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'
end

 

■ PHP
 

1
header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');

 

以上です。
 
 

【参考】

FacebookアプリのCookieがIEで無効になってしまう現象を回避する方法 – でぶぬる日記 はてなブックマーク - FacebookアプリのCookieがIEで無効になってしまう現象を回避する方法 - でぶぬる日記

Facebookアプリ作ってて困った事というか、IEでiframe内の別ドメインのページでもクッキーを有効にする方法とか、セキュリティレベルを下げずにCookieを有効にする方法とか – kissrobberの日記 はてなブックマーク - Facebookアプリ作ってて困った事というか、IEでiframe内の別ドメインのページでもクッキーを有効にする方法とか、セキュリティレベルを下げずにCookieを有効にする方法とか - kissrobberの日記

IE/SafariでFacebookアプリの無限reload対策 はてなブックマーク - IE/SafariでFacebookアプリの無限reload対策

php – Facebook iframe not working in IE; session/login issue? – Stack Overflow はてなブックマーク - php - Facebook iframe not working in IE; session/login issue? - Stack Overflow

session – Facebook app works on all browsers but not IE8 – Stack Overflow はてなブックマーク - session - Facebook app works on all browsers but not IE8 - Stack Overflow
 

[Facebookアプリ] JavaScript SDK は必ず https で利用すべし

 

Facebookアプリにて、JavaScript SDK を使う場合は、SSLで利用しないとIEで上手く動作しないなどのバグが発生してしまいます。
 

JavaScript SDKを利用するには、ほとんど Facebook Connect はSSLでも利用できるので、今まで

1
<script src="http://connect.facebook.net/en_US/all.js"></script>

としていたのなら

1
<script src="https://connect.facebook.net/en_US/all.js"></script>

に置き換えるだけでOKです。
 

httpsのページに部分的にセキュアでない接続が混在しているとブラウザ(特にIE)によっては正常に動作しないので注意が必要です。
 

【参考】

JavaScript SDK – Facebook Developers はてなブックマーク - JavaScript SDK - Facebook Developers
 

[Facebook API] IFrameタブページでスクロールバーを消す関数 setAutoGrow()

Facebookにて、IFrameタブページでスクロールバーを表示しない関数は setAutoGrow() を使います。

従来までの setAutoResize は2011年12月31日までしか使えません。

FB.Canvas.setAutoGrow – Facebook Developers はてなブックマーク - FB.Canvas.setAutoGrow - Facebook Developers

FB.Canvas.setAutoResize – Facebook Developers はてなブックマーク - FB.Canvas.setAutoResize - Facebook Developers

■ 設定例

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js" type="text/javascript"></script>
<script type="text/javascript">
/* change Canvas size */
FB.Canvas.setAutoGrow();
</script>

 

また、Facebook developerのページから「Canvas URL」を設定しておく必要があります。

【参考】

Platform Updates: Operation Developer Love – Facebook Developers はてなブックマーク - Platform Updates: Operation Developer Love - Facebook Developers

Facebookアプリでスクロールバーを表示しない関数が変わります | [M] mbdb はてなブックマーク - Facebookアプリでスクロールバーを表示しない関数が変わります | [M] mbdb

FacebookのIFrameタブページでスクロールバーを消す方法: 小粋空間 はてなブックマーク - FacebookのIFrameタブページでスクロールバーを消す方法: 小粋空間

Facebookアプリで「HTTPS+OAuth2.0」の利用義務付けが始まります&setAutoResize()が使えなくなります: 小粋空間 はてなブックマーク - Facebookアプリで「HTTPS+OAuth2.0」の利用義務付けが始まります&setAutoResize()が使えなくなります: 小粋空間
 

[Facebook] Upgrade Your App to OAuth 2.0 and HTTPS by October 1st

 

Facebookから「Upgrade Your App to OAuth 2.0 and HTTPS by October 1st」というタイトルのメールが着ました。
 

要約すると、2011年10月1日からFacebookアプリに「HTTPS+OAuth2.0」の利用を義務付けるとのことです。
 

以下、Facebookからのメールです。
 


 

—-
Dear Developer of Your App,

Reminder: Upgrade Your App to OAuth 2.0 and HTTPS by October 1st. In May we announced that all apps on Facebook need to support OAuth 2.0 and HTTPS to make the platform more secure.

All apps, including page tab apps, must migrate to OAuth 2.0 for authentication. The old SDKs, including the old JavaScript SDK (FeatureLoader.js) and old iOS SDK (facebook-iphone-sdk) will no longer work. In addition, iframe Canvas and Page Tab apps must support HTTPS and provide a secure canvas or secure page tab URL.

If you haven’t already made these changes, visit the Developer Roadmap before October 1st for more information about how to upgrade your app and avoid having it disabled.

You can also seek support in the Facebook Developer Group: https://www.facebook.com/groups/fbdevelopers/

Thank You,
Facebook Developer Relations
—-
 

・参考:Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ: 小粋空間 はてなブックマーク - Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ: 小粋空間
 

以上です。
 

開発中のFacebookアプリをFacebookページに埋め込む方法

 

開発中のFacebookアプリをFacebookページに埋め込む方法が分かりにくかったので、忘れないようにメモ。
 

  1. Facebook開発者(https://developers.facebook.com/apps)のページにアクセス
  2.  

  3. サイドバーから埋め込みたいアプリを選択
  4.  

  5. 「Edit Settings」をクリック
  6.  

  7. サイドバーの Related links から「アプリのプロフィールページを見る」をクリック
  8.  

  9. アプリのプロフィールページの左サイドバーから「マイページへ追加」をクリック
  10.  

  11. 「(アプリ名)をFacebookページに追加」のダイアログが出るので、追加したいFacebookページに対応する「Facebookページに追加」ボタンをクリック

 

【参考】

新しいFacebookページにStatic iframe形式でタブを追加する方法 [C!] はてなブックマーク - 新しいFacebookページにStatic iframe形式でタブを追加する方法 [C!]
 

FacebookアプリのSSL認証が2011年10月1日から義務化

 

Facebookページに追加するiFrameページと、FacebookアプリのSSL認証が2011年10月1日から義務化されるそうです。
 

SSL認証に対応していない場合、実施以降は表示すらできなくなるとのことです。
 

Facebookアプリやページの運営者は早急な対応が必要になりそうですね。
 

現状、httpsに対応していないアプリがほとんどなので、2011/10/01から使えなくなるアプリがたくさん出て来る気がします。
 

【参考】

FacebookページやFacebookアプリのSSL認証が義務化されます | [M] mbdb はてなブックマーク - FacebookページやFacebookアプリのSSL認証が義務化されます | [M] mbdb

FacebookがSSL対応。外部呼び込みファイルをチェックしましょう。絶対パスの記述は http:// でも、SSL対応サーバなら表示されます。SSL非対応サーバは非表示となります。 はてなブックマーク - FacebookがSSL対応。外部呼び込みファイルをチェックしましょう。絶対パスの記述は http:// でも、SSL対応サーバなら表示されます。SSL非対応サーバは非表示となります。

Developer Roadmap Update: Moving to OAuth 2.0 + HTTPS – Facebook Developers はてなブックマーク - Developer Roadmap Update: Moving to OAuth 2.0 + HTTPS - Facebook Developers
 

[Rails] redirect_to でリダイレクトできない原因はURLに半角スペースが入っていたせい

 

Railsのメソッド redirect_to で、Facebook認証後のリダイレクト処理をさせていたのですが、ちゃんと動かなくて困っていました。
 

リダイレクトできなかった原因はなんと、URLに半角スペースが入っていたせいでした…
 

1
2
redirect_to @facebook_cookies.url_for_oauth_code(:permissions => "publish_stream, read_stream")
#redirect_to 'https://graph.facebook.com/oauth/authorize?client_id=125635350871368&redirect_uri=http://localhost:3000/&scope=publish_stream, read_stream'

 

“publish_stream, read_stream” の部分の半角スペースが入っていたせいでリダイレクトできていなかったみたいです。
 

文字列で渡すところをうっかり配列で渡すような書き方にしてしまっていました…
 

正しくは以下のように、スペースを入れないで scope に渡すパーミッションを指定します。
 

1
2
redirect_to @facebook_cookies.url_for_oauth_code(:permissions => "publish_stream,read_stream")
#redirect_to 'https://graph.facebook.com/oauth/authorize?client_id=125635350871368&redirect_uri=http://localhost:3000/&scope=publish_stream,read_stream'

 

ちなみに、Facebook API を使うためのライブラリは koalaを使っています。
 

arsduo/koala – GitHub はてなブックマーク - arsduo/koala - GitHub
 

以上です。
 

[Ruby] Rails 用 Facebook API ライブラリ一覧

 

Ruby on Railsにて、Facebook APIを利用するためのライブラリを調べたのでメモ。
 

koala – GitHub はてなブックマーク - arsduo/koala - GitHub

rest-graph – GitHub はてなブックマーク - cardinalblue/rest-graph - GitHub

mini_fb – GitHub はてなブックマーク - appoxy/mini_fb - GitHub

fbgraph – GitHub はてなブックマーク - nsanta/fbgraph - GitHub

fb_graph – GitHub はてなブックマーク - nov/fb_graph - GitHub

mogli – GitHub はてなブックマーク - mmangino/mogli - GitHub

facebooker2 – GitHub はてなブックマーク - mmangino/facebooker2 - GitHub
 

以上です。(随時更新予定)
 

【参考】

Herokuで作るFacebookアプリ:第5回 Facebook APIを学ぼう|gihyo.jp … 技術評論社 はてなブックマーク - Herokuで作るFacebookアプリ:第5回 Facebook APIを学ぼう|gihyo.jp … 技術評論社
 

[Facebook] 言語コード・国コード(locale)一覧表

 

Facebookの 言語コード・国コード(locale)の一覧表を見つけたのでメモ。
 

LocaleValue
Afrikaansaf_ZA
Albaniansq_AL
Arabicar_AR
Armenianhy_AM
Aymaraay_BO
Azeriaz_AZ
Basqueeu_ES
Belarusianbe_BY
Bengalibn_IN
Bosnianbs_BA
Bulgarianbg_BG
Catalanca_ES
Cherokeeck_US
Croatianhr_HR
Czechcs_CZ
Danishda_DK
Dutchnl_NL
Dutch (Belgi?)nl_BE
English (Pirate)en_PI
English (UK)en_GB
English (Upside Down)en_UD
English (US)en_US
Esperantoeo_EO
Estonianet_EE
Faroesefo_FO
Filipinotl_PH
Finnishfi_FI
Finnish (test)fb_FI
French (Canada)fr_CA
French (France)fr_FR
Galiciangl_ES
Georgianka_GE
Germande_DE
Greekel_GR
Guaran?gn_PY
Gujaratigu_IN
Hebrewhe_IL
Hindihi_IN
Hungarianhu_HU
Icelandicis_IS
Indonesianid_ID
Irishga_IE
Italianit_IT
Japaneseja_JP
Javanesejv_ID
Kannadakn_IN
Kazakhkk_KZ
Khmerkm_KH
Klingontl_ST
Koreanko_KR
Kurdishku_TR
Latinla_VA
Latvianlv_LV
Leet Speakfb_LT
Limburgishli_NL
Lithuanianlt_LT
Macedonianmk_MK
Malagasymg_MG
Malayms_MY
Malayalamml_IN
Maltesemt_MT
Marathimr_IN
Mongolianmn_MN
Nepaline_NP
Northern S?mise_NO
Norwegian (bokmal)nb_NO
Norwegian (nynorsk)nn_NO
Pashtops_AF
Persianfa_IR
Polishpl_PL
Portuguese (Brazil)pt_BR
Portuguese (Portugal)pt_PT
Punjabipa_IN
Quechuaqu_PE
Romanianro_RO
Romanshrm_CH
Russianru_RU
Sanskritsa_IN
Serbiansr_RS
Simplified Chinese (China)zh_CN
Slovaksk_SK
Sloveniansl_SI
Somaliso_SO
Spanishes_LA
Spanish (Chile)es_CL
Spanish (Colombia)es_CO
Spanish (Mexico)es_MX
Spanish (Spain)es_ES
Spanish (Venezuela)es_VE
Swahilisw_KE
Swedishsv_SE
Syriacsy_SY
Tajiktg_TJ
Tamilta_IN
Tatartt_RU
Telugute_IN
Thaith_TH
Traditional Chinese (Hong Kong)zh_HK
Traditional Chinese (Taiwan)zh_TW
Turkishtr_TR
Ukrainianuk_UA
Urduur_PK
Uzbekuz_UZ
Vietnamesevi_VN
Welshcy_GB
Xhosaxh_ZA
Yiddishyi_DE
Zuluzu_ZA

 

・参考:Wing’s FAQ on Facebook Development – Where can I get the List of Locale that I can use for those locale parameters in Facebook API? はてなブックマーク - Wing's FAQ on Facebook Development - Where can I get the List of Locale that I can use for those locale parameters in Facebook API?
 

[Facebook] 新バグツール「Bugzilla」を公開

 

Facebookが開発者向けに、新バグツール「Bugzilla」を公開したようです。
 

Bugzilla Main Page はてなブックマーク - Bugzilla Main Page
 

・参考:A New Way to Report Bugs – Facebook開発者 はてなブックマーク - A New Way to Report Bugs - Facebook開発者
 

現在は、Bugレポートを読めるだけで、投稿することはできないみたいですが、すぐに実装されるとのことです。