2009-11-23 5 views
10

Ich versuche, eine Facebook Connect-Anwendung zu erstellen, die einen Freund Einladung Dialog innerhalb der Seite mit Facebook Javascript API (über eine FBMLPopupDialog) angezeigt.Facebook connect Anzeigen von Einladung Freunde Dialog und Abschluss nach Abschluss

Das Problem besteht darin, ein Freundeseinladungsdialogfeld anzuzeigen, das ein Multi-Freundesformular verwendet, das ein action = "url" -Attribut benötigt, das die URL zum Umleiten der Seite an den Benutzer beim Überfüllen oder Überspringen des Formulars darstellt. Das Problem ist, dass ich nur den FBMLPopupDialog schließen möchte (das gleiche Verhalten, als ob der Benutzer einfach die 'X' Schaltfläche im Popup-Dialog drücken würde). Das Beste, was ich tun kann, ist, den Benutzer zurück zu der Seite umzuleiten, auf der sie sich befanden, im Grunde ein Neuladen, aber sie verlieren den gesamten AJAX/Flash-Anwendungszustand.

Ich frage mich, ob Facebook Connect-Entwickler auf dieses Problem gestoßen sind und eine gute Möglichkeit haben, einfach einen "fire invite" -Dialog auf ihrer Website anzuzeigen, wo sie nicht "aktualisieren" oder "umleiten" möchten wenn der Benutzer fertig ist.

Die facebook connect JS API bietet eine FB.Connect.inviteConnectUsers, die einen schönen Dialog bietet, aber nur bestehende Benutzer Ihrer Anwendung verbindet, die auch einen Facebook-Account haben und nicht verbunden sind.

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

Antwort

1

Wenn Sie irgendwo diese Datei xd_receiver.html haben, stellen Sie sicher, dass Sie richtig Datei mit voller URL Ihrer Seite wie diese geben Sie den Pfad xd_receiver.html:

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

+1

Das Formular richtig angezeigt wird laden und ich bin ziemlich sicher, dass mein xd_receiver richtig eingerichtet ist.Es ist nur das Verhalten des Einladungsformulars beim Überspringen oder Beenden bewirkt, dass die gesamte Seite aktualisiert wird, anstatt nur den FBMLPopupDialog zu schließen. – Dougnukem

+0

Ich hatte das gleiche Problem, was ich tat war, dass ich xd_receiver.html Datei auf der Website Root und Problem wurde gelöst, dh Dialog korrekt geschlossen – Sarfraz

0

Können Sie mehr über Ihre App erklären? Ist es Flash? Welche Art von Technologien verwenden Sie für die Serverseite? Wenn Sie PHP haben, können Sie einen Jquery Leuchtkasten oder eine Smoothbox verwenden, um die Einladungsseite aufzurufen. Ich habe den FBML-Code für die Einladung für meine App verwendet, obwohl der Rest meiner App mit der Facebook API und nicht mit FBML war. Hier ist und das Beispiel, wenn Sie PHP haben, wenn Sie nicht Sie diese Funktion dazu nutzen können, wenn Sie Probleme haben, tun so lassen Sie mich wissen:

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

Dies ist, wie ich es

gelöst

Mein JS/FBML (man beachte das target="_self" Attribut für den Multi-friend-Selektor):

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

} 

Meine 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

Ich habe festgestellt, dass wenn Sie target = "_ self" im Anfrageformular-Element angeben (nicht in der Freundesauswahl, wie Domenic vorschlägt), wird die Antwort-URL in den iframe geladen und nicht die gesamte Seite neu geladen.

So können Sie Ihre eigene Aufforderung laden, um das Fenster an diesem Punkt zu schließen, oder mit ein wenig mehr Arbeit eine Nachricht an den Eltern senden, um den gesamten iframe automatisch zu schließen.

8

Nur wenn jemand für so etwas wie dies im Jahr 2011 aussehen wird, ist hier Link: http://developers.facebook.com/docs/reference/dialogs/requests/, und ein Stück Code, den Sie benötigen Anwendungsanforderung senden ist:

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