Basically I am new to using the facebook api and I'm having issues with trying to get my code working, the following code should provide a prompt if the user has not logged in but I'm not sure what is wrong with it.
http://apps.facebook.com/biographyscribe/
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<p>hello</p>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '490455294310717', // App ID from the App Dashboard
channelUrl: 'channel.php',
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized'){
FB.login();
} else {
window.top.location = 'https://www.facebook.com/index.php';
}
});
};
// Load the SDK's source Asynchronously
(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));
</script>
<div id="fb-root"></div>
</body>
</html
>
As #CBroe mentioned in one of the comments, FB.login cannot be called outside of a user interaction due to popup-blockers.
Instead, make available a button/link, and have this call FB.login.
Related
I am looking to create facebook login system in my website using javascript SDK. I am able to login as per details mentioned in facebook website. I am trying to enter data in mysql database primarily email ID of users. I am unable to do so despite different options. Need help. also how to disappear login button once user is logged into the system. Please help. below is the basic code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXX',
channelUrl : '//XXXX',
status : true,
cookie : true,
xfbml : true
});
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) {
$.post('send.php', {'name':response.name});
alert('Good to see you, ' + response.email + '.');
});
}
</script>
<fb:login-button show-faces="true" autologoutlink="true" scope="user_about_me,email" width="200" size= "large" max-rows="1"></fb:login-button>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"> </div>
</body>
</html>
This is how I've set up my login/registration flow. On the index.html page there is a link. Once it is clicked you are sent to a second page where your login status is checked and the fb login/registration box is shown if you're not registered or logged in.
What I've done is made the tag invisible on the page until after the login status is checked? Once it's checked I want it to become visible if the user isn't logged in or registered, but it's not becoming visible.
What is the best way to hide the visibility of the register/login box until login status is checked. I don't want to use facebooks login() function because I don't want a pop up window. I want to use the XFBML tag. Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script >
<base href="http://spilot.koding.com/">
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '3967205****88', // App ID
channelUrl : '//http://spilot.koding.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
});
// get login status
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
document.getElementByName("login").style.visibility = visible;
} else {
// not_logged_in
document.getElementByName("login").style.visibility = visible;
}
});
};
// 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 id="fb-root" name="login" style="visibility:hidden">
<script src="https://connect.facebook.net/en_US/all.js#appId=396720557089188&xfbml=1"></script>
<fb:registration
fields="name,birthday,gender,location,email"
redirect-uri="http://spilot.koding.com/signedRequest.php" width="530">
</fb:registration>
</div>
</body>
</html>
This was the solution that worked for me. I decided to use the registration plugin instead. I put the iframe in a div and set the div's visibility to "hidden", then in the init code where it checks log in status, I call a function that uses document.getElementById().style.visibility ="visible" to grab the div and change its visibility. Make sure everything that needs quotes around it has them, that was one of my original mistakes.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script >
<base href="http://spilot.koding.com/">
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '396720557******', // App ID
channelUrl : '//http://spilot.koding.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 init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
///log function will change div visibility to "visible"
log();
} else {
// not_logged_in
log();
}
});//closes fb.getLoginStatus
};// closes fbAsyncInit
// 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));
//change div visibility to visible
var log = function(){
document.getElementById('login').style.visibility = "visible";
}//closes function log()
</script>
//put iframe inside a div and set the div's visibility to hidden.
<div id ="login" style = "visibility:hidden" >
<iframe src="https://www.facebook.com/plugins/registration?
client_id=396720557089188&&
redirect_uri=http://spilot.koding.com/signedRequest.php&
fields=name,birthday,gender,location,email"
scrolling="auto"
frameborder="no"
style="border:none"
allowTransparency="true"
width="100%"
height="330">
</iframe>
</div>
</body>
</html>
I am using the following code for facebook authentication.
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '498085136....',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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));
//LOGIN FUNCTION
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert('Success!');
}else{
alert('Login Failed!');
}
}, {scope: 'email'});
}
</script>
<div onclick="login();">Login with Facebook</div>
</body>
</html>
I dont know what's wrong with that code. When i check my error console, it shows FB is not defined..
Thanks in advance.
Make your html tag like this
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
I have added facebook login button for my website. Code is given bellow,
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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="false" data-width="200" data-max-rows="1" scope="user_about_me,user_activities,user_birthday,email" on-login="top.location = 'http://localhost/index.php/';">Login with Facebook</div>
</body>
</html>
When the user click 'login with facebook' button, authentication window is displayed with extended permission. When the user allow to access the details, user is directed to index.php file using
on-login="top.location = 'http://localhost/index.php/';"
Now I want to print all access allowed details such as user name,birthday,etc. in the index.php file
Can anyone please tell me how to do that?
I don't know where you got this on-login attribute for the login button (I couldn't find it), but here's an example of how you can do what you want.
It's not tested, I just created this for you to get the point.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'MY_APP_ID',
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
};
FB.Event.subscribe("auth.login", function (response) {
if (response.status == "connected") {
var userid = response.authResponse.userID;
var signedRequest = response.authResponse.signedRequest;
var expiresIn = response.authResponse.expiresIn;
var accessToken = response.authResponse.accessToken;
// do something with the data.
window.location = "index.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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1" scope="user_about_me,user_activities,user_birthday,email">Login with Facebook</div>
You can read more about subscribing to events here: FB.Event.subscribe, and this thread you might find useful: Get user basic information using facebook Login button plugin?
Beeing new with the facebook thing. How do you get the user information after the log in?
Here is the code:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
I red that I have to subscribe to the auth.login event and then use the FB.api... great but how do you do that?
I tried the following:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
FB.auth.login{
FB.api('/me', function(response) {
alert(response.name);
});
}
};
(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>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
Thanks for the help. And sorry if I look stupid...
Once you initialize the facebook sdk (using FB.init) you can start using it for requests, events, etc.
The documentation talks about 5 Auth Methods. Which one you need depends on what you want to do and if the user already authorized your application and the permissions you are about to use.
If the user is not logged in to your application you need to use login method:
FB.login(function(response) {
if (response.authResponse) {
// logged in
}
else {
// not logged in
}
});
If he is already logged in, or you don't know what his status use getLoginStatus:
FB.getLoginStatus(function(response) {
if (response.status === "connected") {
// the user is logged in and has authenticated your app
FB.api("/me", function(apiresponse) {
console.log("api result: ", apiresponse);
});
}
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.
}
});
To make api requests use the api method as in the example I gave you.
For the very beginners: I had to put the piece of code Nizan gave me and add it after the FB.init call as following:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
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
alert("You are logged in");
}
else if (response.status === "not_authorized") {
// the user is logged in to Facebook, but has not authenticated your app
}
else {
alert("You are not logged");
}
});
};
(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>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
</html>