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$facebook = new Facebook(‘api_key’, ‘secret_key’);
include "facebook.php";
$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.
** 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:
November 26, 2008 at 1:50 pm
tried the same but never worked dude..
November 26, 2008 at 2:30 pm
@Vijay, you could send me your code. email me: mahmudahsan@yahoo.com
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….
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.
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
December 1, 2011 at 4:58 am
there are still some limitations in XFBML and IFrame based application development.
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.
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
August 24, 2009 at 8:22 pm
could you fix, your problem with fb:tabs using XFBML?
August 25, 2010 at 5:49 pm
I have the same problem \: is there any solution? I render tabs inside iframe
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
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.
January 29, 2009 at 4:52 am
ok
i got the solution…now i can get the session for javascript api
thanks for reply…
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
March 4, 2009 at 7:06 pm
Thanks , its so nice and helpful .
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?
March 4, 2009 at 7:56 pm
@faiverson, this is not possible to work perfectly in iframe. try your own menu system.
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.
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”);
…
May 7, 2009 at 12:25 am
I have tried the code above without success, too….
I get a blank page that only displays :
This is
My Photo
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.
May 10, 2009 at 4:09 am
Its not working for me either.
Please help!!!
May 16, 2009 at 7:14 am
I read somewhere else, its FB.init and not FB.facebook.init
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 ?
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
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…
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
January 16, 2010 at 11:29 pm
could you send me the code please?
rlwebs@gmail.com
January 20, 2010 at 2:54 pm
could you send me the code please?
to: anak@hasian.org
Thanks
January 21, 2010 at 3:57 pm
brilliant! worked for me first time…I’m actually working on integrating streamPublish into my iframe application…I’ve not managed it yet but your code seems like a good start…thanks!
January 23, 2010 at 1:23 pm
Hi
Can anybody help me??
I am developing facebook application, in which i want the username of user who has added the application to his page.
for example: if A has added the application to his page/profile, and i am viewing A’s page/profile, i must get A’s name in the application.
Is it possible, Please help.
Thanks
March 7, 2010 at 7:48 pm
I’m trying to use xFBML in an iframe as well but having no luck with it. I’m currently trying to get the test app, Footprints, to work. Here’s a look at my code. Let me know what I’m missing.
require_frame();
$user = $facebook->require_login();
// phpinfo();
if (isset($_POST['to'])) {
$prints_id = (int)$_POST['to'];
$prints = do_step($user, $prints_id);
} else {
if (isset($_GET['to'])) {
$prints_id = (int)$_GET['to'];
} else {
$prints_id = $user;
}
$prints = get_prints($prints_id);
}
echo “\n”;
?>
FB.init(“API key here – and yes, it really is there”, “stickershock/xd_receiver.htm”);
Hi <fb:name firstnameonly="true" uid="” useyou=”false”>!
<a href="get_add_url() ?>”>Put Footprints in your profile, if you haven’t already!
<?php
if ($prints_id != $user) {
echo 'Do you want to step on ?’;
echo ”;
} else {
echo ‘Step on a friend:’;
echo ”;
}
?>
These are <fb:name uid="” possessive=”true”> Footprints:
FB_RequireFeatures(['XFBML'], function(){
FB.Facebook.init(‘API Key here’, ‘xd_receiver.htm’);
});
March 23, 2010 at 11:03 am
Hello,
i got a web project developed with Visual Studio 2010. I included all tags u told to, but the FBML-Tags won’t be displayed. Any solutions?
March 23, 2010 at 1:26 pm
The mistake that was preventing my xFBML from rendering was that I didn’t add a Connect URL on the application admin page. Check that.
April 4, 2010 at 7:48 pm
hey all any one have an idea how to pass the user id to my flash game i musing the iframe tag of facebook ..plz i need it as soon as possible
April 9, 2010 at 1:47 pm
thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much
May 7, 2010 at 6:55 pm
after 10 hours of searching and trying every tutorial and code example, finally it woks thanks to your detailed example… thank you very much!
ofir
August 27, 2010 at 10:33 am
Dear Mahmud Vai, I need your help to create a fb application. It’s my first fb app. I’m facing problem creating a fb dialog window inside a iframe. Here is my code
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init(“a1************************e”, “xd_receiver.htm”);
});
new Dialog().showMessage(‘Hi There’, ‘ Hi, i\’m a default pop-up, but shh you can play with me!’ );
The above code doesn’t work. It should open a pop-up dialog. It is not doing so. Please help.
August 27, 2010 at 11:26 am
Forget this article and try this
http://thinkdiff.net/facebook/graph-api-iframe-base-facebook-application-development/
January 28, 2011 at 2:05 pm
dear i want to use i frame code in facebook , i have only url of site i want to use the data of tha site on my page ….
February 26, 2011 at 1:11 pm
I am working on an iframe application. Also, I am trying to put the generate the facebook INVITE page inside a Jquery layer. But, when loading it, it is now showing up. Please help me in this issue.
My code is given below:
<fb:request-form method="POST" type="Game" invite="true" action="xxxxxxx" content="
February 27, 2011 at 1:48 pm
With thanks for this excellent content material, I will probably connect this site in order to my own really simply syndication feeds, somebody essentially informed me personally relating to this two to three weeks ago. this is actually the greatest.
February 28, 2011 at 3:11 pm
I found a solution to create an iframe application without being a facebook developer . It’s very powerful:
http://www.facebook.com/iframe.apps
March 9, 2011 at 2:13 am
Really cool software to harness the power of your facebook fan page that addresses the change coming on March 11th http://www.fbmaxed.net for more info.
March 14, 2011 at 9:51 am
Hi,
I found a solution very usefull.
Just add the application to the fan page: http://www.facebook.com/iframe.apps
Feel free to tell it to your readers,
Bruno Bros
March 14, 2011 at 9:53 am
Hi,
I found a very useful approach.
Just add the application to the fan page:
http://www.facebook.com/iframe.apps
Feel free to tell your readers
Bruno Bros.
April 7, 2011 at 6:01 am
Hello all
How can I add Like and Frends dialog box to my webpage.
April 7, 2011 at 8:19 am
Hello Seo,
its easy loin to face book and get into the face book pages where you can add as a pages.You will get a buttons like ‘Like’,”show faces’ etc…There is a button in the last for getting the code.Click on that you will be prompted with a dialog box and copy the source code form that and paste into your website.It will work
April 8, 2011 at 1:33 pm
wGLULb http://dhY3n0fjvTtj48mG9sFnCv.com
May 7, 2011 at 10:12 pm
KERcBl http://gdjI3b7VaWpU1m0dGpvjRrcu9Fk.com
May 12, 2011 at 3:52 am
my codes are working, cool
June 19, 2011 at 11:05 am
Is this data still accurate because the post is 3 years old and I need to know is this still works?
June 23, 2011 at 10:43 am
Hey Guys….
Please anyone help me on FB like button issue…..I am trying to use XFBML in my application but some reason I am not able to use and also I am not sure where I need to keep..this code exactly…(
FB.init(“123456789000000000″,”/xd_receiver.html”);
<fb:like href="” send=”false” width=”250″ show_faces=”false” font=”" layout=button_count>
) and I would like to know whether this is correct way of coding I am not able to call xd_receiver.html.I was so confused about api key of app…
Please guys any one help me on this …since it is very urgent to add FB like button on my application…….
Thanks In Advance……………………………..
June 23, 2011 at 11:00 am
Hi…
Please …can any one send working Face book like button code (related to XFBML code) to my mail ID….sureshkolipakula@gmail.com
Please it is some what urgent……..
July 4, 2011 at 6:10 pm
inner foot tattoo,
July 24, 2011 at 10:16 pm
Hi everyone,
I have setup my fanpage made ez plugin in wordpress and also have the Iframe app setup on my facebook fan page. I have put a page before someone likes my page. now I have this problem that I don’t know how to set my destination page to my wall, right after someone clicks the “like button”. I don’t want to create another page in wordpress after: efpd-liked.
Is there a code for fanpage wall to put after “efpd-liked”? Or I’m lost somehwere?
Thanks
July 31, 2011 at 2:57 am
I also it has more protential.
September 3, 2011 at 5:29 am
Sorry, I ran out of credit latvian nymphet 552
September 3, 2011 at 5:30 am
Do you need a work permit? ukrainian nymphets nn %-[[[
September 3, 2011 at 2:48 pm
How do I get an outside line? young bikini babes 56697
September 4, 2011 at 12:07 am
How many days will it take for the cheque to clear? pinup bikini 232166
September 4, 2011 at 12:07 am
Best Site good looking freedom bbs ntmphet 207758
September 7, 2011 at 8:10 pm
A Second Class stamp combat bbs
18311
September 8, 2011 at 8:29 pm
Good crew it’s cool
nn pre teen
leqztk
September 21, 2011 at 9:51 am
In a meeting Black Nymphets
uczwo
September 23, 2011 at 6:22 pm
I’m on holiday Hussyfan Defined %-DD
September 26, 2011 at 4:24 am
A staff restaurant Preteen Lolita 0157
May 7, 2012 at 8:19 am
I truly love this particular template you have got taking with your web site. What’s the name of the template incidentally? I was looking at making use of this style for that site Let me create for my class project.