Question

Please help me. I know this is very simple, but my bad luck 🙁

I am trying to implement facebook login with JavaScript SDK in my site by following facebook official docs. When i go to mysite login page, then facebook login window pop up automatically. But i want it after click login button.

The login button:

<p class="fb_login">or <img src="assets/img/fb-login-button.jpg" onClick="FB.login()" onlogin="alert( 'Logged In' );"></p>

Javascript:

window.fbAsyncInit = function() {
    FB.init({
      appId      : '486435991400780', // App ID
      channelUrl : '//http://localhost/ride/assets/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional init code here
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            // connected
            replace_login();
            FB.api('/me', function(response) {
                console.log('Good to see you, ' + response.name + '.');
                alert('Good to see you, ' + response.name + '.');
            });
        } else if (response.status === 'not_authorized') {
            // not_authorized
            login();
        } else {
            // not_logged_in
            login();
        }
    });
  };

  function login() {
      FB.login(function(response) {
          if (response.authResponse) {
              // connected
              window.location.reload();
          } else {
              // cancelled
              alert('User cancelled login or did not fully authorize.');
          }
      });
  }

  function replace_login(){
       FB.api('/me', function(response) {
           $('.fb_login').html('<span class="fb_logged_in">' + response.name + ', You are already logged in with Facebook!</span>');
       });
  }

  // Load the SDK Asynchronously
  (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));

on my html:

<div id="fb-root"></div>
<script src="assets/js/fb-login.js" type="text/javascript"></script>

Thanks.

Answer 1

Remove “login()” calls in javascript after the login status is checked, so that the login popup does not come up:

// Additional init code here
FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
        // connected
        replace_login();
        FB.api('/me', function(response) {
            console.log('Good to see you, ' + response.name + '.');
            alert('Good to see you, ' + response.name + '.');
        });
    }
});

Add a button (styled with CSS ideally):

<button onclick="login();">Login with Facebook</button>

Note: The button should probably be hidden by the javascript if the user is logged in (or added if not logged in).