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>
Related
UPDATE TO BELOW: I found this post
Facebook login via Parse & Javascript
Which I changed my code to reflect as so (below_. But throwing the following error from the webpage.
Given URL is not permitted by the application configuration.: One or
more of the given URLs is not allowed by the App's settings. It must
match the Website URL or Canvas URL, or the domain must be a subdomain
of one of the App's domains.
Not sure if this is a mismatch with my App url actually in fb?
<div id="fb-root"></div>
<script type="text/javascript">
Parse.initialize("******", "********");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '*******',
status : true,
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
};
(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>
I'm trying to add the www.PARSE.com Facebook user login code to my site.
The guide I've followed is here https://www.parse.com/docs/js_guide#fbusers
My code looks like this. When I load the page, no login page appears. I'm unsure what I'm missing? When I look at parse it seems like "user" has been created in the data browser, indicating that the look up is working in some way.
Potential issues,
1/I'm unsure if the "channelUrl" is correct? do I include channel.html ?
2/Do I need to reference java script in the header? from what I read this was not needed?
<div data-role="page" id="main_page" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding="false">
Menu
<h1>Slide Menu</h1>
</div>
<div data-role="content" class="ui-content" role="main">
<!--Parse initialize codes-->
<script type="text/javascript">
Parse.initialize("XXXXX", "XXXXX");
</script>
<!--Parse initialize code end here-->
<!--FB SDK code load for page starts here-->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'XXXXX',
channelUrl : 'WWW.kudosoo.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
};
</script>
<!--FB SDK code load for page ends here-->
<!--FB login code for page starts here-->
<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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
</script>
<!--FB login code for page ends here-->
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
</div>
</div>
I have been able to work out an answer to the issue myself, through alot of trial and error. The code that works for me is as follows as below.
<div id="fb-root"></div>
<script type="text/javascript"> // Initialize the Parse object first.
Parse.initialize("XXXXX", "XXXXX");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'XXXXXXX',
channelUrl : 'http://www.example.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
}, error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
} });
};
(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'));
</script>
I am using the following code to enable users to login. It works perfectly but the problem is that it shows the name of website rather than signin - sign out so user is not able to sign out. how should I change it to enable users to sign out ? based on blew comment I added autologoutlink="true" and now singout is visible but when user is signed in it write a sentence as following jack is logged in myproject (jack is username and myproject is name of my project)
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/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.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.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);
}(document));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
autologoutlink="true"
Add this parameter to your fb:login-button:
<fb:login-button show-faces="true" width="200" autologoutlink="true" max-rows="1"></fb:login-button>
Hope it helps!
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 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
});
})
Im trying to make wallpost from my fb app. My code (bellow) wont give eny erros but it just wont publish anything to wall. Can someone help me? =P
Application file (index.php):
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1234567890', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/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
});
// Additional initialization code here
};
// 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>
Post to Facebook
<script>
function postToFacebook() {
var body = 'Reading Connect JS documentation';
FB.api('/me/feed', 'post', { body: body, message: 'My message is ...' }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response);
}
});
}
</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID GOES HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
And channel file in server (channel.php):
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
Why are You trying to init Facebook scripts twice?:)
Here's an example of a working code :
How to get FB.api('/me/feed', 'post', ... to work?
Mind You, the user needs to authorize the app first before You can make FB.api calls.
You can do that by using FB.login e.g:
http://developers.facebook.com/docs/reference/javascript/FB.login/
and check if the user actually connected to Your app by using FBgetLoginStatus():
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Hope this helps