English 中文(简体)
Facebook connect displaying invite friends dialog and closing on completion
原标题:

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

The trouble is to display a friend invite dialog you use a multi-friend form which requires an action="url" attribute that represents the URL to redirect your page to when the user completes or skips the form. The problem is that I want to just close the FBMLPopupDialog (the same behavior as if the user just hit the X button on the popup dialog). The best I can do is redirect the user back to the page they were on basically a reload but they lose all AJAX/Flash application state.

I m wondering if any Facebook Connect developers have run into this issue and have a good way to simply display a friend invite "lightbox" dialog within their website where they don t want to "refresh" or "redirect" when the user finishes.

The facebook connect JS API provides a FB.Connect.inviteConnectUsers, which provides a nice dialog but only connects existing users of your application who also have a Facebook account and haven t connected.

http://bugs.developers.facebook.com/show_bug.cgi?id=4916

function fb_inviteFriends() {
                //Invite users
                log("Inviting users...");
        FB.Connect.requireSession( 
            function() { //Connect succes

                var uid = FB.Facebook.apiClient.get_session().uid;
                log( FB CONNECT SUCCESS:   + uid);
                //Invite users
                log("Inviting users...");
                //Update server with connected account
                updateAccountFacebookUID();
                var fbml = fb_getInviteFBML() ;
                var dialog = new FB.UI. FBMLPopupDialog("Weblings Invite", fbml) ;
                //dialog.setFBMLContent(fbml);
                dialog.setContentWidth(650);
                dialog.setContentHeight(450);
                dialog.show();

            },
            //Connect cancelled
            function()  {
                //User cancelled the connect
                log("FB Connect cancelled:");    
            }
        );

} 

function fb_getInviteFBML() {
    var uid = FB.Facebook.apiClient.get_session().uid;
    var fbml = "";
    fbml = 
     <fb:fbml>
  +
         <fb:request-form
 +
                            //Redirect back to this page
                              action=" + document.location + "
 +
                              method="POST"
 +
                              invite="true"
 +
                              type="Weblings Invite"
  +
                              content="I need your help to discover all the Weblings and save the Internet! WebWars: Weblings is a cool new game where we can collect fantastic creatures while surfing our favorite websites. Come find the missing Weblings with me! + 
                            //Callback the server with the appropriate Webwars Account URL
                              <fb:req-choice url=  + WebwarsFB.WebwarsAccountServer + /SplashPage.aspx?action=ref&reftype=Facebook  label= Check out WebWars: Weblings  />"
 +
                       >
 +
                         <fb:multi-friend-selector
 +
                              rows="2"
 +
                              cols="4"
 +
                              bypass="Cancel"
 +
                              showborder="false"
 +
                              actiontext="Use this form to invite your friends to connect with WebWars: Weblings."/>
 +
                  </fb:request-form> +
          </fb:fbml> ;
    return fbml;
}
问题回答

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

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>

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

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.

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> "; 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! ". "<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>





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签