I need to get the id, name, email and photo of the person upon clicking.
I'm doing it this way so far but it's in trouble:
<script type="text/javascript">
function statusChangeCallback(response) {
if (response.status === 'connected') {
testAPI();
}else if(response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}else{
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxx',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.6' // use version 2.2
});
};
(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/pt_BR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
FB.api('/me?fields=id,name,email,permissions', function(response) {
data_facebook = {id_facebook:response.id, name:response.name, email:response.email};
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
FB.api('/me/picture?width=400&height=400', function(response) {
data_facebook.picture = response.data.url;
$.ajax({
method: 'GET',
url: '/teste/facebook',
data: {id_facebook: data_facebook.id_facebook, name: data_facebook.name, email: data_facebook.email, picture: data_facebook.picture}
})
.success(function(data){
//window.location.href = '/teste/facebook';
});
console.log(data_facebook);
});
});
}
</script>
Sometimes ajax takes the values from the data_facebook and sometimes does not. It looks like it's running too soon, I know.
I put FB.api inside FB.api and I think it's wrong too.