How to get users email and fd id using facebook login with graph api

Question

I am working for the first time with facebook API. From there documentation I found we can fetch name as below console.log(response.name); But How can I can also fetch email and fbid ?

Thanks, Enamul

<?php ?>
<div id="fb-root"></div>
<script>
  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'f', // App ID
      channelUrl : '//localhost/practices/phpTest/fblogin/login.php/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
    });
    FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
        // connected
    } else if (response.status === 'not_authorized') {
        // not_authorized
      login();
    } else {
        // not_logged_in
      login();
    }
    });

    // Additional init code here

  };

  function login() {
    FB.login(function(response) {
        if (response.authResponse) {
            // connected
          testAPI();
        } else {
            // cancelled
        }
    });
    }

  function testAPI() {

    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {

        console.log('Good to see you, ' + response.name + '.');
    });
  }

  // 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));
</script>
<?php ?>

Answer 1

In addition to adding scope="email" to the button, you need to specify which fields to return.

<fb:login-button scope="public_profile, email" onlogin="checkLoginState();" data-auto-logout-link="true" data-size="large">

function testAPI() {
    FB.api('/me', {fields: 'name, email'}, function(response) {
        console.log( response );
        console.log( response.email );
    });
}

For full code structure take a look at the facebook documentation.

Answer 2

The same way you access name. i.e

response.email and response.id

but to fetch email address you must have the permission to access it.

Add scope="email" to your FB Login Button.

[EDIT]

function login() {
    FB.login(function(response) {
        if (response.authResponse) {
            // connected
        testAPI();
        } else {
            // cancelled
        }
    }, { scope: 'email' });
    }

function testAPI() {

    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {

        console.log('Good to see you, ' + response.name + '.' + ' Email: ' + response.email + ' Facebook ID: ' + response.id);
    });
}

Here's a good tutorial for beginners: http://www.loginworks.com/technical-blogs/404-working-with-facebook-javascript-sdk

Answer 3

If anyone else is having trouble with retrieving users' email specifically, please note that Facebook won't allow you to access users' email while your app is still listed as "in-development." After switching to a "in-production" in your Facebook Developer Dashboard, email should become available. Hope this helps someone out there, as I wasted a lot of time tonight struggling to retrieve users' email.

Email: "Not available to all users because your app is not live"

Answer 4

change code to following

FB.api('/me', function(response) {
  console.log('Good to see you, ' + response.name + '.');
});

FB.api('/me?fields=name,email', function(response) {
  console.log('Good to see you, '+response.name + '---'+response.email);
});