Facebook分享通过FB.ui

时间:2014-03-13 11:50:27

标签: javascript facebook-javascript-sdk fb.ui

我正在尝试使用以下基于新文档编写的代码来显示“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点击事件

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

3 个答案:

答案 0 :(得分:7)

好的,你在那里做过一些概念上的错误。

<强>首先

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

这应该做什么?无需用户交互即可打开共享对话框?当应该出现Share Dialog时,必须调用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将在创建FB_post_feed时未定义。

取决于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,那将是最佳实践。

答案 1 :(得分:0)

我有同样的问题并通过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 });
    });
});

答案 2 :(得分:0)

将此添加到您的index.html

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