Javascript - Login with Facebook, display user's profile picture after logged in successfully

Question

I am making a Facebook Quiz app. Which lets the user log in with Facebook. I'm trying to display User's profile picture automatically without having to click on "Get Info" but really it kept crashing the code and it the login button stops working. Currently, it works. The user logs in then to display the profile picture, the user has to click "Get Info" button and it will display the user's profile picture. I don't want the "get info" button , I want the profile picture to be automatically displayed.

HTML:

<div id="status"></div>
   <div id="lgnbtn">
      <button onclick="login()" id="login">Login with Facebook</button>
   </div>
<button onclick="getInfo()" id="getInfo">Get Info</button>

Javascript:

// initialize and setup facebook js sdk
        window.fbAsyncInit = function() {
            FB.init({
              appId      : '1036296558220017',
              xfbml      : true,
              version    : 'v2.5'
            });

            FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    document.getElementById('status').innerHTML = 'We are connected.';
                    document.getElementById('login').style.visibility = 'hidden';
                } else if (response.status === 'not_authorized') {
                    document.getElementById('status').innerHTML = 'We are not logged in.'
                } else {
                    document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
                }
            });
        };
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        // login with facebook with extra permissions
        function login() {
            FB.login(function(response) {
                if (response.status === 'connected') {
                    document.getElementById('status').innerHTML = 'We are connected.';
                    document.getElementById('login').style.visibility = 'hidden';
                } else if (response.status === 'not_authorized') {
                    document.getElementById('status').innerHTML = 'We are not logged in.'
                } else {
                    document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
                }
            }, {scope: 'email'});
        }

    // getting basic user info
        function getInfo() {
                FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,picture.width(150).height(150)'}, function(response) {
                document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>";
            });

        }

Answer 1

Invoke getInfo(); in FB.login success handler.

 window.fbAsyncInit = function() { FB.init({ appId: '1034762986580727', xfbml: true, version: 'v2.5' }); FB.getLoginStatus(function(response) { if (response.status === 'connected') { document.getElementById('status').innerHTML = 'We are connected.'; document.getElementById('login').style.visibility = 'hidden'; } else if (response.status === 'not_authorized') { document.getElementById('status').innerHTML = 'We are not logged in.' } else { document.getElementById('status').innerHTML = 'You are not logged into Facebook.'; } }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // login with facebook with extra permissions function login() { FB.login(function(response) { if (response.status === 'connected') { document.getElementById('status').innerHTML = 'We are connected.'; document.getElementById('login').style.visibility = 'hidden'; getInfo(); // Invoke it here } else if (response.status === 'not_authorized') { document.getElementById('status').innerHTML = 'We are not logged in.' } else { document.getElementById('status').innerHTML = 'You are not logged into Facebook.'; } }, { scope: 'email' }); } // getting basic user info function getInfo() { FB.api('/me', 'GET', { fields: 'first_name,last_name,name,id,picture.width(150).height(150)' }, function(response) { console.log(response);//Check the response in console document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>"; }); } 

 <div id="status"></div> <div id="lgnbtn"> <button onclick="login()" id="login">Login with Facebook</button> </div>