Conecta a Facebook mostrando el diálogo de invitar amigos y cerrando al finalizar

Question

Estoy tratando de crear una aplicación de Facebook Connect que muestre un diálogo de invitación de amigo dentro de la página usando la API de Javascript de Facebook (a través de FBMLPopupDialog).

El problema es mostrar un cuadro de diálogo de amigo amigo que utiliza un formulario multi-amigo que requiere un atributo action = "url" que representa la URL para redirigir su página cuando el usuario completa u omite el formulario. El problema es que quiero cerrar el FBMLPopupDialog (el mismo comportamiento que si el usuario simplemente presionara el botón 'X' en el cuadro de diálogo emergente). Lo mejor que puedo hacer es redirigir al usuario de vuelta a la página en la que estaba básicamente una recarga, pero pierde todo el estado de la aplicación AJAX/Flash.

Me pregunto si los desarrolladores de Facebook Connect se han topado con este problema y tienen una buena manera de mostrar un diálogo de invitación "lightbox" dentro de su sitio web donde no desean "actualizar" o "redirigir" cuando el usuario termina.

facebook connect JS API proporciona un FB.Connect.inviteConnectUsers, que proporciona un diálogo agradable pero solo conecta a los usuarios existentes de su aplicación que también tienen una cuenta de Facebook y no se han conectado.

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>\n' + 
     '<fb:request-form\n'+ 
          //Redirect back to this page 
          ' action="'+ document.location +'"\n'+ 
          ' method="POST"\n'+ 
          ' invite="true"\n'+ 
          ' type="Weblings Invite"\n' + 
          ' 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\' />"\n'+ 
         '>\n'+ 
         ' <fb:multi-friend-selector\n'+ 
          ' rows="2"\n'+ 
          ' cols="4"\n'+ 
          ' bypass="Cancel"\n'+ 
          ' showborder="false"\n'+ 
          ' actiontext="Use this form to invite your friends to connect with WebWars: Weblings."/>\n'+ 
       ' </fb:request-form>'+ 
     ' </fb:fbml>'; 
    return fbml; 
} 

Answer 1

Si tiene algún lugar este archivo xd_receiver.html, asegúrese de que especifica correctamente camino hacia xd_receiver.html archivo usando completo URL de su sitio como este:

http://www.yoursite.com/xd_receiver.html

Answer 2

¿Puede explicarme más sobre su aplicación? ¿Es Flash? Qué tipo de tecnologías estás usando para el lado del servidor. Si tiene PHP, puede usar un lightbox o un smoothbox de Jquery para abrir la página de invitación. Utilicé el código FBML para invitar a mi aplicación, aunque pensé que el resto de mi aplicación estaba en la API de Facebook y no en FBML. Aquí está y el ejemplo de si tiene PHP, si no se puede seguir utilizando esta opción si tiene problemas para hacerlo por lo que me haga saber:

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

Answer 3

Así es como lo resolví

Mi JS/FBML (tenga en cuenta el atributo target="_self" para el amigo-multiselector):

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

} 

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

Answer 4

Descubrí que si especifica target = "_ self" en el elemento de formulario de solicitud (no en el selector de amigos, como sugiere Domenic), la url de respuesta se cargará en el iframe y no volverá a cargar toda la página.

Por lo tanto, puede cargar su propio aviso para cerrar la ventana en este punto, o con un poco más de trabajo, envíe un mensaje al padre para cerrar todo el iframe automáticamente.

Answer 5

Sólo si alguien va a buscar algo como esto en 2011, aquí está el enlace: http://developers.facebook.com/docs/reference/dialogs/requests/, y un trozo de código que necesita para enviar solicitud de aplicación es:

FB.ui({method: 'apprequests', message: 'A request especially for one person.', data: 'tracking information for the user'});