Facebook login button is not showing up

Question

I'm using facebook login on a site to make it easier for users to login or register but I just realised that the login button is not showing up if I'm logged in into facebook. If I log out, it's displayed the expected way.

It used to work before, maybe 2 months earlier but it does not work now.

The fb:login tag is used like this:

<fb:login-button onlogin="myJScript();" />

...

<script type="text/javascript">
 window.fbAsyncInit = function() {
   FB.init({appId: '#{serviceBean.FACEBOOK_API_KEY}', status: true, cookie: true,
            xfbml: true});
  };
  (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>

So nothing special...

Has something changed in the usage of this fb:login?

Answer 1

According to the Facebook documentation if you have the show-faces attribute set to true and the user is already logged in, no login button will be shown. Try changing it to false so the login button is shown even if the user is logged in.

You can find more info here: https://developers.facebook.com/docs/reference/plugins/login/

Answer 2

I've been seeing this behavior too, so please let me know if you found it what caused it.

In the meantime, I came up with a workaround:

This code first checks to see if the user is logged into Facebook (that seems to be the only case where the button does not show sometimes). Then, it checks whether the Facebook login button appeared successfully. If it did appear, we hide the "Back-up button".

Use JS to check login status:

*Note that I'm using JQuery code ($(...) to check for the existence of the button (any element with a class of ".fb_button") and to hide backup button. If you are not using Jquery, you will have to use some standard Javascript.

function fbLoginBandaid() {

FB.getLoginStatus(function(response) {
    console.log( response );
    if ((response.status)&&(response.status=='connected')) {
        //They are logged into Facebook and are connected to our site.
    //if the Facebook button did not render, we'll show the backup
    if ($('.fb_button').length > 0) {
        $('.fbloginbackup').hide();
    }   
    }
    } else if ((response.status)&&(response.status=='notConnected')){
        //They are logged into facebook but not connected to this site
    //if the Facebook button did not render, we'll show the backup
    if ($('.fb_button').length > 0) {
        $('.fbloginbackup').hide();
    }   
    }
}); 

}

FB Init code:

window.fbAsyncInit = function() {

   /*...ALL YOUR NORMAL CODE HERE */

    fbLoginBandaid(); //bandaid fixes facebook button not showing sometimes. This forces display of a backup button we've made. Sometimes, this cuases two working buttons to show: ours and the Facebok one that should always be appearing.
};

Now, put a "backup" button in your HTML:

  <!--Backup Button -->
    <a class="fbloginbackup" title="Login with Facebook" href="#" onclick="INSERT_YOUR_LOGIN_SCRIPT(); return false;"><img src="insert_your_button_here.png" width="154" height="22" /></a>
  <!-- Button that was supposed to work all the time -->
    <fb:login-button length="long" autologoutlink="false" onlogin="fbLogin()"></fb:login-button>

Presumably you have a login script that handles Login for users that are already logged into Facebook, since you will not be presenting the Facebook login window.

Hope this helps.

Answer 3

Here's a CSS-only solution that is simpler and will probably work better than the Javascript solution I added previously.

We'll create a "backup" button (like my other answer I submitted), but instead of using Javascript to turn it on and off as needed, we'll just place it behind the fbml Facebook button. All you need to do is add a container around the button (eg the "facebookconnectbutton" div below)

This way, whenever the Facebook button fails to display, our backup button will be there to save the day:

HTML

<div id="facebookconnectbutton">
  <!--Backup Button -->
    <a class="fbloginbackup" title="Login with Facebook" href="#" onclick="INSERT_YOUR_LOGIN_HANDLER_(); return false;"><img src="/images/fblogin_backup.png" width="154" height="22" /></a>
  <!-- Button that was supposed to work all the time. Use your code for this, not mine. -->
    <fb:login-button length="long"></fb:login-button>
</div> 

Presumably, you have a JS function that handles login when someone with a Facebook session clicks the Facebook login button above.

CSS

/* This is used to put the "original" fbml facebook button on top of our "backup" */
#facebookconnectbutton {
  position:relative; 
  height: 22px; /*whatever size your button is */ 
  width: 154px; /*whatever size your button is */ 
}
#facebookconnectbuttonsignin {
  margin: 0;
}
.fbloginbackup {
  position:absolute; 
  top: 0; 
  left: 0; 
  width: 154px; /*whatever size your button is */  
  height:22px; /*whatever size your button is */  
}
.fb_button  {
  position:absolute; 
  top: 0; 
  left: 0; 
  width: 154px; /*whatever size your button is */  
  height:22px;  /*whatever size your button is */ 
  z-index:101
}
/* End FB bandaid*/

Answer 4

The button from this SDK will not ever show up if you don't open it via at least an Apache server (aka localhost:xxxx).