2009-11-23 54 views
10

我正嘗試創建一個Facebook Connect應用程序,該應用程序使用Facebook的Javascript API(通過FBMLPopupDialog)在頁面內顯示朋友邀請對話框。Facebook連接顯示邀請朋友對話框並在完成時關閉

問題是顯示一個朋友邀請對話框,您使用多朋友表單,該表單需要一個action =「url」屬性,該屬性表示在用戶完成或跳過表單時將頁面重定向到的URL。問題是我只想關閉FBMLPopupDialog(就像用戶剛剛點擊彈出對話框上的'X'按鈕一樣)。我能做的最好的事情是將用戶重定向到他們基本上正在重新加載的頁面,但他們會丟失所有的AJAX/Flash應用程序狀態。

我想知道是否有任何Facebook Connect開發者遇到了這個問題,並有一個很好的方式來簡單地在他們的網站中顯示一個朋友邀請「燈箱」對話框,他們不想「刷新」或「重定向」當用戶完成時。

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

回答

1

如果你有地方這個文件xd_receiver.html,請確保您正確使用你的網站的完整URL像這樣指定路徑xd_receiver.html文件:

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

+1

正確邀請的形式顯示和我很確定我的xd_receiver安裝正確。這只是跳過或完成時邀請表單的行爲而導致整個頁面刷新,而不僅僅是關閉FBMLPopupDialog。 – Dougnukem 2009-11-24 00:23:17

+0

我有類似的問題,我所做的是,我把xd_receiver.html文件的網站的根和問題解決了,即對話框關閉正確 – Sarfraz 2009-11-24 05:42:42

0

你能解釋更多關於你的應用程序嗎?它是Flash嗎?你在服務器端使用什麼類型的技術。如果你有PHP,你可以使用Jquery的lightbox或smoothbox彈出邀請頁面。我使用了FBML代碼來邀請我的應用程序,甚至認爲我的應用程序的其餘部分是使用Facebook API而不是FBML。下面是和舉例來說,如果你有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="... .... 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>

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

我發現如果在request-form元素中指定target =「_ self」(不是在朋友選擇器中,如Domenic所建議的那樣),響應URL將加載到iframe中,而不是重新加載整個頁面。

因此,您可以加載自己的提示以關閉此窗口,或者使用一點點工作將消息發送給父級以自動關閉整個iframe。