Q:

Facebook Javascript SDK: Login button not showing up

I recently added the Facebook login button to my site and the integration seems to work fine. The only issue I'm having is that the "Login" button is not showing up when I'm logged out of Facebook. Has anyone else had this problem?
I using code straight out of the Javascript SDK docs (https://developers.facebook.com/docs/reference/javascript):
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      oauth      : true, // enable OAuth 2.0
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

And have this element on my page:
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Login with Facebook</div>

Anyone see any issues with what I have here?

A:

Testing this code with a completely trimmed down HTML page worked just fine for me. It showed the login button if you're not logged into Facebook, and shows your friends who are on the site with you if you are. Maybe some other part of your code is interfering? Can you try with the basic HTML as I have below?
<html>
<head>

</head>
<body>

<div id="fb-root"></div>
<script>
    var appId = 'YOUR_APP_ID';
    var siteRoot = 'YOUR_HOST_NAME';

  window.fbAsyncInit = function() {
    FB.init({
      appId      : appId,
      channelURL : '//'+siteRoot+'/channel.html', // Channel File
      status     : true,
      cookie     : true,
      oauth      : true,
      xfbml      : true
    });
  };

  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Login w/ Facebook</div>

</body>
</html>

Closely related -- if you want to display something different than the default in the case of the user being logged in, you can check login status with:
FB.getLoginStatus

Or if you wanted to do something after the user logs in you can bind to the login event with:
FB.Event.subscribe('auth.login', function () {
      console.log('Hello world!');
});

