Facebook Graph API: FB.login() called before calling FB.init()

Question

I'm trying to use the new Facebook Graph API on my website. This is what I have:

Somewhere on the page:

<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>

Right after the tag:

<div id="fb-root">
    </div>
    <script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({ appId: '<%= ConfigurationManager.AppSettings["FBAppId"] %>', status: true, cookie: true, xfbml: true });

            /* All the events registered */
            FB.Event.subscribe('auth.login', function (response) {
                // do something with response
                alert("login success");
            });
            FB.Event.subscribe('auth.logout', function (response) {
                // do something with response
                alert("logout success");
            });

            FB.getLoginStatus(function (response) {
                if (response.session) {
                    // logged in and connected user, someone you know
                    alert("login success");
                }
            });
        };
        (function () {
            var e = document.createElement('script');
            e.type = 'text/javascript';
            e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        } ());
    </script>

but when I click on the generated login button, nothing happens.

In addition, I'm getting

FB.getLoginStatus() called before calling FB.init().

in Firebug console.

Any ideas?

Answer 1

I can't believe it, I was referencing a non existing key in the Web.config hence FB.init was failing silently.

It works as expected now.