I'm trying to get some basic information using Facebook api, but so far I only get the user's name and id. As in { name: "Juan Fuentes", id: "123456" }
I need to get mor einformation, like email, first name, last name and birthday
This is my js code
function facebookLogin() {
FB.login(function(response) {
var token = response.authResponse.accessToken;
var uid = response.authResponse.userID;
if (response.authResponse) {
FB.api('/me', 'get', { access_token: token }, function(response) {
console.log(response);
});
FB.api('/'+uid, 'get', { access_token: token }, function(response) {
console.log(response);
});
}
},
{ scope: 'public_profile' }
);
}
And this is the button that activates it
<a id="fb-login" href="#" onclick="facebookLogin()"></a>
You need to manually specify each field since Graph API v2.4:
https://developers.facebook.com/docs/apps/changelog#v2_4
https://developers.facebook.com/docs/javascript/reference/FB.api
Declarative Fields
To try to improve performance on mobile networks, Nodes and Edges in v2.4 requires that you explicitly request the field(s) you need for your GET requests. For example, GET /v2.4/me/feed no longer includes likes and comments by default, but GET /v2.4/me/feed?fields=comments,likes will return the data. For more details see the docs on how to request specific fields.
E.g.
FB.api('/me', 'get', { access_token: token, fields: 'id,name,gender' }, function(response) {
console.log(response);
});
It's also possible to use this syntax for data from public_profile scope (tested in Graph API v2.9):
FB.api('/me?fields=birthday,link,gender,age_range', function(response) {
console.log(response);
});
You can test the possible values online in Graph API Explorer, just click "Get Token" button:
https://developers.facebook.com/tools/explorer/?method=GET&path=me%3Ffields%3Dbirthday%2Clink%2Cgender%2Cage_range&version=v2.9
Here is the complete Script:
jQuery(document).ready(function () {
openLoginPopup();
})
function openLoginPopup() {
FB.getLoginStatus(function (response) {
if (response.status == 'connected') {
getCurrentUserInfo(response);
} else {
FB.login(function (response) {
if (response.authResponse) {
getCurrentUserInfo(response);
} else {
console.log('Auth cancelled.');
}
}, {scope: 'email'});
}
});
}
function getCurrentUserInfo() {
FB.api('/me?fields=id,email,first_name,last_name,name', function (userInfo) {
console.log(userInfo.name + ': ' + userInfo.email);
});
}
window.fbAsyncInit = function () {
FB.init({
// appId: 'xxxxxxxxxxxxxxxxxxxxx', //livemode
appId: 'xxxxxxxxxxxx', //testmode
cookie: true, // Enable cookies to allow the server to access the session.
xfbml: true, // Parse social plugins on this webpage.
version: 'v4.0' // Use this Graph API version for this call.
});
};
(function (d, s, id) { // Load the SDK asynchronously
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Thanks.
Note that email is not always returned by a call to the me api with email as field, even if scope email was requested and granted, if e.g. the user signed up with a phone number:
https://developers.facebook.com/docs/facebook-login/permissions#reference-email
Related
I am trying to implement FacbookSDK 2.8 for my website and below is the simplified version of the code.
<button onclick="logout()">Logout</button>
<button onclick="login()">LogIn</button>
<script>
(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'));
setTimeout(() => {
window.fbAsyncInit = () => {
FB.init({
appId: 'xxxxxxx', //My app id here
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.8' // use graph api version 2.8
});
checkFBLoginStatus();
}
})
function checkFBLoginStatus() {
FB.getLoginStatus((response) => {
console.log(response)
});
}
function logout() {
FB.logout(function(response) {
console.log(response)
})
}
function login() {
FB.login(function(response) {
console.log(response)
FB.api('/me?fields=id,email,name', function(response) {
console.log(JSON.stringify(response));
});
}, {
scope: 'email'
})
}
function onLoginSuccess() {
FB.getLoginStatus(function(response) {
console.log(response)
})
}
</script>
I am getting the response on logout and login
Here are my questions
On FB.api call i am getting only ID and Name whereas i need user email to set as an unique user identifier.
When is the condition i can achieve not_authorized. I am getting status 'connected' if i login and 'unknown' if i logout. I am not able to reproduce the condition un_authorized, so that i could code for it.
You should use the ID of the user to identify him, not the email. Users do not have to have an email, they can also use their phone number to login. Make sure you get asked for the email permission in the login process/popup. Also, use this form instead:
FB.api('/me', {fields: 'id,email,name'}, function(response) {
console.log(JSON.stringify(response));
});
I'm trying to get some basic information using Facebook api, but so far I only get the user's name and id. As in { name: "Juan Fuentes", id: "123456" }
I need to get mor einformation, like email, first name, last name and birthday
This is my js code
function facebookLogin() {
FB.login(function(response) {
var token = response.authResponse.accessToken;
var uid = response.authResponse.userID;
if (response.authResponse) {
FB.api('/me', 'get', { access_token: token }, function(response) {
console.log(response);
});
FB.api('/'+uid, 'get', { access_token: token }, function(response) {
console.log(response);
});
}
},
{ scope: 'public_profile' }
);
}
And this is the button that activates it
<a id="fb-login" href="#" onclick="facebookLogin()"></a>
You need to manually specify each field since Graph API v2.4:
https://developers.facebook.com/docs/apps/changelog#v2_4
https://developers.facebook.com/docs/javascript/reference/FB.api
Declarative Fields
To try to improve performance on mobile networks, Nodes and Edges in v2.4 requires that you explicitly request the field(s) you need for your GET requests. For example, GET /v2.4/me/feed no longer includes likes and comments by default, but GET /v2.4/me/feed?fields=comments,likes will return the data. For more details see the docs on how to request specific fields.
E.g.
FB.api('/me', 'get', { access_token: token, fields: 'id,name,gender' }, function(response) {
console.log(response);
});
It's also possible to use this syntax for data from public_profile scope (tested in Graph API v2.9):
FB.api('/me?fields=birthday,link,gender,age_range', function(response) {
console.log(response);
});
You can test the possible values online in Graph API Explorer, just click "Get Token" button:
https://developers.facebook.com/tools/explorer/?method=GET&path=me%3Ffields%3Dbirthday%2Clink%2Cgender%2Cage_range&version=v2.9
Here is the complete Script:
jQuery(document).ready(function () {
openLoginPopup();
})
function openLoginPopup() {
FB.getLoginStatus(function (response) {
if (response.status == 'connected') {
getCurrentUserInfo(response);
} else {
FB.login(function (response) {
if (response.authResponse) {
getCurrentUserInfo(response);
} else {
console.log('Auth cancelled.');
}
}, {scope: 'email'});
}
});
}
function getCurrentUserInfo() {
FB.api('/me?fields=id,email,first_name,last_name,name', function (userInfo) {
console.log(userInfo.name + ': ' + userInfo.email);
});
}
window.fbAsyncInit = function () {
FB.init({
// appId: 'xxxxxxxxxxxxxxxxxxxxx', //livemode
appId: 'xxxxxxxxxxxx', //testmode
cookie: true, // Enable cookies to allow the server to access the session.
xfbml: true, // Parse social plugins on this webpage.
version: 'v4.0' // Use this Graph API version for this call.
});
};
(function (d, s, id) { // Load the SDK asynchronously
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Thanks.
Note that email is not always returned by a call to the me api with email as field, even if scope email was requested and granted, if e.g. the user signed up with a phone number:
https://developers.facebook.com/docs/facebook-login/permissions#reference-email
I've created a fake facebook page (entertainment page).
On the left of the attached image, I made a first post manually (the one below with the
big photo), and one programmatically (the one above with the small photo).
The code I used for the small photo looks like this:
FB.api(
'https://graph.facebook.com/[myAppId]/feed',
'post',
{
message: 'this is a grumpy cat',
description: "This cat has been lost for decades now, please call at 654321486",
picture: "http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg"
},
function (response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/' + response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
But I'm not happy with it:
the application I'm working on make a list of lost animals,
so it would be much greater with big photos.
I didn't see any example of how to do it on the facebook developer pages.
I believe this is possible, but I've not found it out yet.
Have you guys already gone through this problem before?
There are two things that you will need to do to achieve this. I'm not 100% sure if the JS-SDK will allow you to do the second step, but you can use a server side SDK if needed.
The application will need to request the manage_pages and publish_stream permission. Then make a call to /{user-id}/accounts which will return all pages the authorized user manages, and their respective page access tokens.
Store in a variable the page access token returned for the page you want to post to. Set the photo you want to upload as the source parameter (must be local to the server running the code) and make a POST request to /{page_id}/photos using the page access token (NOT the application access token!).
So it would be along the lines of:
FB.api('/{page_id}/photos', 'post', { source: 'path/to/image.jpg', access_token: {page_access_token}, message: 'hey heres a photo' }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
I believe the application also needs to specify fileUpload as true when initializing.
I would be happy to share my PHP code to do this if it would be helpful to you.
Finally, I did it!
I'm posting the solution, thanks to cdbconcepts for pointing me in the right direction.
After reading the doc again:
https://developers.facebook.com/docs/reference/api/photo/
They say that:
"You can also publish a photo by providing a url param with the photo's URL."
The url doesn't have to be on the same server, as shown in the example below,
and it works with the js-sdk.
So here is the final code that works for me:
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
var appId = 'Replace with your appId';
window.fbAsyncInit = function () {
FB.init({
appId: appId,
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
var options = {
scope: 'manage_pages, publish_stream'
};
FB.Event.subscribe('auth.authResponseChange', function (response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function () {
}, options);
} else {
FB.login(function () {
}, options);
}
});
};
// Load the SDK asynchronously
(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);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function (response) {
console.log('Good to see you, ' + response.name + '.');
});
}
function error(msg) {
document.getElementById('result').innerHTML = 'Error: ' + msg;
}
function postApi() {
var myPageID = '484364788345193';
var targetPageName = 'Entertainment page of ling';
var pathToImg = 'http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg';
var accessToken = null;
FB.api(
'https://graph.facebook.com/me/accounts',
function (response) {
if (!response || response.error) {
console.log(response);
error('Error occured');
} else {
console.log(response);
for (var i in response.data) {
if (targetPageName === response.data[i].name) {
accessToken = response.data[i].access_token;
}
}
if (accessToken) {
FB.api(
'https://graph.facebook.com/' + myPageID + '/photos',
'post',
{
url: pathToImg,
access_token: accessToken,
message: "Tadaam"
},
function (response) {
if (!response || response.error) {
console.log(response);
error('Error occured');
} else {
console.log(response);
alert("PostId: " + response.id);
}
}
);
}
else {
error("Page not found in the accounts: " + targetPageName);
}
}
}
);
}
function logout() {
FB.logout();
}
$(document).ready(function () {
$("#logout").click(function () {
logout();
});
$("#post1").click(function () {
postApi();
});
});
</script>
<!--
Below we include the Login Button social plugin. This button uses the JavaScript SDK to
present a graphical Login button that triggers the FB.login() function when clicked. -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
<button id="logout">Logout</button>
<button id="post1">post something</button>
<div id="result"></div>
</body>
</html>
I am working for the first time with facebook API. From there documentation I found we can fetch name as below
console.log(response.name);
But How can I can also fetch email and fbid ?
Thanks,
Enamul
<?php ?>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'f', // App ID
channelUrl : '//localhost/practices/phpTest/fblogin/login.php/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) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
// Additional init code here
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// Load the SDK Asynchronously
(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);
}(document));
</script>
<?php ?>
In addition to adding scope="email" to the button, you need to specify which fields to return.
<fb:login-button scope="public_profile, email" onlogin="checkLoginState();" data-auto-logout-link="true" data-size="large">
function testAPI() {
FB.api('/me', {fields: 'name, email'}, function(response) {
console.log( response );
console.log( response.email );
});
}
For full code structure take a look at the facebook documentation.
The same way you access name. i.e
response.email and response.id
but to fetch email address you must have the permission to access it.
Add scope="email" to your FB Login Button.
[EDIT]
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
}, { scope: 'email' });
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.' + ' Email: ' + response.email + ' Facebook ID: ' + response.id);
});
}
Here's a good tutorial for beginners: http://www.loginworks.com/technical-blogs/404-working-with-facebook-javascript-sdk
If anyone else is having trouble with retrieving users' email specifically, please note that Facebook won't allow you to access users' email while your app is still listed as "in-development." After switching to a "in-production" in your Facebook Developer Dashboard, email should become available. Hope this helps someone out there, as I wasted a lot of time tonight struggling to retrieve users' email.
Email: "Not available to all users because your app is not live"
change code to following
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
FB.api('/me?fields=name,email', function(response) {
console.log('Good to see you, '+response.name + '---'+response.email);
});
I need to get the access token from FB.login method in Javascript SDK. My login code is
FB.login(function(response) {
if (response.session) {
if (response.perms) {
} else {
// user is logged in, but did not grant any permissions
alert("No Permission..");
}
} else {
// user is not logged in
alert("Please login to facebook");
}
}, {perms:'read_stream,publish_stream,offline_access'});
Is there any way to get access token? I am able to get the access token using PHP.
You can get access token using FB.getAuthResponse()['accessToken']:
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log('Access Token = '+ access_token);
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: ''});
Edit:
Updated to use Oauth 2.0, required since December 2011. Now uses FB.getAuthResponse();
If you are using a browser that does not have a console, (I'm talking to you, Internet Explorer) be sure to comment out the console.log lines or use a log-failsafe script such as:
if (typeof(console) == "undefined") { console = {}; }
if (typeof(console.log) == "undefined") { console.log = function() { return 0; } }
response.session.access_token doesn't work in my code. But this works:
response.authResponse.accessToken
FB.login(function(response) { alert(response.authResponse.accessToken);
}, {perms:'read_stream,publish_stream,offline_access'});
If you are already connected, simply type this in the javascript console:
FB.getAuthResponse()['accessToken']
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/
{
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
signedRequest:'...',
userID:'...'
}
}
FB.login(function(response) {
if (response.authResponse) {
// The person logged into your app
} else {
// The person cancelled the login dialog
}
});
response.session doesn't work anymore because response.authResponse is the new way to access the response content after the oauth migration.Check this for details:
SDKs & Tools › JavaScript SDK › FB.login
window.fbAsyncInit = function () {
FB.init({
appId: 'Your-appId',
cookie: false, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.0' // use version 2.0
});
};
// 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 fb_login() {
FB.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me', function (response) {
var email = response.email;
var name = response.name;
window.location = 'http://localhost:12962/Account/FacebookLogin/' + email + '/' + name;
// used in my mvc3 controller for //AuthenticationFormsAuthentication.SetAuthCookie(email, true);
});
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'email'
});
}
<!-- custom image -->
<img src="/Public/assets/images/facebook/facebook_connect_button.png" />
<!-- Facebook button -->
<fb:login-button scope="public_profile,email" onlogin="fb_login();">
</fb:login-button>
window.fbAsyncInit = function () {
FB.init({
appId: 'Your-appId',
cookie: false, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.0' // use version 2.0
});
};
// 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 fb_login() {
FB.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me', function (response) {
var email = response.email;
var name = response.name;
window.location = 'http://localhost:12962/Account/FacebookLogin/' + email + '/' + name;
// used in my mvc3 controller for //AuthenticationFormsAuthentication.SetAuthCookie(email, true);
});
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'email'
});
}
<!-- custom image -->
<img src="/Public/assets/images/facebook/facebook_connect_button.png" />
<!-- Facebook button -->
<fb:login-button scope="public_profile,email" onlogin="fb_login();">
</fb:login-button>