This article explains how to render an XFBML request-form if you are using iFrames or Connect.
First, it is extremely important to have the proper connect settings.
1. Connect URL
Click the Connect tab in your application's settings, and set the Connect URL to your site's address with no ending / (i.e. http://www.ugadevelopers.com/frmatch).
(iFrame apps: Also ensure that you have set your Bookmark URL equal to your Canvas URL: http://apps.facebook.com/<yourapp>)
2. Cross-Domain Communication Channel
Next, you need to set up a cross-domain communcation channel so your Connect calls can send/receive info to FB. Enter this into a file and save it as 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.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body>
</html>
Save this file into the same directory as your application. I saved it in the /frmatch/ directory.
3. Set up your page to make Connect calls.
In the file you are trying to make Connect calls in, you need the following code segments in the correct place:
3a. <html> tag
First, you have to include some special parameters in your <html> tag to let the browser know how to render the XML:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
3b. FeatureLoader Javascript
Next, you need to include the FeatureLoader Javascript, which is responsible for loading the features necessary to make certain calls. (Note: You must place this line directly below the <body> tag!)
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
4. XFBML Loader Javascript
Add this Javascript to make sure your fbml is completely loaded before it is displayed. Place this code below the FeatureLoader script.
5. XFBML
<script type="text/javascript">
window.onload = function() {
FB_RequireFeatures(["XFBML"], function() {
FB.init('xxxxxxxxxxxxx', 'xd_receiver.htm');
FB.XFBML.Host.get_areElementsReady().waitUnitlReady(function()
{
document.getElementById("container").style.visibility = "visible";
});
});
};
</script>
Now you are ready to render XFBML in your iFrame or Connect application. To render an fb:request-form, place the following code block after the previous script:
<fb:serverFbml style="width: 755px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://apps.facebook.com/frmatch/postadd.php"
method="POST"
invite="true"
type="XFBML"
content="FriendMatch Invite Form!">
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to play FriendMatch!">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
Share
I figured this one out, but your code is cleaner :) (and it works on firefox hehe mine doesn't). Thanks again for an outstanding tutorial.
ReplyDeleteBy the way, when i create the Request-Form two scroll bars appear inside the iframe (one vertical and one horizontal). Do you know how to dissapear them?
Thanks!!
the same thing its happening to me two scroll bars appear inside the iframe. help usssss
ReplyDeleteI found the answer its really easy in your app configuration go to canvas tab and change the iframe propertties to Resizable lol
ReplyDeleteIts working fine and I can post wall message to my own id but I need to send wall message to my frien id how can I do it? Please help me on this..
ReplyDeleteThanks in advance.
when i am sending the request, its loading the page http;//connect.facebook.com/widgets/serverfbml.php
ReplyDeleteand shows that the page is missing...how to get rid of that??
Hi Michael,
ReplyDeleteCan you help me... I am struggling from last 2 months to show light popup for share and publish like facebook in IFRAME ... I tried will fb.init .. It worked fine for me till facebook rolled its new changes, now its not working for me... To get light popup like fb, we need to mention "session" parameter... But now its not working for my site... Can you help me ASAP!!!!! If needed will send you code....
FYI, I find this no longer works, instead use
ReplyDeleteMore detail here: http://af-design.com/blog/2010/11/23/fbserverfbml-on-canvas-iframe/
Facebook has started phasing out FBML and is strongly encouraging developers to switch to Requests 2.0. Using the new FB.ui({method:'apprequest',...}); in the JavaScript SDK is an easier way to do this. It also supports off-Facebook pages http://af-design.com/blog/2011/02/17/using-facebook-requests-to-promote-a-website/
ReplyDeleteHello,
ReplyDeleteCan i use above code at local system. I create a directory ant put xd-receiver.htm and test.html in that directory. test.html contains above code but it does not show ant popup. plese help me.
Hello,
ReplyDeleteCan i use above code at local system. I create a directory ant put xd-receiver.htm and test.html in that directory. test.html contains above code but it does not show ant popup. plese help me.
Excelente, muy claro el ejemplo y si funciona.
ReplyDeleteMuchas gracias.
Perfect.
ReplyDeleteRegards
Mohammad Juned K.