在新的 Facebook JavaScript SDK 中显示弹出窗口

Posted 2023-03-17

【中文标题】在新的 Facebook JavaScript SDK 中显示弹出窗口

【英文标题】：Showing popup in the new Facebook JavaScript SDK

【发布时间】：2010-04-26 12:25:44

【问题描述】：

我曾经在我的网站上有一个href。当用户点击它时，会显示一个多朋友选择器，以便他们可以邀请他们的朋友访问我的网站。 这是使用以下代码完成的：

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

现在，我正在使用新的 javascript SDK (http://connect.facebook.net/en_US/all.js)，但旧方法不存在... 如何使用新的 SDK 做到这一点？

【参考方案1】：

是的，终于让烦人的盒子从原来的 964 像素调整大小：

为了兼容性（希望它在未来得到修复，或者更好地记录） 我还是说

size:(width:600,height:500),

但后来我将宽度和高度分解为父对象的属性，所以最终使用：

size:(width:600,height:500),width:600,height:500, ...

现在它也可以使用您选择的 JavaScript 库来调整大小，也就是说，这里有一个 jQuery 调整大小的示例：

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】：

这对我有用..

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

将大写字母替换为您的内容。

我遇到的唯一问题是我不知道如何调整对话框的大小以适应内容。它保持在 964 像素。我试过很多版本的

size:(width:600,height:500),

有什么想法吗？

【讨论】：

很遗憾没有，我还有这2个问题：1）邀请后，打开一个新窗口2）对话框大小！！

【参考方案3】：

我只是这样做。 FB.ui( method: 'fbml.dialog', width: 500, height: 300, fbml:......

【参考方案4】：

好吧，在阅读了开源 Facebook JavaScript SDK 2 天后（因为我不是 JavaScript 专家：P），我找到了一个方法：

FB.ui(
            method : 'fbml.dialog',
            fbml: '<fb:fbml>' +
                  '<fb:request-form action=......',
        );

看起来很简单，是的，我知道，但现在的问题是，当我发送邀请时，我打开了一个新标签，留下了“对话框”（在 Facebook 术语中，因为弹出窗口对他们来说意味着另一件事！！）打开！

所以我还在苦苦挣扎，但我会找到答案的！

【参考方案5】：

以前的答案都不适合我。 我发现的解决方法是执行以下操作：

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】：

以下代码适用于我，但请注意以下几点：

宽度和高度是指对话框本身，没有“褪色”的蓝色粗边框。 宽度+高度出现在以下代码中的3处。 COLS 和 ROWS 属性与以下示例中的大小匹配 - 625x515 像素。 由于 IE 很烂，我不得不使用带有 $.browser 的 jQuery 来强制在 IE 中弹出一个 POP-UP。

希望这会有所帮助:)

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】：

您还可以添加 display: 'dialog' ，它会正确调整大小。

【参考方案8】：

试试这个：

    <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】：

以防万一有人在申请请求和好友邀请方面需要帮助，请参阅 Facebook 文档：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');