Facebook xFBML render on an Iframe Application
- November 25th, 2009
- Posted in Tech Recipes
- By Jonathan Rincon
- Write comment
Facebook uses XFBML as a way for you to incorporate FBML (Facebook Markup Language, an extension to HTML) into an HTML page on a Facebook Connect site or an iframe application.
~Facebook wiki.
The list of available tags that can be used as xFBML are here:
http://wiki.developers.facebook.com/index.php/XFBML
if you need to use FBML that aren’t listed on that place you can ever use the fb:serverfbml tag wich is able to render any FBML inside it. Typical FBML tags you would wrap within fb:serverfbml are those that require user input, like fb:request-form. The contents of fb:serverfbml are rendered in a Facebook iframe.
Rendering xFBML steps:
1. Go to your facebook application configuration and set the “Connect Url” to the url where your code is hosted, usually is the same URL for your “Canvas Callback URL” as seen on the post “Setup a facebook application”.
2. Create a file called xd_receiver.htm. this file handles the cross domain communication and must contain the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Cross-Domain Receiver Page</title> </head> <body> <script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/JavaScript"></script> </body> </html>
3. For the user’s browser to correctly recognize XFBML tags, you need to specify that the page is in XHTML. IE loves to bug around if you don’t include this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
4. Include the following script on the <body> not on the <head> since it loads some features and this can cause issues and errors with some browsers:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/JavaScript"></script>
5. And finally include the following script in the body after all the xFBML tags that you want to load:
<script> FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("YOUR_API_KEY_HERE", "<relative path from root>/xd_receiver.htm"); }); </script>
Alternatively if you don’t want to use the xFBML tags and use just html ad JavaScript you can render the xFBML in this way:
http://wiki.developers.facebook.com/index.php/Using_HTML_to_Imitate_XFBML
Thank you…. A lot…
This is perfect. I was looking for a good, simple tutorial on how to create a web app using xFBML – this does that. Now I just need to integrate what I’ve learned here and create a dynamic page using asp .net (i know).
Number 3 is also crucial. IE was messing with me for the longest time because of this. I’m shocked facebook devel doesn’t have this in bold, red lettering.
Quick question: does the filename NEED to be d_receiver.htm?
I only ask because I want to create a dynamic xFBML application.
You can name it any way you want.