Facebook – FBML rendering in IFrame application

November 22, 2008 — mahmud ahsan

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:

When you setup a new application in facebook, choose “Use iframe” for Canvas Page URL.
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>

<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 –>

</body>

</html>

** Remember XFBML is nothing but a subset of FBML that are supported for IFrame application.

** And look the green + bold color code in the above file. This is how we could render FBML code in 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:

Posted in Facebook. Tags: Facebook, facebook iframe, fbml, iframe, xfbml. 24 Comments »

vijay Says:
November 26, 2008 at 1:50 pm

tried the same but never worked dude..

mahmudahsan Says:
November 26, 2008 at 2:30 pm

@Vijay, you could send me your code. email me: mahmudahsan@yahoo.com

Ryan Says:
December 2, 2008 at 3:34 pm

For some reason, my app doesn’t like the userId?>.

It just displays the following in the browser:
This is userId ?>” useyou=’false’> My photo userId

Is there any way in XFBML to obtain the userid of the person that is logged in so that I can use it here:

All the examples I’ve seen have the uid hardcoded….

mahmud ahsan Says:
March 13, 2009 at 3:35 pm
hey brother, replace that variable of userid as your wish. no problem. and the example here i provided is tested. so i think there are something wrong in your process. try again.

damian Says:
January 15, 2009 at 12:26 pm

mahmudahsan do you have any experiencie with fb:tabs using ? Because they are rendering well in my app but i cant make the link sworks fine. For example if i use the apps.facebook/myappname/whatever.php it just render a new facebook page inside iframe. And if i use mydomain/appname/whatever.php it justs open my page instead of doing it inside the iframe. Thanks and great blog

mahmudahsan Says:
January 15, 2009 at 2:42 pm

@damian, not all the fbml tags you could successfully render in your iframe application. fb:tabs is one of them.

damian Says:
January 15, 2009 at 3:00 pm

It render fine. The problem is that attribute target=”_top” dont seems to work with it . Thanks anyway

GUSTAVO ADOLFO ALZATE Says:
August 24, 2009 at 8:22 pm
could you fix, your problem with fb:tabs using XFBML?

shikha Says:
January 28, 2009 at 5:57 am

hi
i have follow the all the steps to render the xfbml for my iframe based application.
but it seems like not rendring.
For example :
i m adding this tag on my aspx page:

Grant permission for email

tag for prompting email popup.but it is just showing simple text “Grant permission for email ” and not prompting any popup.
its not becoming hyperlink.

—when i chk the session using Fb.apiclient.get_seesion.it is coming null..but the user is login .

any suggestion?
thanks

mahmudahsan Says:
January 28, 2009 at 2:29 pm
@shikha, I’ve no idea on aspx. And there are still some limitations in XFBML and IFrame based application development.

shikha Says:
January 29, 2009 at 4:52 am

ok
i got the solution…now i can get the session for javascript api
thanks for reply…

shikha Says:
February 2, 2009 at 9:43 am

Hi
i m using xfbml tags …but they are not rendring on my page,
like i m using multifriend selector etc.

i m checking on localhost..i come to know that xfbml tags can not be render on localhost?

any suggestions?
thanks

ranacse05 Says:
March 4, 2009 at 7:06 pm

Thanks , its so nice and helpful .

faiverson Says:
March 4, 2009 at 7:46 pm

Hi…
I create one application that conteins this
A nav bar in FBML (<fb:tab-item)
A flash graphic (swf)
The problem is that if I click on any option inside the nav bar it doesn’t work properly it reloads all the page in the iFrame.
How can I fix this problem?

mahmud ahsan Says:
March 4, 2009 at 7:56 pm
@faiverson, this is not possible to work perfectly in iframe. try your own menu system.

Shayan Says:
March 13, 2009 at 7:48 am

Hello,
I have followed your tips but i was not be able to render even a simple tag in my iFrame app..my code looks like this:

…
….

This is

My photo

FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init(“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”, “xd_receiver.htm”);
});

i have also created ‘xd_receiver.htm’ and placed it in root as well as in the folder where my iFrame_FBML page resides..but no success..it only displays:

This is
My Photo

and the rest is blank..
please help me in this regard..
thanks,
Shayan.

Shayan Says:
March 13, 2009 at 7:54 am

i have placed my code after fb:serverfbml closing tab..(i hav an empty fb:serverfbml block)
and after that, i have places your javascript script as u described (before body ends.)..
…
….
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init(“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”, “xd_receiver.htm”);
…

Alexandre Says:
May 7, 2009 at 12:25 am

I have tried the code above without success, too….
I get a blank page that only displays :

Here my code:

require_login();

<fb:request-form action=”” method=”POST” invite=”true” type=”XFBML” content=”This is a test invitation from XFBML test app ” >

Hello is
my photo

fb_requirefeatures(["XFBML"], function(){
fb.facebook.init(“my_app_key”, “xd_receiver.htm”);
});

My xd_receiver.htm is in under my application directory where index.php is.

I would appreciate any kind of help, Thanks in advance.

Abhishek Says:
May 10, 2009 at 4:09 am

Its not working for me either.
Please help!!!

Abhishek Says:
May 16, 2009 at 7:14 am

I read somewhere else, its FB.init and not FB.facebook.init

Binoy Says:
July 7, 2009 at 11:40 am

Hi,
Nice article..

I am new to facebook apps. I have created one application which will ask the user to take the pledge. And on form submission, I need to set some message on that user’s wall (Message like, user_name has completed the pledge etc etc). By going trough the docs I understood that, if I use stream.publish method, I can do my functionality. Since it requires some permission, I need to show one prompt asking for permission. But I want to show the prompt as soon as th user submit the form instead of clicking on the link and showing. How can I do it ?

YouON Says:
October 16, 2009 at 9:55 am

I have a problem with Facebook Fan Widget on site interni-esterni.com it not pass the W3C validation… anyone can resolve?

i’m not a programmer

thomas Says:
October 19, 2009 at 8:15 pm

Unfortunately I am able to put all kinds of stuff on the page, including a share button but when I click it, it just loads an empty box. Other xFBML commands aren’t working even with the closing tag. I’m in need of a form on the page and using FBML is totally giving me trouble with the action, so I would like to use the iframe. Anyone else having problems actually connecting to the facebook. With these issues I also wont be able to publish on the wall, etc, etc…

redgrey Says:
November 4, 2009 at 12:12 pm

Thanks, this Example works fine
nevertheless i decided to stick to FBML app because of the additional scrollbar and other issues showing up when using iframe mode

Think Different

Blog Stats

Facebook – FBML rendering in IFrame application

24 Responses to “Facebook – FBML rendering in IFrame application”

Leave a Reply