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);
}
);
}
You will need to request permissions to access these values
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With