We Keep Coding

Facebook Javascript SDK - Cannot access user email

I have implemented a facebook login on my website, and authentication works fine. I can access my users name, but nothing else implying my permissions are not working correctly. I have tried a few fixes and looked around, but it seems like nothing is fixing it :/ Here is my code:
<div class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="true" data-auto-logout-link="false" data-scope="public_profile,email,user_friends" onlogin="checkLoginState()";>
</div>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
loggedIn();
} else if (response.status === 'not_authorized') {
//User is logged into FB, but not my app
} else {
//User is not logged into FB
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'ID',
cookie : true,
xfbml : true,
version : 'v2.2'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(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'));
</script>
If anyone could lend a hand that would be great :)
Thanks!

i see you have a LoggedIn(); but its not declared anywhere in your code yet
so do just that can call the FB.api from there.
Heres how:
*create LoggedIn(): I recommend after your checkLoginState();
function LoggedIn(){
FB.api('/me),function(response){
console.log(JSON.stringify(response));
});
}
//i assume u have firebug running, so from here u can view the info u asked permission for.
//Note that if you're running on local host, it will ony show ur id and name
to get other, you would have to display them manually: like this
FB.api('/me', {locale: 'tr_TR', fields: 'id,name,first_name,last_name,gender,age_range,link,locale,email'}, function(response) {
console.log(JSON.stringify(response));
console.log(response.name);
console.log(response.email);
});
Hope this is clear enough
Read up:
https://developers.facebook.com/docs/facebook-login/web#steps

jquery get dynamic span id value

I have added facebook SDK in my web project, and i am printing all the values through id but i have one doubt.How to get the dynamic id value through jquery or javascript.
My Code
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
var fullname = document.getElementById('admin_name').innerHTML = response.name;
});
//Displaying through html
<span id="admin_name"></span> and it's printing successfully.
But when i wants to get the id value through jquery or javascript it's coming null or empty.
//Jquery Code
$(document).ready(function () {
var adminName = $("#admin_name").text();
alert(adminName);
});
My Complete Login As Facebook Code
function statusChangeCallback(response)
{
console.log(response);
if (response.status === 'connected') {
testAPI();
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {FB.init({
appId : '12345678910',
cookie : true,
xfbml : true,
version : 'v2.2'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
FB.api('/me', function(response) {
var fullname = document.getElementById('admin_name').innerHTML = response.name;
});
}
And Calling through FB Login Button
<fb:login-button max_rows="1"
size="large"
show_faces="false"
auto_logout_link="false"
onlogin="checkLoginState();">Login with Facebook
</fb:login-button>

Your problem is one of timing. The dom is going to grab what value is currently there, not one that will be there soon. At the time $(document).ready is called, your FB.api has not. Therefore, it will return null. Call the function after your FB.api is called.
Programmatically:
Stick your alert code in a function
alertMe = function(){
$(document).ready(function () {
var adminName = $("#admin_name").text();
alert(adminName);
});
}
and call that function when your FB API is done doing its thing
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
var fullname = document.getElementById('admin_name').innerHTML = response.name;
alertMe(); //send the call for the alert
});

Track canceled facebook login

I wish to track users which were presented with the Facebook Login dialog popup, and chose to close it (by clicking "cancel" or just closed the popup window).
I am using Facebook SDK and invoking FB.login()
From the docs it's unclear, but it does appear there might be some way to track this, so, if anyone here knows how, or can help, it would be appriciated. Thanks!
complete code:
var facebook = (function(){
// Configuration
var serverDomain = '365scores.com',
appID = '158698534219579';
// Load the SDK asynchronously
(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'));
window.fbAsyncInit = function(){
FB.init({
appId : appID,
cookie : true, // enable cookies
xfbml : true, // parse social plugins on this page
version : 'v2.0' // use version 2.0
});
FB.getLoginStatus(FBLoginStatus);
FB.Event.subscribe('auth.authResponseChange', FBLoginStatus);
};
function FBLoginStatus(response){
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if( response.status === 'connected' ){
// Logged into your app and Facebook.
//connected(response);
$(document).trigger('connection', ['facebook', response]);
}
else if( response.status === 'not_authorized' ){
// The person is logged into Facebook, but not your app.
}
else{
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
}
};
function checkLoginState() {
FB.getLoginStatus(function(response) {
FBLoginStatus(response);
});
}
function connected(res){
console.log( res )
console.log('FACEBOOK CONENCTED');
/*
FB.api('/me', function(response){
});
*/
}
return FBLoginStatus;
})();

FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});

Facebook not responding to Javascript API calls

I am attempting to use Facebook's Javascript SDK to get a user's login status when my page is displayed.
The code I am using is as follows:
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('Logged in');
} else {
alert('Need to log in!');
}
});
I go through the Facebook initialization without problems, and the FB.getLoginStatus() function gets called, but apparently the Facebook server does not respond. I do not receive a response of any kind.
I did put my application's ID into the initialization function, and the initialization code is downloaded from Facebook. I am debugging on Firefox using Firebug, so I know the initialization is successful and the FB.getLoginStatus() call is being made. I am simply not getting the response back from the server.
Can anyone suggest any reasons why I am not getting this response? If so, please advise.
ADDITION:
In response to Sahil Mittal's request, the entire code is provided below. It should be noted that there really isn't much more to see...
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : XXXXXXXXXXXX,
status : true,
xfbml : true
});
};
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('Logged in');
} else {
alert('Need to Log In');
}
});
</script>
<body>
<div id="fb-root"></div>
...
</body>

