Question

How can I edit the code below for showing a Facebook nickname or profile image after Facebook connect to my web app?

It currently works correctly but after login, the Login button disappears and no Facebook user info is shown.

<script src="//connect.facebook.net/en_US/all.js"></script>

<script type="text/javascript">

  // Initialize the Facebook JavaScript SDK
  FB.init({
    appId: 'APP_ID',
    xfbml: true,
    status: true,
    cookie: true,
  });

  // Check if the current user is logged in and has authorized the app
  FB.getLoginStatus(checkLoginStatus);

  // Login in the current user via Facebook and ask for email permission
  function authUser() {
    FB.login(checkLoginStatus, {scope:'email'});
  }

  // Check the result of the user status and display login button if necessary
  function checkLoginStatus(response) {
    if(response && response.status == 'connected') {
      alert('User is authorized');

      // Hide the login button
      document.getElementById('loginButton').style.display = 'none';

      // Now Personalize the User Experience
      console.log('Access Token: ' + response.authResponse.accessToken);
    } else {
      alert('User is not authorized');

      // Display the login button
      document.getElementById('loginButton').style.display = 'block';
    }
  }
</script>

<input id="loginButton" type="button" value="Login!" onclick="authUser();" />

Answer 1

<script type="text/javascript">

  // Initialize the Facebook JavaScript SDK
  FB.init({
    appId: '<APPID>',
    xfbml: true,
    status: true,
    cookie: true,
  });

  // Check if the current user is logged in and has authorized the app
  FB.getLoginStatus(checkLoginStatus);

  // Login in the current user via Facebook and ask for email permission
  function authUser() {
    FB.login(checkLoginStatus, {scope:'email'});
  }

function logout() {
FB.logout(function(response) {
  // user is now logged out
});

}

  // Check the result of the user status and display login button if necessary
  function checkLoginStatus(response) {
    if(response && response.status == 'connected') {
      alert('User is authorized');
      var userInfo = document.getElementById('user-info');
        FB.api('/me', function(response) {
        userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
        });i

      // Hide the login button
      document.getElementById('loginButton').style.display = 'none';

      // Now Personalize the User Experience
      console.log('Access Token: ' + response.authResponse.accessToken);
    } else {
      alert('User is not authorized');

      // Display the login button
      document.getElementById('loginButton').style.display = 'block';
    }
  }
</script>

<input id="loginButton" type="button" value="Login!" onclick="authUser();" />
<input id="logoutButton" type="button" value="Logout!" onclick="logout();" />
<div id="user-info"></div>