I used the example from the facebook documentation but after granting facebook permission to connect I cannot get any user info from the user object. The user is defined but all its attributes are null. Here is my code:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '161718123880158', // App ID
channelUrl : '', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
logging : true
});
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.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>
<div class="fb-login-button" scope="email,user_checkins">Login with Facebook</div>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
</body>
</html>
The output is undef for name and empty image
It's because you haven't got an active access token. If you do a put a console.log(user) and examine the response it shows the error.
What is the 'Website with Facebook login' field set to in your app settings? It needs to match the URL that you are developing on.
Try wrapping the FB.api call in a FB.getLoginStatus callback function, like this:
FB.getLoginStatus(function() {
FB.api('/me', function(user) {
//your code here
});
})
Related
I'm just starting to play around with the facebook API but I can't seem to get the API to alert my email using the FB.User object. I can get it to print out my userID and my name, but it returns as undefined if I try to print out my email or my education. Here's my code:
<html>
<head>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
var appId = '1374555416100192';
var siteRoot = '';
window.fbAsyncInit = function() {
FB.init({
appId : appId,
channelURL : '///channel.html', // Channel File
status : true,
cookie : true,
oauth : true,
xfbml : true
});
$(document).trigger('fbload');
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=" + appId;
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
$(document).on(
'fbload', // <---- HERE'S OUR CUSTOM EVENT BEING LISTENED FOR
function(){
//some code that requires the FB object
//such as...
FB.getLoginStatus(function(res){
if( res.status == "connected" ){
FB.api('/me', function(fbUser) {
alert(fbUser.name + " " + fbUser.email);
});
}
});
}
);
</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Start w/ Facebook</div>
</body>
</html>
You need email permission to access it
Change this line
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Start w/ Facebook</div>
As below and check (Added data-scope="email")
<div class="fb-login-button" data-scope="email" data-show-faces="true" data-width="200" data-max-rows="1">Start w/ Facebook</div>
I want to send message to multiple users. I don't know what I did wrong.
But it can run only JavaScript Test Console.
this is my code:
<html>
<body >
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APP ID',
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true, // parse XFBML tags on this page?
oauth: true // enable OAuth 2.0
});
};
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
function sendmsg(){
FB.ui({
method: 'send',
to: ['100000793830311','100002551899151'],
name: 'test msg',
link: 'http://www.google.com'
});
}
</script>
<button onclick="sendmsg();">SEND</button>
</body>
Method send doesn't allow multiple user ids in the to field.
Code allows only one id. Users can enter additional recipients in the dialog.
I am currently using the following code to get the email id of the user using my app
function get_id(cb){
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.login(function(response) {
if (response.authResponse) {
var token = response.authResponse.accessToken;
alert(token);
accessToken = token;
FB.api('/me?access_token=' + token + '', function (response) {
cb(response.email);
});
}
},{scope: 'email'});
(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));
}; // ending of get_id()
get_id(function (email) {
userID=email;
alert(email);
});
the current code is in a separate javascript file and this function is called when a button is pressed , I have also included <script src="http://connect.facebook.net/en_US/all.js"></script> in the HTML file . my browser (google chrome) gives me the following error each time I try and access it
"Uncaught ReferenceError: FB is not defined "
I am relatively new to developing Facebook apps , so all the reference I have is the developers page at facebook , I am sure it is a small error but I just cant wrap my head around it , appreciate it if anybody could point out where I could be going wrong
Your code will not load correctly. This part:
(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));
Should not be inside any function, put this in a script tag, after the body opening. It can't be in a separate file. This only does a async-load of all.js, that is the Facebook's JS SDK. If you are using the async-load, you should not put <script src="http://connect.facebook.net/en_US/all.js"></script> in your document, because this will do a sync-load.
This other part of your code:
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
Also should not be inside the function. This fragment is responsible for starting the FB JS SDK in your page, with your app information, it only have to be called one time for each page, otherwise you will be starting the engine multiple times and it will have a caotic behavior. The "FB" object will only be created after the FB JS SDK loads. You don't know when it's going to happen, because of the async load. So you must assign the FB.init to this window event:
window.fbAsyncInit = function() {
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
You want to create a get_id function that uses the Facebook information. You have to be careful with that. With you are sure that this function will be called after the complete load of FB JS SDK, you can create it in any part of your page. BUT I think the most safe way is to create it inside the window.fbAsyncInit. Don't worry about the token, the SDK does it for you:
window.fbAsyncInit = function() {
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function get_id(cb){
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function (response) {
cb(response.email);
});
}
},{scope: 'email'});
}
};
But when you do that, you will be not sure if your function was already created or not. So when you call it, you will have to test for it's existence:
if(get_id && typeof get_id == 'function') {
// It's safe to call your function, go ahead
get_id(function (email) {
userID=email;
alert(email);
});
} else {
// Your function does not exists yet, do other stuff
}
Good luck!
You need to put:
(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));
out of get_id function. So it was called before you press the button
PS: you don't need to pass ?access_token= manually - FB JS SDK does that for you
For the life of me I cant get Event.subscribe('auth.authResponseChange') to work. See code below
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'XXXXXXXXXXXXXXX', // App ID
channelUrl: 'http://XXXXXXXX.us/', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function (response) {
alert('The status of the session is: ' + response.status);
});
};
// 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>
<div class="fb-login-button" data-size="xlarge" scope="email" data-show-faces="false"
data-width="400" data-max-rows="1" autologoutlink="true">
Login with Facebook</div>
The login button renders. and i can logout too. only problem is that the auth.response change is not firing and i am not getting the "message" popup
Your code looks fine.
I would access your Facebook app and check on 2 settings in particular.
Check 'Sandbox Mode' -ensure it's set to 'Disabled'
Check your Site URL and/or Canvas URL -ensure they are set to your domain. (i.e. if you are working on this locally your url should look something like http://localhost:#####/ where ##### is your port.
Hope that helps.
Your fbAsyncInit function is called asynchronously so you won't see any alert messages. Try console.log instead for debugging.
I am creating a facebook app and it uses Javascript API to store username and other details in js variables. And this app is created under Python(using Google App Engine). I want to access the js variables in Python and store the values in Db. How to do this?
class MainPage(webapp2.RequestHandler):
def get(self):
self.response.out.write("""
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Captain Pandey</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '185318768251247',
channelURL : 'http://localhost:8080/channel.html',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api('/me', function(apiResponse) {
var name = apiResponse.name;
});
}
else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
}
else {
// the user isn't logged in to Facebook.
}
});
};
(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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="email">Login to Facebook</div>
</body>
</html>
""")
and template used is webapp2
Design the Javascript code so that it makes an AJAX request that sends the data, and write a Python handler for that request.