credit for this answer should go to CBroe. I wish that CBroe had put this as an answer so that I could give proper credit.
Nevertheless, the answer to this question is to place all FB functions inside the window.fbAsyncInit() function, as in the following example:
window.fbAsyncInit = function() {
FB.init({
appId : XXXXXXXXXXXXX,
status : false,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('Logged in');
} else {
alert('Need to Log In');
}
});
};
This is not well documented on Facebook (what else is new???), so I am posting this so that other Facebook newbies can avoid the frustration and delay that I experienced.
Again: thanks should go to CBroe for this answer.

Login button don't work on IE7,8,9

This is my first app. The login button doesn't work on my app. It is displayed, but when I click on it, nothing happens.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
....
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '306025322809511',
channel : 'http://koreplayer.fb.levelkro.com/channel.php',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function () {
if (response.authResponse) {
window.location = "/manage.php";
}
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/fr_FR/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
....
<div class="fb-login-button">Se connecter en utilisant Facebook</div>
I have tried with the channel parameter, but the style was not displayed without channel.

You need a trigger action on "fb-login-button" to call FB.login(). You can do this with onclick() or using jQuery $('.fb-login-button').click( function() { FB.login(); });
Also, the problem below won't provent login for popping up, but it'll stop the refresh after log in. So, if you're already logged in, it would make it look like nothing happens as the login box will just open and then close down because it has nothing to do.
FB.Event.subscribe('auth.login', function () {
if (response.authResponse) {
window.location = "/manage.php";
}
});
Need to change to
FB.Event.subscribe('auth.login', function (response) {
if (response.authResponse) {
window.location = "/manage.php";
}
});
Finally, windows.location should ideally have a full URL (starting with http:// or https://). Doesn't have to, but should to make it work better.
Edited after comments below:
window.fbAsyncInit = function() {
FB.init({
appId : '306025322809511',
channel : 'http://koreplayer.fb.levelkro.com/channel.php',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
FB.Event.subscribe('auth.login', function (response) {
if (response.authResponse) {
window.location = "http://koreplayer.fb.levelkro.com/manage.php";
}
});
You need to have the FB.Event subscribe inside the fbAsyncInit function:
window.fbAsyncInit = function() {
FB.init({
appId : '306025322809511',
channel : 'http://koreplayer.fb.levelkro.com/channel.php',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function (response) {
if (response.authResponse) {
window.location = "http://koreplayer.fb.levelkro.com/manage.php";
}
});
};
Late edited: I've added the "response" into the parameters for the auth-subscribe in hte second part of the post.

I use xfbml parse to render my buttons after i know js sdk has loaded, use below.
<div id="login_button"><div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '135669679827333',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'https://anotherfeed.com/emo/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
function loginbutton(){
var loginb=document.getElementById('login_button');
login.innerHTML+='<div class="fb-login-button">Se connecter en utilisant Facebook</div>';
FB.XFBML.parse(loginb);
};
setTimeout("loginbutton();", 2000);
};
// Load the SDK Asynchronously
(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/all.js#xfbml=1&appId=135669679827333";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
NOTE: this will render a login link only.

Ok, the problem is caused by iFrame of apps.facebook.com/koreplayer/, IE don't save the cookie becaused is in a frame. This is a security feature of IE to prevent fraud.