3

我已按照 Facebook 文档在页面上放置了登录按钮。直到最近一切正常。在我没有任何代码更改的情况下，按钮现在表现出一种奇怪的行为：

（问题 #1）如果我已经登录 Facebook（有 facebook auth cookie），那么当我访问我的网站时，即使我指定了自定义标签，按钮也只会显示“登录”。它应该显示“使用 Facebook 登录”。

（问题 #2）如果我没有登录 Facebook，那么当我访问我的网站时，fb 登录按钮根本不存在。

这是我拥有的代码：

我已将xmlns:fb="http://ogp.me/ns/fb#"和xmlns:og="http://ogp.me/ns#"作为我的主html节点的属性。

然后我有：

<div class="fb-login-container">
  <fb:login-button scope="email" size="medium" onlogin="CheckFBAccount();">Login with Facebook</fb:login-button>
</div>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" language="javascript">
    $(window).load(function ()
    {
        window.FB.init({ appId: XXXXXXXXXXX, status: true, cookie: true, xfbml: true, oauth: true });
    });
</script>

请注意，这里我正在同步加载 FB API。我尝试用这样的异步调用替换上面的脚本代码：

window.fbAsyncInit = function ()
{
   FB.init({
      appId: XXXXXXXXXXXX,
      status: true,
      cookie: true,
      xfbml: true
   });
};
(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";
   ref.parentNode.insertBefore(js, ref);
} (document));

这解决了按钮根本不显示的问题（问题 #2已解决），但如果我在系统上已经有 FB auth cookie，那么它仍然会忽略我的自定义标签（问题 #1仍然存在）。

我正在浏览论坛和文档，试图找出发生了什么变化，但还没有找到任何东西。显然 FB 再次改变了一些东西（或者可能是他们引入的一个错误）。任何帮助将非常感激。

注意：只要按钮在页面上可见（带有 of 没有我的自定义标签），单击和身份验证行为就可以了。问题再次是按钮根本没有显示或忽略我的自定义标签。

4

1 回答 1

3

我认为您需要异步加载 FB 库并滚动您自己的自定义 FB 登录按钮。

这是我从德国网站修改的一些代码 - http://daily.siebler.eu/2011/04/facebook-like-button-asynchronous-loading-with-jquery/

如果您已经在加载 jQuery，这是一个更简洁的解决方案，可让您将初始化代码保存在 $(window).load 中

<div id="fb-root"></div>
<script type="text/javascript">
   $(window).load(function ()
   {
      // Save the cache so we can restore it later
      var cache = jQuery.ajaxSettings.cache;
      jQuery.ajaxSettings.cache = true;

      // Load FB library asynchronously
      // 'en_US' is hard coded, but you could render out a variable
      // that contains the correct FB locale code for localized pages
      jQuery.getScript('//connect.facebook.net/en_US/all.js', function ()
      {
         window.FB.init({ appId: XXXXXXXXXXX, status: true, cookie: true, xfbml: true, oauth: true });

         // Wire up any additional FB events; for example, here's how
         // to listen for FB "Like" events
         window.FB.Event.subscribe("edge.create", function (response)
         {
             // Do something interesting
         });

      });

      // Restore the jQuery cache
      jQuery.ajaxSettings.cache = cache;

      // Wire up the click event for your custom FB login button
      $("#idFacebookLoginBtn").on("click", function (e)
      {
         e.preventDefault();
         window.FB.login(function () { CheckFBAccount(); }, { scope: 'email' });
         return false;
      });

   });

</script>

接下来，您需要制作自己的按钮，可能是这样的：

<div id="idFacebookLoginBtn" class="facebook-login-btn" >Login with Facebook</div>
于 2012-07-12T16:38:40.950 回答