Question

我已按照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。我试过用这样的asynchrounous调用替换上面的脚本代码：

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再次改变了一些东西（或许这是他们引入的一个错误）。任何帮助将不胜感激。

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

Answer 1

我认为您需要异步加载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>

Facebook登录按钮消失了

1 个答案: