Facebook login button just won't show up

Question

I went to this page : https://developers.facebook.com/docs/facebook-login/web/login-button

I copied and pasted the code they give, in my HTML index:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

(that's right after the body tag, as they recommend), and then :

<div class="fb-login-button" data-max-rows="1" data-size="icon" data-show-faces="false" data-auto-logout-link="false"></div>

anywhere in the page, it doesn't work. The button does not show up. If I add a red border to it, a vertical red line appears, showing that the button doesn't render.

I have tried with different options, locally, on my server, and in a codepen (http://codepen.io/jeremythille/pen/EWWRdy?editors=1100), no avail.

No error in the console, no problem in the network tab. "sdk.js" is found and loaded.

What am I missing?

Answer 1

You need to initialize the facebook sdk first. See this page: https://developers.facebook.com/docs/javascript/quickstart