Facebook – 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&#8221; 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:

  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
About these ads

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

  1. vijay Says:

    tried the same but never worked dude..

  2. mahmudahsan Says:

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

  3. Ryan Says:

    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:

      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.

  4. damian Says:

    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

  5. mahmudahsan Says:

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

  6. damian Says:

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

  7. shikha Says:

    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

  8. shikha Says:

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

  9. shikha Says:

    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

  10. ranacse05 Says:

    Thanks , its so nice and helpful .

  11. faiverson Says:

    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?

  12. Shayan Says:

    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.

  13. Shayan Says:

    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”);

  14. Alexandre Says:

    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.

  15. Abhishek Says:

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

  16. Abhishek Says:

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

  17. Binoy Says:

    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 ?

  18. YouON Says:

    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 :(

  19. thomas Says:

    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…

  20. redgrey Says:

    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

  21. Lucas Says:

    could you send me the code please?
    rlwebs@gmail.com

  22. rius Says:

    could you send me the code please?

    to: anak@hasian.org

    Thanks

  23. Phil Says:

    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! :)

  24. Paresh asvenkar Says:

    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

  25. Griztown Says:

    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’);
    });

  26. Marcel Schmidt Says:

    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?

  27. kareen zok Says:

    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

  28. deep Says:

    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

  29. ofir Says:

    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

  30. Humayun Kabir Says:

    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.

  31. bilal Says:

    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 ….

  32. shankar Says:

    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="

  33. dora games Says:

    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.

  34. koki Says:

    I found a solution to create an iframe application without being a facebook developer . It’s very powerful:

    http://www.facebook.com/iframe.apps

  35. Fb Maxed Says:

    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.

  36. Bruno Bros Says:

    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

  37. Bruno Bros Says:

    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.

  38. SEO Says:

    Hello all

    How can I add Like and Frends dialog box to my webpage.

  39. coldfusion interview Says:

    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

  40. Nyo Says:

    my codes are working, cool :)

  41. Ms Pacman Says:

    Is this data still accurate because the post is 3 years old and I need to know is this still works?

  42. sureshkv484 Says:

    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……………………………..

  43. kumar Says:

    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……..

  44. Mkprudtn Says:

    inner foot tattoo,

  45. Peter Stephenson Says:

    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

  46. Baby Games Says:

    I also it has more protential.

  47. Sbkafujm Says:

    Sorry, I ran out of credit latvian nymphet 552

  48. Ojprexfx Says:

    Do you need a work permit? ukrainian nymphets nn %-[[[

  49. Fcupaicc Says:

    How do I get an outside line? young bikini babes 56697

  50. Ngyfvniz Says:

    How many days will it take for the cheque to clear? pinup bikini 232166

  51. Hrgpjwnw Says:

    Best Site good looking freedom bbs ntmphet 207758

  52. Hjphmagg Says:

    A Second Class stamp combat bbs
    18311

  53. Sylbzfar Says:

    Good crew it’s cool :) nn pre teen
    leqztk

  54. sleeptight contract beds Says:

    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.

  55. http://tinyurl.com/openelias17781 Says:

    Your entire article, “Facebook – FBML rendering in IFrame application Think Different” ended up being well worth writing a comment on!

    Simply just desired to say you actually did a great work.
    Thank you ,Claude

  56. http://tinyurl.com/godllinch33203 Says:

    I really want to book mark this particular article, “Facebook – FBML rendering
    in IFrame application Think Different” on
    my personal blog. Do you care if I reallydo it? Thanks a lot -Joseph

  57. create new facebook page Says:

    I am sure this paragraph has touched all the internet users, its really really nice article on building up new webpage.

  58. Cat flap Says:

    Ahaa, its nice dialogue about this piece of writing here at this web site, I have read all that, so
    at this time me also commenting here.

  59. phuong phap hoc tieng anh hieu qua Says:

    The more hours of training you have, the better your chances of
    landing a desired job. The only problem why we lack in
    communication skills as far as English language is concerned is
    that the pupils starting with kindergarten are not trained well by
    their teachers as regards the macro-skills in teaching a particular
    language. Finally, parents teaching the language at home should take advantage of the easy access to English materials available around the world.

  60. katy perry concert tickets 2013 Says:

    June 6, 2013: Toronto — Air Canada Centre concerts 4/20 2010One of the largest open air festivals that is held in Punchestown.
    Brewer, who worked on the Games as a close aide to Romney.
    During the winter months, snow machines provide a fresh blanket of snow throughout the late afternoon.
    Summer is officially here and that means it’s time for some fun in the sun or use Porta-Potties.

  61. ios developers Says:

    For the reason that the admin of this site is working, no uncertainty very soon it will
    be famous, due to its feature contents.

  62. look around Says:

    Aloe vera is quite considerably a secure organic herb devoid of any acknowledged toxicity that we
    could in fact uncover in any study or treatise.
    The majority of dieters want to see weight loss instantly and will use every resource
    initially to lose this weight. Probiotic supplements
    will give you the same benefits as food sources.

  63. Anonymous Says:

    Good day! I just want to give an enormous thumbs up for the great
    info youve right here on this post. I will likely be coming back to your blog for extra soon.

  64. referencement conseils Says:

    Hey just wanted to give you a quick heads up. The text
    in your content seem to be running off the screen in Internet
    explorer. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I thought I’d post to let you know.
    The design look great though! Hope you get the issue resolved soon.
    Many thanks

  65. Gisele Says:

    Way cool! Some extremely valid points! I appreciate you writing this post plus
    the rest of the site is also really good.

  66. Cynthia Says:

    Following I noticed the motion picture, I had to look at
    the dish and above the decades I have hopefully enhanced on the unique recipe I identified.
    As soon as the fried chicken is already cooked, remove them from the skillet and arrange them in a pan, then cover with paper towels to keep
    them warm. This is certainly cheaper than taking them out for fast food and fried chicken is very simple to make.

  67. best portable vaporizer Says:

    Hand held vaporizer models are small sufficient to fit inside
    the palm of one’s hand; fantastic to just through in you pocket or purse anytime you travel. The technology is in process of being picked up by Genesis Technology Systems. If any liquid pools at the top just dab it off with a tissue, and replace the silicone cap.

  68. serovital hgh at gnc Says:

    Are there any pills that do not cause any side effects that can be used by hypothyroid people
    for weight loss? Can anyone suggest name of pills and
    source of purchase???.

  69. http://rujejamy.freeiz.com/ Says:

    I savor, lead to I found just what I was having a look
    for. You’ve ended my four day long hunt! God Bless you man. Have a nice day. Bye

  70. Знакомства Арзамас Says:

    I really like it when individuals come together and share opinions.
    Great website, stick with it!

  71. abebooks.de Says:

    My favorite fictional spy is Zeke Kelso from the 1965
    movie, That Darn Cat! Really like, Enjoy, Adore, that
    movie!!! Book is great, too!!!

  72. wireless bluetooth speakers Says:

    People often say my i – Phone Bluetooth won’t work; it’s
    not showing anything in the device’s list. The Sansa View plays well with others and does a great job in the compatibility department for a nice and versatile Video MP3 Player. Please leave a comment below, letting us know what you think.

  73. http://www.incaradvancements.co.uk Says:

    Just wish to say your article is as astonishing. The clearness to your post is just excellent and that i can
    assume you are knowledgeable on this subject. Fine with your permission
    allow me to snatch your RSS feed to stay updated with forthcoming post.
    Thank you 1,000,000 and please keep up the rewarding work.

  74. buy instagram followers Says:

    Ahaa, its nice discussion about this article here at this blog,
    I have read all that, so at this time me also commenting at this place.

  75. Walking the way pdf Says:

    Howdy! I’m at work browsing your blog from my new iphone 3gs!
    Just wanted to say I love reading your blog and look forward to all your posts!

    Carry on the excellent work!

  76. book download Says:

    magnificent issues altogether, you just won a
    new reader. What could you recommend about your submit that you simply made
    a few days in the past? Any certain?

  77. gazikolguet Says:

    why you make your application sun mobile dictionnaire in french?

  78. เครื่องปั่นจักรยานออกกําลังกาย Says:

    Greetings from Colorado! I’m bored at work so I decided to check out your blog
    on my iphone during lunch break. I really like the information you provide here
    and can’t wait to take a look when I get home. I’m shocked at how
    quick your blog loaded on my phone .. I’m not even using WIFI, just
    3G .. Anyways, amazing site!

  79. book download Says:

    Right here is the right web site for anyone who would like to find
    out about this topic. You know a whole lot its almost hard to argue with you (not that I personally would want to…HaHa).
    You certainly put a fresh spin on a subject that’s been discussed for ages.
    Wonderful stuff, just excellent!

  80. Top Blenders Says:

    Howdy would you mind letting me know which hosting company you’re using?
    I’ve loaded your blog in 3 completely different browsers
    and I must say this blog loads a lot faster then most. Can you suggest a good web hosting provider at a honest price?
    Thanks a lot, I appreciate it!

  81. Ninja blender official Website Says:

    This site certainly has all the information I needed about this subject and didn’t know
    who to ask.

  82. Amazing Selling Machine scam Says:

    What’s up Dear, are you in fact visiting this web
    site regularly, if so after that you will without doubt get fastidious know-how.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: