Facebook 通过 FB.ui 分享

Question

我正在尝试使用我根据新文档编写的以下代码来显示“post to feed”对话框（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 click 事件

$(".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.')
}

Answer 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，那将是最佳实践。

Answer 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 });
    });
});

Answer 3

将此添加到您的 index.html

  <script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>