Develop Reference

Get user email from facebook connect with SDK java script in v2.8

I can not retrieve the facebook e-mail address of a person who connects with the facebook login button. I use JDK java script in 2.8 version
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" auto_logout_link="true"></fb:login-button>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<appId>',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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_FR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
//console.log('Check login state');
//console.log(response);
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if (response.status === 'connected') {
console.log('Connected');
testAPI();
} else if (response.status === 'not_authorized') {
console.log('Please log into this app');
} else {
console.log('Please log into Facebook.');
}
}
function testAPI() {
FB.login(function(response) {
if (response.authResponse) {
var access_token = response.authResponse.accessToken;
FB.api(
'/me',
{fields: 'id,email,cover,name,first_name,last_name,age_range,link,gender,locale,picture,timezone,updated_time,verified'},
function (response) {
console.log('response');
console.log(response);
}
);
} else {
console.log('User cancelled login or did not fully authorize.');
}
},{scope:'email'});
}
function testLogout() {
FB.logout(function(response) {
console.log(response);
});
}
</script>
I have all the information except the email. Can you help me please ?

Change:
FB.api(
'/me',
{fields: 'id,email,cover,name,first_name,last_name,age_range,link,gender,locale,picture,timezone,updated_time,verified'},
function (response) {
console.log('response');
console.log(response);
}
);
To:
FB.api(
'/me?fields=id,email,cover,name,first_name,last_name,age_range,link,gender,locale,picture,timezone,updated_time,verified',
function (response) {
console.log('response');
console.log(response);
}
);

Call function only when log in is made

I'm trying to implement a login with Facebook JavaScript SDK and PHP, so when user successfully logs in it send an AJAX request to set $_SESSION. To start I used example code from docs, but this just loops the function that sends the AJAX request, where could I get only when user logins for first time.
function statusChangeCallback(response) {
if (response.status === 'connected') {
login_FBAuth();
} 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: 'secret',
cookie: true,
xfbml: true,
version: 'v2.5'
});
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;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function login_FBAuth() {
FB.api('/me', function (response) {
$.ajax({
url: 'auth/fb_login.php',
method: 'POST',
data: {action: 'login', nombre: response.name},
success: function (server_response) {
console.log("Me fui y encontre el servidor");
console.log("El servidor responde" + server_response);
if (server_response === 'ok') {
console.log('Respuesta correcta');
window.location.href = "appmenu.php";
}
},
error: function () {
console.log("Error en respuesta servidor");
}
});
});
}
HTML
<fb:login-button scope="public_profile, email, user_posts, publish_actions" onlogin="checkLoginState();"></fb:login-button>
<div id="status"></div>

Connecting Facebook on an application

Everytime I log out my account on Facebook itself, the connected account (same account) in the app also logs out. Is this expected?
I was hoping to come up with something like Hootsuite's functionalities, starting with Facebook first.
Here is my code.
<div id="fb-root"></div>
<script>
var app_id='{!#SETTINGS.facebook_api_key#value}';
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
console.log('The user is connected.');
var fb_access_token = response.authResponse.accessToken;
console.log(fb_access_token);
rbf_setFieldValue("facebook_access_token", fb_access_token);
} else if (response.status === 'not_authorized') {
console.log('The user is not authorized.');
} else {
console.log('The user is not logged in.');
FB.login(function(response) {
console.log('Logging in.');
var fb_access_token = response.authResponse.accessToken;
console.log(fb_access_token);
rbf_setFieldValue("facebook_access_token", fb_access_token);
}, {scope: 'public_profile, manage_pages, publish_actions, user_groups'});
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : app_id,
cookie : true,
xfbml : true,
version : 'v2.1'
});
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;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Got it.
My mistake was I used FB.ui for posting to Facebook, and it requires a Facebook account to post.
The solution was to use FB.api and pass the user/page access token so that you can post without user login.
function postToSocialTimeline() {
try {
var obj = {
name: name,
description: description,
link: link,
picture: picture,
caption: caption,
message: "Test",
access_token: accessCode
};
function resp(response) {
console.log('Cancelled');
} //FB.ui(obj, resp);
FB.api('/me/feed', 'POST', obj, function(response) {
if (!response || response.error) {
console.log(!response ? 'error occurred' : response.error);
console.log('Error');
alert('Unable to post to Facebook!');
return;
} else {
alert('Requisition has been successfully posted!');
}
});
} catch (e) {}
}

email with facebook javascript api

I am trying to fetch facebook user email for my app. But when I query, the email address is returned as undefined. I am not getting how to deal with it.
Here is my code-
<body>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function(response) {}, {
scope: 'email'
});
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
FB.login(function(response) {}, {
scope: 'email'
});
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: 'app id',
cookie: true, // enable cookies to allow the server to access
xfbml: true, // parse social plugins on this page
version: 'v2.1' // use version 2.1
});
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'));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert(response.name);
alert(response.email);
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<fb:login-button perms="email" autologoutlink="true" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>

#Tobi this really saved my day :
FB.api('/me
Replaced by
FB.api('/me?fields=id,name,email,permissions', function(response) {
console.log(response.name);
console.log(response.email);
});
However, I don't understand why the scope of the following code (which is in the facebook documentation) isn't working
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">

You should use the scope attribute instead of perms in the Login Button, so the permission cannot be fetched. Try
<fb:login-button scope="public_profile,email" autologoutlink="true" onlogin="checkLoginState();">
</fb:login-button>
See:
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.2#quickstart

How to login using Facebook account?

I have been through this link and tried the code.
I am doing the same thing but there is no response coming from Facebook. No popup (not blocked). My code is given below:
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid', // App ID
channelUrl : '//myurl/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
});
FB.getLoginStatus(function(response) {
alert("Response");
alert("getloginstatus");
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
alert("Lodaed SDK");
}(document));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert("Good to see you, " + response.name + ".");
});
}
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
} else {
// cancelled
}
});
}
</script>
</div>
Please tell me what I am doing wrong. I yea, I have not any checkbox in
Select how your app integrates with Facebook.
during creating Facebook app. If I have to define url so what I have given?

<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log(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.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
console.log("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.
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: '{Your App Id}',
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.2' // use version 2.2
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
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;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log("Fb response");
console.log(response);
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
In Body , use :-
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1736082853383409',
xfbml : true,
version : 'v2.8'
});
FB.getLoginStatus(function(response){
if(response.status === 'connected'){
document.getElementById('status').innerHTML = 'we are connected';
} else if(response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'we are not logged in.'
} else {
document.getElementById('status').innerHTML = 'you are not logged in to Facebook';
}
});
// FB.AppEvents.logPageView();
};
(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 login(){
FB.login(function(response){
if(response.status === 'connected'){
document.getElementById('status').innerHTML = 'we are connected';
} else if(response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'we are not logged in.'
} else {
document.getElementById('status').innerHTML = 'you are not logged in to Facebook';
}
});
}
// get user basic info
function getInfo() {
FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id'}, function(response) {
document.getElementById('status').innerHTML = response.id;
});
}
function logout(){
FB.logout(function(response) {
document.location.reload();
});
}
</script>
<div id="status"></div>
<!-- <button onclick="getInfo()">Get Info</button> -->
<button onclick="login()">login</button>
<button onclick="logout()">logout</button>
</body>
</html>

Use this code or follow https://github.com/radhey113/facebook_login/blob/master/index1.html
window.fbAsyncInit = function() {
FB.init({
appId : '1557876490891744',
appSecret : '302f28b9110351071840458316ce232f',
xfbml : true,
version : 'v2.5'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
});
};
(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'));
// login with facebook with extened publish_actions permission
function login() {
FB.login(function(response) {
console.log(response);
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
}, {scope: 'publish_actions'});
}
// getting basic user info
function getInfo() {
FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id'}, function(response) {
document.getElementById('status').innerHTML = response.id;
});
}
// uploading photo on user timeline
function uploadPhoto() {
FB.api('/me/feed', 'post', {source: 'http://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300', message : "SHOWDOWN POST",link:'http://54.175.71.74:3000'}, function(response) {
if (!response || response.error) {
console.log(JSON.stringify(response));
document.getElementById('status').innerHTML = "Error!";
} else {
console.log(JSON.stringify(response));
document.getElementById('status').innerHTML = response.id;
}
});
}
function uploadFeed(imgUrl, des) {
console.log("img Url-------- " + imgUrl);
$scope.loaderOverlay = false;
var linkPage = 'http://playshowdown.com/feed?categoryName='+vm.stateType.categoryName+'&id='+ vm.stateType._id +
'&type='+vm.stateType.type + '&feedType='+vm.stateType.feedType;
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': linkPage,
'og:title': "Play Showdown",
'og:description': des,
'og:image': imgUrl
}
})
},
function (response) {
console.log(response);
// if(response.post_id){
if(response.error_code != 4201){
vm.areYouSure = false;
$timeout(function(){
$('.overlay').show();
$('#congract4').show();
},1000);
console.log("post response1: " + JSON.stringify(response));
}
// }
// Action after response
})
}
function readPermission() {
FB.api(
"/debug_token?input_token=EAAWI4WLX8eABAJHx3al6NIi2pLM7ZCZBXEgFUOp2gJQ3VOh7gRbLSdZBZAJgmjcuYcYT7jaqO4mrkOyUeCI2q8kuZBqZCzJajjEqPjsZAFzFnHJPhWWozOGqKRZCCvTARTOS67G04cUyeYi9RAZBSZCrZA1Jq6FOmiyksFnhSKkEaFHOQQbZB5siATE9AQCU7prTGv0ZD",
function (response) {
console.log(response)
if (response && !response.error) {
/* handle the result */
}
}
);
}