title: Javascript - Login with Facebook, display user's profile picture after logged in successfully
body: <p>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. <strong>I don't want the "get info" button</strong>, I want the profile picture to be automatically displayed.</p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div id="status"&gt;&lt;/div&gt;
     &lt;div id="lgnbtn"&gt;
        &lt;button onclick="login()" id="login"&gt;Login with Facebook&lt;/button&gt;
     &lt;/div&gt;
  &lt;button onclick="getInfo()" id="getInfo"&gt;Get Info&lt;/button&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>// 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 = "&lt;img src='" + response.picture.data.url + "'&gt;";
              });
  
          }
  </code></pre>