Question

I have a problem with my code that is meant to create the Facebook Connect login popup. In the code below, if I include the click event in my document ready then it triggers the creation of 2 popups, but if I leave it outside of the document ready then it fails to create any popup. Can anybody advise?

<script type="text/javascript">

            $(document).ready(function () {

                window.FB.init({ appId: 'xxx', status: true, cookie: true, xfbml: true });

            });

            $('#fbLogin').click(function () {
                window.FB.login(function (response) {
                    if (response.status == 'connected') {
                        window.location.href = 'redirecturl';
                    }
                }, { perms: 'email' });
            });

        </script>
       <fb:login-button autologoutlink="false" perms="email" id="fbLogin">

       </fb:login-button>

Answer 1

• Clicking on fb:login-button will rise login dialog.
• Your binding on #fblogin will open second dialog

You need to choose one of fb:login-button or FB.login not both.

If you need page redirected once user is logged in just remove the FB.login call and subscribe (FB.Event.subscribe) to auth.statusChange event to check login status.

FB.Event.subscribe('auth.statusChange', function(response){
  if (response.status == 'connected') {
    window.location.href = 'redirecturl';
  }
});