How to use XFBML fb:request-form

Do you like this story?

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.


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

5. XFBML

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>