How Can I Get User Email With Facebook Login Button?

javascript facebook facebook-javascript-sdk

10,578

Accualy i need full code example. Because i think facebook documents are complicated. (Or for me) And I found a solution internet. Here you can see below;

FB Login Button:

<div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true" data-scope="email,user_hometown,user_birthday,user_education_history,user_website,user_work_history"></div>

FB Sdk initialize:

(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/tr_TR/sdk.js#xfbml=1&version=v2.4&appId=***********";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Getting other user information:

  window.fbAsyncInit = function() {
    FB.init({
      appId      : '************', // Set YOUR APP ID
      channelUrl : 'http://hayageek.com/examples/oauth/facebook/oauth-javascript/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
      version    : 'v2.4',
      oauth      : true
    });

    FB.Event.subscribe('auth.authResponseChange', function(response) 
    {
     if (response.status === 'connected') 
    {
        console.log("<br>Connected to Facebook");
        //SUCCESS
        FB.api('/me', { locale: 'tr_TR', fields: 'name, email,birthday, hometown,education,gender,website,work' },
          function(response) {
            console.log(response.email);
            console.log(response.name);
            console.log(response.gender);
            console.log(response.birthday);
            console.log(response.hometown);
            console.log(response.education);
            console.log(response.website);
            console.log(response.work);
          }
        );

    }    
    else if (response.status === 'not_authorized') 
    {
        console.log("Failed to Connect");

        //FAILED
    } else 
    {
        console.log("Logged Out");

        //UNKNOWN ERROR
    }
    }); 

    };

10,578

Author by

Emre Erol

Updated on June 27, 2022

Comments

Emre Erol almost 2 years

I want to create a Facebook login button. Actually I did, but I need to get username, email and other information. How can I do this?

This is my code

<html>
<head></head>
<body>
<div id="fb-root"></div>

<script>
(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/tr_TR/sdk.js#xfbml=1&version=v2.4&appId=168750412481****";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

</script>

<div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true" data-scope="email"></div>
</body>
</html>

How can I get data-scope user email or other scope properties?