网站搜索

javascript - 通过 FB.ui 分享到 Facebook


我正在尝试使用我基于显示“发布到动态”对话框的新文档编写的以下代码(https://developers.facebook.com/docs/javascript/reference/FB.ui),但我收到以下错误“ReferenceError: FB 未定义”

我使用的代码是我能想出的最简单的:

window.fbAsyncInit = function() {     
    FB.init({
      appId      : 'xxxxxxxx',
      status     : true,
      xfbml      : true
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "http://connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));


    FB.ui({
        method: 'feed',
        name: 'Facebook Dialogs',
        link: 'https://developers.facebook.com/docs/dialogs/',
        picture: 'http://fbrell.com/f8.jpg',
        caption: 'Reference Documentation',
        description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
    });

有什么想法吗?

编辑 1

如果我想在用户点击链接时打开对话框,我会使用 jQuery 的点击事件

$(".userActions a.facebook").click(function() {
   FB.ui({
        method: 'feed',
        name: 'Facebook Dialogs',
        link: 'https://developers.facebook.com/docs/dialogs/',
        picture: 'http://fbrell.com/f8.jpg',
        caption: 'Reference Documentation',
        description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
    });
});

或者将 FB.ui 放在一个接受参数的函数中,然后调用这个函数,例如

window.fbAsyncInit = function() {     
    FB.init({
      appId      : 'xxxxxxxx',
      status     : true,
      xfbml      : true
    });

    // Code in here will run once FB has been initialised

    function FB_post_feed(method,name,link,picture,caption,description){
       FB.ui({
            method: method,
            name: name,
            link: link,
            picture: picture,
            caption: caption,
            description: description
        });
    }

};

(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "http://connect.facebook.net/en_US/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

以及在 HTML 的某个地方

$(".userActions a.facebook").click(function() {
    FB_post_feed('feed','Facebook Dialogs','https://developers.facebook.com/docs/dialogs/','http://fbrell.com/f8.jpg','Reference Documentation','Dialogs provide a simple, consistent interface for applications to interface with users.')
}

答案#1

好,你在那里犯了一些概念性的错误。

首先:

window.fbAsyncInit = function() {     
    FB.init({
        appId      : 'xxxxxxxx',
        status     : true,
        xfbml      : true
    });
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "http://connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

FB.ui({
    method: 'feed',
    name: 'Facebook Dialogs',
    link: 'https://developers.facebook.com/docs/dialogs/',
    picture: 'http://fbrell.com/f8.jpg',
    caption: 'Reference Documentation',
    description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
});

这应该做什么?在没有用户互动的情况下打开分享对话框?FB.ui 必须在分享对话框应该出现时调用,而不是在 Facebook AsyncInit 函数之后立即调用。

而且,如函数名所示,Facebook SDK 将会异步启动。这意味着在你放置函数的位置,FB 并不会被定义。

第二:

window.fbAsyncInit = function() {     
    FB.init({
        appId      : 'xxxxxxxx',
        status     : true,
        xfbml      : true
    });

    // Code in here will run once FB has been initialised

    function FB_post_feed(method,name,link,picture,caption,description){
        FB.ui({
            method: method,
            name: name,
            link: link,
            picture: picture,
            caption: caption,
            description: description
        });
    }
};

在这种情况下,FB_post_feed 函数是 fbAsyncInit 函数内部的本地函数。因此,你无法在 fbAsyncInit 外部访问 FB_post_feed 函数。

此外,FB.init 是异步的,这意味着在创建 FB_post_feed 时 FB 将是未定义的。

取决于你的 HTML 代码如何定义,以及这个标识符是否正确,代码

$(".userActions a.facebook").click(function() {
    FB.ui({
        method: 'feed',
        name: 'Facebook Dialogs',
        link: 'https://developers.facebook.com/docs/dialogs/',
        picture: 'http://fbrell.com/f8.jpg',
        caption: 'Reference Documentation',
        description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
    });
});

应该可以正常工作。不过,有个建议:类通常用来为某些东西设置样式。如果你使用按钮(或“a”元素)的 id,会是最佳做法。

答案#2

我遇到了同样的问题,并通过使用 jQuery 请求 Facebook 脚本,然后初始化它来解决:

function FB_post_feed(method,name,link,picture,caption,description){
   FB.ui({
        method: method,
        name: name,
        link: link,
        picture: picture,
        caption: caption,
        description: description
    });
}


$(document).ready(function()
{
    $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
        FB.init({ appId: 'xxxxxxxx', status: true, cookie: true, xfbml: true });
    });
});