问题
I used to have an href in my website. When users clicked on it, a multi-friend selector showed so they could invite their friends to my website.
That was done using the following code:
FB.ensureInit(function() {
var dialog = new FB.UI.FBMLPopupDialog('XXXXXXX', '');
var fbml = 'Multi-Friend-Selector FBML'
dialog.setFBMLContent(fbml);
dialog.setContentWidth(620);
dialog.setContentHeight(570);
dialog.show();
});
Now, I'm using the new JavaScript SDK (http://connect.facebook.net/en_US/all.js), but the old methods are not present...
How can I do it with the new SDK?
回答1:
Yes, finally got the irritating box to resize from the original 964 pixels:
For compatibility (let's hope it will get fixed in the future, or documented better) I still say
size:(width:600,height:500),
but then I break out width and height as properties of parent object, so in the end use:
size:(width:600,height:500),width:600,height:500, ...
And now it's also resizable with the JavaScript library of your choice, that is, here's a sample with jQuery resizing:
FB.ui({
method: 'fbml.dialog',
fbml: (
'<div style="width:480px;border:1px black solid;">A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.</div>'
),
size: {width:640,height:480}, width:640, height:480
});
$(".FB_UI_Dialog").css('width', $(window).width()*0.8); // 80% of window width
// I'm also sure you could stack this call if you wanted to
回答2:
This works for me..
FB.ui({method:'fbml.dialog', fbml:'<fb:request-form action="URL" method="post" invite="true" type="TYPE" content="THIS IS THE MESSAGE <fb:req-choice url=\'URL\'label=\'Accept\' />" <fb:multi-friend-selector showborder="false" actiontext="REQUEST FORM TITLE" /> </fb:request-form>'})});
Replace the CAPS with your content.
The only problem I'm having is I can't figure out how to resize the dialog to fit the content. It stays at 964px. I've tried many versions of
size:(width:600,height:500),
Any Ideas?
回答3:
I just do this. FB.ui({ method: 'fbml.dialog', width: 500, height: 300, fbml:......
回答4:
Well, after 2 days (because I'm not a JavaScript expert :P ) of reading the open source Facebook JavaScript SDK, I found a method:
FB.ui({
method : 'fbml.dialog',
fbml: '<fb:fbml>' +
'<fb:request-form action=......',
});
It looks simple, yes I know, but now the problem is when I send the invitation, I get a new tab opened leaving the "dialog" (in Facebook terms, because popup means another thing for them!!) open!
So I am still struggeling, but I will find the answer!
回答5:
None of the previous answers were working for me. The workaround I found was to do the following:
var uiSize = FB.UIServer.Methods["fbml.dialog"].size;
FB.UIServer.Methods["fbml.dialog"].size = {width:760, height:450};
FB.ui({
method:'fbml.dialog',
display: 'popup',
fbml: message
},
function( response ){
FB.UIServer.Methods["fbml.dialog"].size = uiSize;
}
);
回答6:
The following code works for me, but please note the following:
- The width and height refer to the dialog-box itself, WITHOUT the "faded" thick blue border.
- The width + height appear in the following code in 3 places.
- The COLS and ROWS attribute match the size in the following example - 625x515 pixels.
- Since IE sucks, I had to use jQuery with $.browser to force a POP-UP in IE.
Hope this helps :)
function fb_invite_friends() {
FB.ui({method:'fbml.dialog', display:($.browser.msie ? 'popup' : 'dialog'), size:{width:625,height:515}, width:625, height:515, fbml:'<fb:request-form action="http://yoursite.com/" method="POST" invite="true" type="DayBox" content="Would you like to check out YOUR-SITE App too? <fb:req-choice url=\'http://apps.facebook.com/your-site/\' label=\'Yes\' />" <fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use DayBox" cols=5 rows=3 bypass="cancel" email_invite="true" import_external_friends="false" /> </fb:request-form>'});
}
$(document).ready(function() {
/* Facebook */
window.fbAsyncInit = function() {
FB.init({appId: fb_app_id, status: true, cookie: true, xfbml: true});
if (facebook_canvas) {
FB.Canvas.setAutoResize(4000); // Will resize the iFrame every 4000ms
}
FB.Event.subscribe('edge.create', function(response) {
// The user clicked "LIKE", so we give him more coins!
$.get(href_url, {action:'log_likes'});
});
// FBML Dialog size fix
FB.UIServer.Methods["fbml.dialog"].size = {width:625, height:515};
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
}
回答7:
you can also add display: 'dialog' and it will resize correctly.
回答8:
try this:
<script>
var uiSize = FB.UIServer.Methods["fbml.dialog"].size;
FB.UIServer.Methods["fbml.dialog"].size = {width:999};
var dialog = {
method: 'fbml.dialog',
display: 'dialog',
fbml: '<fb:request-form action="http://apps.facebook.com/xxxxx" method="post" target="_top" invite="true" type="Contest" content="Come and Join this contest!"> <fb:multi-friend-selector showborder="false" max="30" import_external_friends="false" email_invite="false" cols="5" actiontext="Invite your friends!" /></fb:request-form>',
};
FB.ui(dialog,function(response) {
alert("fbDialogDismiss();");
});
</script>
回答9:
Just in case that someone need help with application request and friend invitation here is facebook docs about that: http://developers.facebook.com/docs/reference/dialogs/requests/ and piece of code that you need is:
FB.ui({method: 'apprequests', message: 'A request especially for one person.', data: 'tracking information for the user'});
来源：https://stackoverflow.com/questions/2713379/showing-popup-in-the-new-facebook-javascript-sdk