How to access Facebook user ID from javascript within a fb:iframe?

Question

I am writing a Facebook application that is a simple board game which I have implemented in javascript. Facebook only seems to let javascript applications run within an iframe so I am loading the page using <fb:iframe>. I just want to be able to tell the javascript the user's id so I can tell the user if it is his turn or not but I can not find documentation on accessing facebook data from within the fb:iframe. I am probably missing some basic conecpt as I do not understand the facebook API very well.

Answer 1

You cna use the facebook API to get the user ID by calling

Users.getLoggedInUser

You can access that value, then use echo() to add that to your HTML as a javascript variable, which will make it available to your Javascript code.

Answer 2

Facebook's API is very tough to follow, and the documentation is very poor. You're right about the Javascript... normal Javascript only works inside an iframe on Facebook, otherwise you're limited to a subset of filtered Javascript called FBJS. You can safely ignore anything about FBJS in the documentation, and focus on iframes.

Iframe loading

The first thing I would mention is that an <fb:iframe> tag actually gets rendered with a ton of stuff in the src attribute. So if you put a tag like this into your Facebook page: <fb:iframe src="http://example.com/page?x=y"&gt;, what it ends up becoming when it loads into a user's browser is more like this:

<iframe src="http://example.com/page?x=y&amp;fb_sig_in_iframe=1&amp;fb_sig_locale=en_US&amp;fb_sig_in_new_facebook=1&amp;fb_sig_time=1246340245.3338&amp;fb_sig_added=1&amp;fb_sig_profile_update_time=1242155811&amp;fb_sig_expires=1246345200&amp;fb_sig_user=000000001&amp;fb_sig_session_key=2.d13uVGvWVL4hVAXELgxkZw__.3600.1246345200-000000001&amp;fb_sig_ss=mZtFjaexyuyQdGnUz1zhYTA__&amp;fb_sig_api_key=46899e6f07cef023b7fda4fg2e21bc58&amp;fb_sig_app_id=22209322289&amp;fb_sig=bbc165ebc699b12345678960fd043033"&gt;

Facebook adds a ton of stuff to the src. The parameter that tells you the user's Facebook id is fb_sig_user (which is 000000001 here). I'm assuming your app is set up as an "FBML app", since you probably wouldn't use an <fb:iframe> tag in an "Iframe app". Nonetheless, the rendering method is similar in both cases, and you get a bunch of extra stuff to your src document in an "Iframe app" as well.

This really only passes you the Facebook user id on the first load of the iframe, however. Subsequent operations within the iframe won't have access to that user id unless you pass it around explicitly.

Facebook Connect

If you want to interact with Facebook from within the iframe, that's where the Facebook Connect Javascript libraries comes in. The best instructions on setting up Facebook Connect is probably this wiki page, but it's still a bit murky. Facebook Connect can be used for both completely external sites, or just regular content inside an iframe. You fall into the latter category, so if you follow the instructions in that link and use the first line of code in step 2 (for the FeatureLoader), you should be ok.

Once you've included the FeatureLoader.js script and called FB.init, you should generally be up and running with FB Connect. You should be able to interact with the API from then on out. The users.getLoggedInUser() method will give you the current user id inside the iframe via Javascript.

Hope that helps.