Facebook Cookbook

fbml rendering in iframe application

before proceeding the main topic, at first i want to describe how to develop iframe based facebook application. i assume that, the reader have minimum knowledge of how to develop canvas based facebook application. if you never develop any facebook application please visit: http://wiki.developers.facebook.com/index.php/creating_your_first_application

steps of developing iframe based facebook application:

1. when you setup a new application in facebook, choose “use iframe” for canvas page url.
2. now set the authentication code, at your bootstrap file:


<?php
include “facebook.php”;
$facebook = new facebook(’api_key’, ’secret_key’);
$user = $facebook->require_login();

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
if (!$facebook->api_client->users_isappadded()) {
$facebook->redirect($facebook->get_add_url());
}
}
catch (exception $ex) { //this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect(callback_url);
}
?>

3. and don’t forget to place the necessary facebook php library. http://wiki.developers.facebook.com/index.php/php

now i’m describing the main topic, that is how to render xfbml or fbml in your iframe based application.

1. first create a file called xd_receiver.htm
2. place xd_receiver.htm in the root directory. suppose your application base directory is: http://myapp.com/iframeapp . then place xd_receiver.htm in iframeapp folder. now add the following html code to xd_receiver.htm .


<!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.debug.js” type=”text/javascript”></script>
</body>
</html>

now in your view file, or may be layout file, place this code. here i’m showing the layout files format for iframe application.


<!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”>

<head>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/featureloader.js.php” type=”text/javascript”></script>

</head>

<body>

<!– here is the fbml code in iframe application –>

<fb:serverfbml>
<script type=”text/fbml”>
<fb:fbml>

<fb:request-form action=”<url for post invite action, see wiki page for fb:request-form for   details>” method=”post” invite=”true” type=”xfbml” content=”this is a test invitation from xfbml test app <fb:req-choice url=’see wiki page for fb:req-choice for details’ label=’ignore the connect test app!’ />  ” >  <fb:multi-friend-selector showborder=”false” actiontext=”invite your friends to use connect.”>  </fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>

<!– here is the xfbml code –>


this is <fb:name uid=”<?=$this->userid?>” useyou=’false’> </fb:name>
my photo <fb:profile-pic uid=”<?=$this->userid?>” > </fb:profice-pic>

<!– remember all xfbml tags should be placed before below javascript code –>

<script type=”text/javascript”>
fb_requirefeatures(["xfbml"], function(){
fb.facebook.init(”place here the api key of your application“, “xd_receiver.htm”);
});
</script>

</body>

</html>

** remember xfbml is nothing but a subset of fbml that are supported for iframe application.

<fb:serverfbml> : this tag is used to renders the fbml on a facebook server inside an iframe. details of this tag is here: http://wiki.developers.facebook.com/index.php/fb:serverfbml

references:

1. http://wiki.developers.facebook.com/index.php/xfbml
2. http://wiki.developers.facebook.com/index.php/cross-domain_communication_channel
3. http://wiki.developers.facebook.com/index.php/php
4. http://wiki.developers.facebook.com/index.php/creating_your_first_application

Share and Enjoy:

9 Responses to “fbml rendering in iframe application”

lenin on February 4th, 2009

Ah! no chance to escape…. now I’m definitely gonna learn FB Apps
bijon on February 4th, 2009

really nice article mahmud bhai. Good to see you also start sharing your knowledge.
CachoFrancia on March 3rd, 2009

this is <fb:name uid=”userid?>” useyou=’false’>

my photo <fb:profile-pic uid=”userid?>” >

I work everything else but this gives me an error. How can I get the uid of the person who is connected?
thanks for your help!
Migui on March 25th, 2009

Hi, I’m new to all this stuff on programing and creating application. Is it posible to embed a website on my facebook profile? I’m a Graphic Designer who is looking to post his portfolio on the facebook profile. I try in many ways like: using html boxes applications, but nothing seems to work.. but I have the feeling that there is something that could work..
I will appreciate any suggestion on the matter..
thanks in advance…
Chris on September 10th, 2009

Why does the FB.init() function need to be the very last thing called? All xfbml tags must come before it, but why?
matt on March 26th, 2010

Man, it’s really hard to try and copy & paste this code. It often copies with all of the line numbers, which have to be manually removed. It’s a great article, thanks for it, but a downloadable file would be infinitely more convenient
Gabriel on April 19th, 2010

Hi, thanks for helping us people who really don’t know how to do this.

Can you please help me, I want to embed a website into my fecebook fan page, I don’t know how, I tried installing FMBL and then using a regular embedding code but it didn’t work, can you please help me?

Thanks
awaidell on June 17th, 2010

I am trying to put the fb:req-choice within the content=”" but I am not able to do this on an XHTML page. Any thoughts around this?
noirita on July 13th, 2010

is there any function which includes fbjs file into fbml code?

thanks