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

10

我正在尝试创建一个Facebook Connect应用程序,在页面内使用Facebook的Javascript API(通过FBMLPopupDialog)显示好友邀请对话框。

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

我想知道是否有任何Facebook Connect开发人员遇到过这个问题,并且有一种简单地在网站中显示好友邀请“lightbox”对话框的方法,他们不希望在用户完成后“刷新”或“重定向”。

Facebook Connect JS API提供了FB.Connect.inviteConnectUsers,它提供了一个很好的对话框,但仅连接已经连接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;
}
5个回答

8

2

这是我解决问题的方法

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

1

1
邀请表单显示正确,我相当确定我的xd_receiver已经设置正确。只是在跳过或完成时,邀请表单的行为会导致整个页面刷新,而不仅仅是关闭FBMLPopupDialog。 - Dougnukem
我曾经遇到过类似的问题,我的解决方法是将xd_receiver.html文件放在网站根目录下,这样问题就得到了解决,即对话框能够正确关闭。 - Sarfraz

1
我发现,如果在请求表单元素中指定target="_self"(而不是像Domenic建议的朋友选择器中),响应URL将在iframe中加载,而不会重新加载整个页面。
因此,在这一点上,您可以加载自己的提示来关闭窗口,或者再多做一些工作,向父级发送消息以自动关闭整个iframe。

0
你能更详细地解释一下你的应用吗?它是Flash吗?你在服务器端使用了哪种技术?如果你有PHP,你可以使用Jquery lightbox或smoothbox弹出邀请页面。我在我的应用程序中为邀请使用了FBML代码,尽管我的应用程序的其余部分都是使用Facebook API而不是FBML编写的。这里提供一个PHP的示例,如果你没有PHP,仍然可以使用这个方法,如果你在使用上遇到问题,请告诉我:

<!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="... .... 在此处添加您的内容 .... 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 "我的头文件在这里!"; ?>
<?PHP // 从http://developers.facebook.com获取以下信息 $api_key = '[api_key]'; $secret = '[secret]';
$app_name = "[您的应用程序名称]";
$app_url = "[您的画布页面]";
$invite_href = "[放置目标]"; // 根据需要重命名 require_once '../neo_nosrati/facebook-platform/facebook.php';
/*根据需要更改,可能是类似于:../facebook/facebook-platform/php/facebook.php'。从Facebook下载的API库! */

$facebook = new Facebook($api_key, $secret); $facebook->require_frame();
$user = $facebook->require_login(); if(isset($_POST["ids"])) { echo "<center>感谢您邀请".sizeof($_POST["ids"])."位好友使用<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."/\">点击此处返回".$app_name."</a>。</h2></center>"; }

else { // 检索已经授权应用程序的好友数组。 $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); // 将FQL请求中返回的用户ID提取到新数组中。 $friends = array(); if (is_array($_friends) && count($_friends)) { foreach ($_friends as $friend) { $friends[] = $friend['uid']; } }

// 将好友数组转换为逗号分隔的字符串。 $friends = implode(',', $friends); // 准备所有受邀用户将收到的邀请文本。
$content = "<fb:name uid=\"".$user."\" firstnameonly=\"true\" shownetwork=\"false\"/>已开始使用<a href=\"http://apps.facebook.com/".$app_url."/\">".$app_name."</a>。YOUR MESSAGE. 您一定要试试它!\n". "<fb:req-choice url=\"".$facebook->get_add_url()."\" label=\"类似于。添加应用程序!\"/>"; ?> <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="以下是尚未添加应用程序的好友。" exclude_ids="<? echo $friends; ?>" /> </fb:request-form> </fb:fbml> &


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接