即使我刚刚使用它，FB仍未定义

Question

我正在尝试将Facebook Like按钮添加到我正在创建的小部件中。 我用来将Facebook喜欢按钮添加到我的页面的代码如下：

widget.html

<body>
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : '263071593731910',
            status : false, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });
    };
    (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
</script>
<div id="fb-button"></div>
<script type="text/javascript" src="widget.js"></script>

widget.js

$(function(){
var fb = $(document.createElement("fb:like"));
fb.attr({
    href: data.facebook,
    send: false,
    layout: 'button_count',
    width: 70,
    'show_faces': false
});
$("#fb-button").empty().append(fb);
FB.XFBML.parse($("#fb-button").get(0));
FB.Event.subscribe('edge.create',changeView);
});

*在JavaScript中也存在changeView函数。

当我运行代码时，我收到一个错误： Uncaught ReferenceError: FB is not defined即使创建了按钮，也Uncaught ReferenceError: FB is not defined 。 该错误指向包含FB.XFBML.parse代码的行。 我的JavaScript需要做些什么吗？

Answer 1

我遇到了这个问题并且解决了它与Amry提供的解决方案类似，所以我在这里发布它以防其他人需要使用它。

我初步假设在fbAsyncInit方法中进行的FB初始化调用会立即初始化，所以我也在$(document).ready()方法中编写了我对FB对象的使用。 事实并非如此。 页面加载完成初始化后，fbAsyncInit需要相当长的时间。 这是我的解决方案，在我的网站上使用jQuery时：

<script type="text/javascript">

  window.fbAsyncInit = function() {

    FB.init({
      appId      : 'your_app_id', // App ID
      channelUrl : 'your channel',
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    jQuery(document).trigger('FBSDKLoaded'); //This is the most important line to solving the issue
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=269187653191150";
     ref.parentNode.insertBefore(js, ref);
   }(document));

</script>

最后一项任务是简单地将$(document).ready()代码切换为事件的绑定。 这就是你使用FB对象的地方。

(function($) {
    $(document).bind('FBSDKLoaded', function() {
        //Code using the FB object goes here.
    });

})(jQuery);

有一件事我还应该提一下：Firefox比Chrome等Webkit浏览器更容忍。 我无法弄清楚为什么我的jQuery没有在Chrome中正常工作......好吧，这就是原因。

我希望这可以帮助别人。

Answer 2

从window.fbAsyncInit开始的那个大脚本块的重点是Facebook SDK被异步加载。

即使您已经在jQuery文档就绪回调中对FB进行了调用，但这还不足以确保在执行该代码时加载SDK。

幸运的是， window.fbAsyncInit 正是出于这个目的：在SDK加载之前它不会运行。

来自Facebook的文档：

分配给window.fbAsyncInit在加载SDK后立即运行。 加载SDK后要运行的任何代码都应放在此函数中，并在调用FB.init之后。 例如，您可以在此处测试用户的登录状态或订阅您的应用程序感兴趣的任何Facebook事件。

Answer 3

FB还没有定义在那个时间点。 你还没有使用它，你只需要早点输入它。 文档准备好后，将执行FB.XFMBL.parse行。 同样适用于//connect.facebook.net/en_US/all.js行。 因此，如果从同一事件执行代码将首先执行哪个代码并不可靠。

你可以做的是以某种方式从window.fbAsyncInit你想要执行的代码。 从那时起，您可以确定FB已准备好使用。

如果您不想混合widget.js中的代码，可以使用jQuery的自定义事件。 所以不要使用$(function() { ... }); ，你会有这样的东西：

$(window).bind('fbAsyncInit', function() {
  // Your code here
});

然后你将在FB.init()行之后调用window.fbAsyncInit调用$(window).triggerHandler('fbAsyncInit') 。

即使我刚刚使用它，FB仍未定义

问题描述

3 个解决方案

解决方案1
15 2012-12-19 17:14:50

解决方案2
15 已采纳 2011-10-12 23:24:36

解决方案3
5 2011-10-12 23:35:58

即使我刚刚使用它，FB仍未定义

问题描述

3 个解决方案

解决方案1 15 2012-12-19 17:14:50

解决方案2 15 已采纳 2011-10-12 23:24:36

解决方案3 5 2011-10-12 23:35:58

解决方案1
15 2012-12-19 17:14:50

解决方案2
15 已采纳 2011-10-12 23:24:36

解决方案3
5 2011-10-12 23:35:58