Facebook login button disappeared

Question

I have followed the Facebook documentation to put a Login button on a page. Everything was working fine until recently. Without any code change on my part the button now exhibits a strange behavior:

(problem #1) if I am already logged into Facebook (have facebook auth cookie) then when I visit my site the button just shows "Log In" even though I have specified a custom tag. It should show "Login with Facebook".

(problem #2) If I am not logged into Facebook, then when I visit my site the fb login button is not there at all.

Here is the code that I have:

I have included xmlns:fb="http://ogp.me/ns/fb#" and xmlns:og="http://ogp.me/ns#" as attributes to my main html node.

Then I have:

<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>

Please note that here I am loading the FB API synchronously. I have tried replacing the above script code with an asynchrounous call like this:

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));

This fixes the problem of button not showing up at all (problem #2 solved) but if I already have FB auth cookie on the system then it still ignores my custom label (problem #1 still there).

I am going through the forums and documentation trying to figure out what changed but have not found anything yet. Clearly FB changed something again (or perhaps it's a bug that they introduced). Any help would be much appreciated.

NOTE: As long as the button is visible on the page (with of without my custom label) the click and authentication behavior is fine. Again the problem is the button not showing up at all or ignoring my custom label.

Answer 1

I think you'll need to load the FB libraries asynchronously and roll your own custom FB login button.

Here's some code I modified from a German website - http://daily.siebler.eu/2011/04/facebook-like-button-asynchronous-loading-with-jquery/

If you're already loading jQuery, this is a cleaner solution that lets you keep your initialization code inside of $(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>

Next, you'd need to make your own button, maybe like this:

<div id="idFacebookLoginBtn" class="facebook-login-btn" >Login with Facebook</div>