Facebook connect показывает диалог приглашения друзей и закрывается по завершении
Я пытаюсь создать приложение Facebook Connect, которое отображает диалоговое окно приглашения друга на странице с помощью API Javascript Facebook (через facebook.jslib.FB.UI.FBMLPopupDialog).
Проблема в том, чтобы отобразить диалоговое окно приглашения друга, которое вы используете многопользовательская форма, для которой требуется атрибут action="url", представляющий URL-адрес для перенаправления вашей страницы, когда пользователь завершает или пропускает форму. Проблема в том, что я хочу просто закрыть FBMLPopupDialog (такое же поведение, как если бы пользователь просто нажимал кнопку "X" во всплывающем диалоговом окне). Лучшее, что я могу сделать, это перенаправить пользователя обратно на страницу, на которой он находился, в основном для перезагрузки, но он теряет все состояние приложения AJAX/Flash.
Мне интересно, сталкивались ли разработчики Facebook Connect с этой проблемой и имеют хороший способ просто отобразить на своем веб-сайте диалоговое окно "лайтбокс" для приглашения друзей, где они не хотят "обновлять" или "перенаправлять", когда пользователь заканчивает работу.,
JS API facebook connect предоставляет facebook.jslib.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 ответов
Просто если кто-то будет искать что-то подобное в 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'});
Вот как я это решил
Мой 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>
Я обнаружил, что если вы укажете target="_self" в элементе формы запроса (а не в селекторе друзей, как предлагает Доменик), URL-адрес ответа загрузится в iframe, а не перезагрузит всю страницу.
Таким образом, вы можете загрузить свой собственный запрос на закрытие окна на этом этапе или, немного потрудившись, отправить сообщение родителю, чтобы автоматически закрыть весь iframe.
Если у вас есть где-то этот файл xd_receiver.html, убедитесь, что вы правильно указали путь к файлу xd_receiver.html, используя полный URL вашего сайта, например:
Можете ли вы объяснить больше о вашем приложении? Это Flash? Какие технологии вы используете для серверной части? Если у вас есть PHP, вы можете использовать лайтбокс Jquery или 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>