Facebook API - 必须刷新答案

【问题标题】：Facebook API - Have to RefreshFacebook API - 必须刷新
【发布时间】：2011-11-22 17:20:31
【问题描述】：

我正在使用 Facebook API 来尝试实现登录。

我的问题是，当我通过键入 XXXXXXX 并按回车在浏览器中加载页面时，页面加载但不是 Facebook 登录按钮呈现，而是显示“登录到 Facebook”字样。该按钮不呈现，我没有看到任何 Javascript 错误。

但是，当我按下 CTRL + R 时，按钮确实加载。

无论如何，我很快就会重新编写整个 PHP、AJAX 和 Javascript 代码，并让它变得更好（视图控制器、安全意识代码等），但是当我这样做时，有人可以帮我识别上面描述的问题的原因，所以我下次可以避免这种情况。

重现此错误的步骤：

XXXXXXX - 在未登录 Facebook 的浏览器中
注意按钮不会加载
刷新页面
注意按钮会加载

另外，我还想指出，我只是再次尝试了这些步骤，并且必须多次刷新才能使按钮呈现。 XXXXXX 似乎运行良好，但我认为代码也几乎相同。

【问题讨论】：

标签： javascript facebook

【解决方案1】：

如果您使用 Chrome 或 Firefox 检查您的 HTML，当您的图像显示时，按钮 div 代码如下所示：

<div id="login_div"><div class="fb-login-button"><a class="fb_button fb_button_medium"><span class="fb_button_text">Login with Facebook</span></a></div></div>

但是，当它不显示时，它看起来像这样：

<div id="login_div"><div class="fb-login-button">Login with Facebook</div></div>

我看不到您的所有代码，但我猜测 FB Javascript 代码与设置 div 的代码存在时间问题。因此，您的 div 设置不正确，并且 CSS 无法应用相应的样式（背景图像、背景颜色）。我不能完全说出你在做什么，但似乎你只是在做标准的 if-logged-in-do-this-else-show-login-button。尝试将您的 Facebook 登录检查代码简化为：

FB.getLoginStatus(function(response) {
if (response.session) {
    fb_user_logged = 1;
    // Do or Show facebook authenticated stuff
} else {
    $("#login_div").html('<div class="fb-login-button"><a class="fb_button fb_button_medium"><span class="fb_button_text">Login with Facebook</span></a></div>');
}

});

此外，您应该使用asynchronous version 来解决这些时间依赖性。

至少，您可以先让此显示逻辑始终如一地工作，然后再将所有逻辑塞回

【讨论】：

这并没有解决我的问题，但是我很欣赏有关登录代码的建议，并将其添加到新的更新中。谢谢！
我想补充一下，这确实是一个时间问题，如果可以的话，我也会将你的答案添加为已接受的答案，谢谢。
没问题。我也得到了间歇性的结果。这是一个时间问题，因此您需要简化代码以消除同步依赖。

【解决方案2】：

使用 Chrome，即 FF 和 safari，我的加载似乎很好。我首先建议清除您的缓存。您也可以使用 sdk 的异步加载，然后在 sdk 加载后进行 fbml 解析以呈现按钮...

      <div id="loginbutton"></div>
      <div id="fb-root"></div>
<script>
      window.fbAsyncInit = function() {
        FB.init({
    appId  : 'yourAppId',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    //channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
        });
    // using xfbml parse in async to render button after sdk is download and init.
    Cbuild1 = document.getElementById('loginbutton');
    Cbuild1.innerHTML = "<fb:login-button></fb:login-button>";
setTimeout("FB.XFBML.parse(Cbuild1)", 1100);
    //
      };
      (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);
      }());
</script>

【讨论】：

已经在使用异步加载，但是在 IE 中，当我删除浏览器缓存并加载页面时，它看起来确实一切正常。有什么我可以放在那里以防止用户每次都必须删除缓存的吗？
您是否将 fbml.parse 添加到异步中？它将阻止按钮在下载 sdk 之前尝试呈现，或者从可能需要碎片整理的硬盘上的缓存中提取。或者将按钮包装在一个函数中，然后从异步中调用该函数。
我做了，添加这三行似乎没有任何改变。
正确加载按钮后，我可以在地址栏中按回车键，页面仅加载文本。当我点击刷新时，按钮确实加载了。问题是我可以在我的 iPhone 浏览器上继续加载页面，并且按钮也会间歇性地加载，尽管成功的频率要低得多。因此可能是时间问题？
这是一个时间问题。我暂时删除 jquery 并仅使用带有 xfbml 解析的异步 sdk。或在 fb.sdk 之前异步加载您的 jquery。似乎 facebook 在 jquery 之前就准备好了。

【解决方案3】：

将脚本块移动到内容 div 之后。

【讨论】：