Question

I’m using the Facebook API to try and implement a login.

My problem is that when I load the page in-browser by typing XXXXXXX and hitting enter, the page loads but instead of the Facebook Login button rendering, the words “Login to Facebook” are displayed instead. The button doesn’t render, and I don’t see any Javascript errors.

However, when I hit CTRL + R, the button does load instead.

I’m shortly going to re-write the whole PHP, AJAX and Javascript code anyway and make it much nicer (a view controller, security conscientious code etc), however for when I do, can someone please help me identify the reasons for the problem described above so I can avoid this the next time around.

Steps to reproduce this error:

1. XXXXXXX – in a browser that isn’t logged in to Facebook
2. Note the button doesn’t load
3. Refresh the page
4. Note the button does load

Also, I’d also like to point out that I just tried the steps again and had to refresh multiple times to get the button to render. XXXXXX seems to work well however, I think the code is pretty much identical as well.

Answer 1

Seems to be loading fine on my end, using Chrome, ie, FF and safari. I would first suggest clearing your cache. Also you can use async loading of the sdk, then fbml parse to render button after sdk loads…

---

      <div id="loginbutton"></div>
      <div id="fb-root"></div>
<script>
      window.fbAsyncInit = function() {
        FB.init({
    appId  : 'yourAppId',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    //channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
        });
    // using xfbml parse in async to render button after sdk is download and init.
    Cbuild1 = document.getElementById('loginbutton');
    Cbuild1.innerHTML = "<fb:login-button></fb:login-button>";
setTimeout("FB.XFBML.parse(Cbuild1)", 1100);
    //
      };
      (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>

---