How to make facebook login button required to click?

Question

<script>
    function initFbLogin() {
        window.fbAsyncInit = function() {
            FB.init({
                appId      : '<?php echo $this->config_model->load_single('fbconnect_app_id'); ?>',
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                xfbml      : true  // parse XFBML
            });

            FB.Event.subscribe('auth.authResponseChange', function(response) {
                if (response.status === 'connected') {
                    setField();
                } else if (response.status === 'not_authorized') {
                    FB.login();
                } else {
                    FB.login();
                }
            });
        };

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

    function setField() {
        FB.api('/me', function(data) {
            //console.log('Good to see you, ' + data.name + '.' + data.id+' '+data.first_name+' '+data.last_name+' '+data.gender+' '+data.email+' '+data.username);
            // try to validate account that linked with facebook.
            $.ajax({
                url: base_url+'account/login/ajax_fb_login',
                type: 'POST',
                data: csrf_name+'='+csrf_value+'&account_email='+data.email+'&facebook_id='+data.id,
                dataType: 'json',
                success: function(logindata) {
                    if (logindata.login_result === true) {
                        <?php if (isset($go_to)) { ?> 
                        window.location = '<?php echo urldecode($go_to); ?>';
                        <?php } else { ?> 
                        window.location = base_url;
                        <?php } ?> 
                    } else {
                        alert(logindata.login_result_text);
                    }
                }
            });
        });
    }
</script>
<fb:login-button show-faces="false" width="200" max-rows="1" scope="email,user_birthday"></fb:login-button>

This code make button login without click if user logged in to facebook.
How to make it required to click before login?

Answer 1

Don't use FB.Event.subscribe() if you don't want to auto-login the user.

Instead, just create a normal button <button></button> and on its click perform actions you want using FB.getLoginstatus() and FB.login(). So, on click of this button do this:

$( "#my_fb_button" ).click(function() {
   FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
         setField();
      } else if (response.status === 'not_authorized') {
        // the user is logged in to Facebook, 
        // but has not authenticated your app
        login();
      } else {
        // the user isn't logged in to Facebook.
        login();
      }
   });
});

function login()
{
    FB.login(function(response) {
       if (response.authResponse) {
          setField();
        } else {
          console.log('User cancelled login or did not fully authorize.');
        }
    }, {scope: 'email,user_birthday'});
}

Hope the flow is clear now. Many apps use this flow too and it works like charm. Good luck!

Answer 2

I am at a similar question here and I found this post: facebook API how is onlogin called

There is an method to assign your javascript function to assign on the login button onlogin='your_javascript_function() to be added into your button.