I'm trying to create a Facebook Connect application that displays a friend invite dialog within the page using Facebook's Javascript API (through a FBMLPopupDialog).
The trouble is to display a friend invite dialog you use a multi-friend form which requires an action="url" attribute that represents the URL to redirect your page to when the user completes or skips the form. The problem is that I want to just close the FBMLPopupDialog (the same behavior as if the user just hit the 'X' button on the popup dialog). The best I can do is redirect the user back to the page they were on basically a reload but they lose all AJAX/Flash application state.
I'm wondering if any Facebook Connect developers have run into this issue and have a good way to simply display a friend invite "lightbox" dialog within their website where they don't want to "refresh" or "redirect" when the user finishes.
The facebook connect JS API provides a FB.Connect.inviteConnectUsers, which provides a nice dialog but only connects existing users of your application who also have a Facebook account and haven't connected.
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;
}
For the people who like your page, you'll just see the word “Liked.” For people who don't already like your page, you'll see the word “Invite.” All you have to do is press the word “invite” and they'll receive a notification inviting them to like your page.
Block event invites from certain friendsIn the upper right corner of your profile, click the dropdown arrow, then Privacy Settings > Blocked People and Apps > Manage Blocking. Next to Block Event Invitations, add the name of the offending friend(s).
To see your upcoming events and invitations: In the bottom right of Facebook, tap. . Tap Events, then Calendar to find your upcoming events and invitations.
Just if someone will look for something like this in 2011, here is link: http://developers.facebook.com/docs/reference/dialogs/requests/ , and piece of code that you need to send application request is:
FB.ui({method: 'apprequests', message: 'A request especially for one person.', data: 'tracking information for the user'});
This is how I solved it
My JS/FBML (note the target="_self"
attribute for the multi-friend-selector):
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);
}
My 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With