I\'m trying to create a Facebook Connect application that displays a friend invite dialog within the page using Facebook\'s Javascript API (through a FBMLPopupDialog).
I found that if you specify target="_self" in the request-form element (not in the friend selector, as Domenic suggests), the response url will load in the iframe, and not reload the whole page.
Thus, you could load your own prompt to close the window at this point, or with a little bit more work send a message to the parent to close the whole iframe automatically.
If you have somewhere this file xd_receiver.html, make sure that you correctly specify path to xd_receiver.html file using full url of your site like this:
http://www.yoursite.com/xd_receiver.html
Just if someone will look for something like this in 2011, here is link: http://developers.facebook.com/docs/reference/dialogs/requests/ , and piece of code that you need to send application request is:
FB.ui({method: 'apprequests', message: 'A request especially for one person.', data: 'tracking information for the user'});
Can you explain more about your app. Is it Flash? What type of technologies are you using for the server side. If you have PHP you could use a Jquery lightbox or smoothbox to popup the invite page. I used the FBML code for invitation for my app even thought the rest of my app was with Facebook API and not FBML. Here's and example of if you have PHP, if you don't you can still use this if you have problems doing so let me know:
<!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 type="text/javascript" src="...
.... Your stuf here
.... title="stylesheet" type="text/css">
</head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<? include "my header file was here!"; ?>
<?PHP // Get these from http://developers.facebook.com
$api_key = '[api_key]'; $secret = '[secret]';
$app_name = "[Your App name]";
$app_url = "[your canvas page]";
$invite_href = "[put_destination]"; // Rename this as needed
require_once '../neo_nosrati/facebook-platform/facebook.php';
/*change accordingly probably something like:../facebook/facebook-platform/php/facebook.php' . THE API Library you downloaded from facebook! */
$facebook = new Facebook($api_key, $secret); $facebook->require_frame();
$user = $facebook->require_login(); if(isset($_POST["ids"])) { echo "<center>Thank you for inviting ".sizeof($_POST["ids"])." of your friends on <b><a href=\"http://apps.facebook.com/".$app_url."/\">".$app_name."</a></b>.<br><br>\n"; echo "<h2><a href=\"http://apps.facebook.com/".$app_url."/\">Click here to return to ".$app_name."</a>.</h2></center>"; }
else { // Retrieve array of friends who've already authorized the app.
$fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user.') AND is_app_user = 1'; $_friends = $facebook->api_client->fql_query($fql); // Extract the user ID's returned in the FQL request into a new array.
$friends = array();
if (is_array($_friends) && count($_friends)) { foreach ($_friends as $friend) { $friends[] = $friend['uid']; } }
// Convert the array of friends into a comma-delimeted string.
$friends = implode(',', $friends); // Prepare the invitation text that all invited users will receive.
$content = "<fb:name uid=\"".$user."\" firstnameonly=\"true\" shownetwork=\"false\"/> has started using <a href=\"http://apps.facebook.com/".$app_url."/\">".$app_name."</a>. YOUR MESSAGE. You should definitely try it out!\n". "<fb:req-choice url=\"".$facebook->get_add_url()."\" label=\"Somthing like. Add app!\"/>";
?>
<fb:serverfbml style="width: 750px;"> <script type="text/fbml"> <fb:fbml>
<fb:request-form action="<? echo $invite_href; ?>" method="post" type="<? echo $app_name; ?>" content="<? echo htmlentities($content,ENT_COMPAT,'UTF-8'); ?>"> <fb:multi-friend-selector actiontext="Here are your friends who have not added the application yet." exclude_ids="<? echo $friends; ?>" /> </fb:request-form>
</fb:fbml> </script> </fb:serverfbml>
<?PHP } ?>
<script type="text/javascript"> FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Secret Api", "../xd_receiver.htm"); }); </script>
</body>
</html>
This is how I solved it
My JS/FBML (note the target="_self"
attribute for the multi-friend-selector):
var inviteDialog; // Keep a reference for the popup dialog
function makeInviteForm() {
// Set up request form elements here
var fbml = '';
fbml += '<fb:fbml>';
fbml += ' <fb:request-form type="' + requestType + '" content="' + requestContent + '" action="' + actionUrl + '" method="post" >';
fbml += ' <fb:multi-friend-selector target="_self" exclude_ids="" max=' + maxFriends + ' cols="4" rows="3" showborder="false" actiontext="Invite friends!" />';
fbml += ' </fb:request-form>';
fbml += '</fb:fbml>';
inviteDialog = new FB.UI.FBMLPopupDialog(title, fbml);
}
My PHP:
<?php
// Do processing here
?>
<script type="text/javascript">
parent.inviteDialog.close(); // You could make this call a function that does additional processing if you want
</script>