Facebook 连接显示邀请好友对话框并在完成后关闭

Question

我正在尝试创建一个 Facebook Connect 应用程序，该应用程序使用 Facebook 的 Javascript API（通过 FBMLPopupDialog)。

麻烦的是显示您使用 的朋友邀请对话框多好友表单，需要一个 action="url" 属性，该属性表示当用户完成或跳过表单时将页面重定向到的 URL。问题是我想关闭 FBMLPopupDialog （与用户只是点击弹出对话框上的“X”按钮的行为相同）。我能做的最好的事情就是将用户重定向回他们所在的页面，基本上是重新加载，但他们会丢失所有 AJAX/Flash 应用程序状态。

我想知道是否有任何 Facebook Connect 开发人员遇到过这个问题，并且有一个好方法来简单地在其网站中显示朋友邀请“灯箱”对话框，而他们不想在用户完成时“刷新”或“重定向” 。

facebook connect JS API 提供了 FB.Connect.inviteConnectUsers< /a>，它提供了一个不错的对话框，但仅连接应用程序中也拥有 Facebook 帐户但尚未连接的现有用户。

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

我发现，如果您在请求表单元素中指定 target="_self"（而不是在好友选择器中，如 Domenic 所建议的那样），则响应 url 将在 iframe 中加载，而不是重新加载整个页面。

因此，您可以在此时加载自己的提示来关闭窗口，或者再做一点工作，向父级发送一条消息以自动关闭整个 iframe。

Answer 2

您能详细解释一下您的应用程序吗？是闪存吗？您在服务器端使用什么类型的技术。如果您有 PHP，您可以使用 Jquery lightbox 或 smoothbox 来弹出邀请页面。我使用 FBML 代码来邀请我的应用程序，即使我的应用程序的其余部分是使用 Facebook API 而不是 FBML。这是如果您有 PHP 的示例，如果您没有 PHP，您仍然可以使用它，如果您在这样做时遇到问题，请告诉我：


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<头>
<脚本类型=“text/javascript”src=“...
....你的东西在这里
.... title="stylesheet" type="text/css">

<正文>
<脚本 src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript">

http://developers.facebook.com 获取这些
$api_key = '[api_key]'; $秘密 = '[秘密]';
$app_name = "[您的应用程序名称]";
$app_url = "[你的画布页面]";
$invite_href = "[put_destination]"; // 根据需要重命名
require_once '../neo_nosrati/facebook-platform/facebook.php';
/*相应地更改可能类似于：../facebook/facebook-platform/php/facebook.php' 。您从 facebook 下载的 API 库！ */

$facebook = 新 Facebook($api_key, $secret); $facebook->require_frame();
$user = $facebook->require_login(); if(isset($_POST["ids"])) { echo "

感谢您邀请 http://apps.facebook.com/".$app_url."/\"> ;".$app_name.".

\n"; echo "

http://apps.facebook.com/ ".$app_url."/\">点击此处返回".$app_name.".

"; }

else { // 检索已授权该应用的好友数组。
$fql = '从用户中选择 uid WHERE uid IN (从朋友中选择 uid2 WHERE uid1='.$user.') AND is_app_user = 1'; $_friends = $facebook->api_client->fql_query($fql); // 将 FQL 请求中返回的用户 ID 提取到新数组中。
$朋友=数组();
if (is_array($_friends) && count($_friends)) { foreach ($_friends as $friend) { $friends[] = $friend['uid']; } } }

// 将好友数组转换为逗号分隔的字符串。
$friends = 内爆(',', $friends); // 准备所有受邀用户都会收到的邀请文本。
$content = " 已开始使用 http://apps.facebook.com/".$app_url."/\">".$app_name .“。您的消息。您一定要尝试一下！\n”。 "get_add_url()."\" label=\"类似的东西。添加应用程序！\"/>";
？>
<脚本类型=“text/fbml”>
>

<脚本类型=“text/javascript”> FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Secret Api", "../xd_receiver.htm"); });

Answer 3

如果有人会在 2011 年寻找类似的东西，这里是链接：http:// Developers.facebook.com/docs/reference/dialogs/requests/ ，您需要发送应用程序请求的代码是：

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

Answer 4

这就是我解决它的方法

我的 JS/FBML （注意多朋友选择器的 target="_self" 属性）：

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

 }

我的 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 5

如果您有此文件 xd_receiver.html，请确保使用站点的完整 url 正确指定 xd_receiver.html 文件的路径，如下所示：

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