Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get Facebook User Data Javascript API

For some reason I can't get the user data even though I'm pretty sure my code is correct. The object isn't returning certain values (like: link, birthday, hometown, etc). Here's what I have:

$(function () {
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
              basicAPIRequest();
            }
          });
    });

function basicAPIRequest() {
    FB.api('/me', 
        {fields: "id,about,age_range,picture,bio,birthday,context,email,first_name,gender,hometown,link,location,middle_name,name,timezone,website,work"}, 
        function(response) {
          console.log('API response', response);
          $("#fb-profile-picture").append('<img src="' + response.picture.data.url + '"> ');
          $("#name").append(response.name);
          $("#user-id").append(response.id);
          $("#work").append(response.gender);
          $("#birthday").append(response.birthday);
          $("#education").append(response.hometown);
        }
    );
  }
like image 381
Tsundoku Avatar asked Jun 04 '14 07:06

Tsundoku


1 Answers

You will need to request permissions to access these values

  • Default public profile permissions
  • Email
  • Extended Profile

Essentially your login button should have the necessary data-scope attribute value to ask the necessary permissions from the user

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

Sample code below, just fill in your Facebook API ID

<html>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : yourappid,
      xfbml      : true,
      version    : 'v2.0'
    });
  };

  (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'));


function basicAPIRequest() {
    FB.api('/me', 
        {fields: "id,about,age_range,picture,bio,birthday,context,email,first_name,gender,hometown,link,location,middle_name,name,timezone,website,work"}, 
        function(response) {
          console.log('API response', response);
          $("#fb-profile-picture").append('<img src="' + response.picture.data.url + '"> ');
          $("#name").append(response.name);
          $("#user-id").append(response.id);
          $("#work").append(response.gender);
          $("#birthday").append(response.birthday);
          $("#education").append(response.hometown);
        }
    );
  }
jQuery(document).ready(function(){
  jQuery("#load").click(function(e){
    if(typeof(FB) == "undefined") {
        alert("Facebook SDK not yet loaded please wait.")
      }
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        console.log('Logged in.');
        basicAPIRequest();

      }
      else {
        FB.login();
      }
    });      
  });

});
</script>
fb-profile-picture: <div id="fb-profile-picture"></div>
name: <div id="name"></div>
user-id: <div id="user-id"></div>
work: <div id="work"></div>
birthday: <div id="birthday"></div>
education: <div id="education"></div>

<p>1) Click login</p>
<div class="fb-login-button" data-scope="email,user_birthday,user_hometown,user_location,user_website,user_work_history,user_about_me
" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>
<p>2) Click load data</p>
<button id='load'>Load data</button>
</html>
like image 175
thewheat Avatar answered Oct 20 '22 11:10

thewheat