I am trying to have the user login to facebook and then display their user id in an alert.
Yet, I get nothing returned by this code. What am I doing wrong?
<html>
<head>
<title>Login to Facebook</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID',
channelUrl : 'http://www.mydomain.net/zoozTest/channel.html',
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>
Your code, copied verbatim, works fine for me. Three things:
1: Stupid question, but you've replaced 'APP ID' with your actual app id, right? Otherwise that'll be an error
2: Check your app settings. Have you specified your app domain and 'website with facebook login' URL correctly?
3: Technically you have a race condition. If you click the 'Login with Facebook' div and attempt to run your login() function before the FB JS SDK has initialised (it loads asynchronously), you'll get an error as the global FB object won't be defined. I'd stick a console.log at the bottom of the window.fbasyncinit function to make sure FB is being defined (for testing, for production you'll likely want to either block the login from showing before Facebook is inited, or build some sort of queue that checks to see if the global FB object is defined before attempting to use it, and if not adds to a queue).
Do you have any errors in the javascript console?
Related
My facebook login doesn't work. It open the popup ask me a permission. I allow permission then it stuck on the blank popup and give me js error.
error in event handler for (unknown): Error: Failed to execute 'observe' on 'MutationObserver': The provided node was null.
at observeNodes (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/Rain1/Overlay.js:216:13)
at init (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/version2.js:218:6)
at HTMLDocument.<anonymous> (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/version2.js:55:3)
at c (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:7857)
at Object.p.add [as done] (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:8167)
at b.fn.b.ready (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:2072)
at b.fn.b.init (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:1602)
at b (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:206)
at Object.fetchAll0 (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/version2.js:54:2)
at chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/Rain1/Overlay.js:125:51
Here is my code.
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxx',
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!');
}
console.log(response);
}, {scope: 'email'});
}
</script>
<div onclick="login();">Login with Facebook</div>
</body>
Anyone have an idea about it?
PS. I tested share/login in my old apps. They are broken too.
I think it's facebook api servers fault, is down!
I was working normal and minutes ago the javascript sdk stop working and stuck with a blank popup as you describe.
I was able to connect normally by PHP sdk but not with javascript sdk.
hope this helps and little.
I am new to developing websites with Facebook SDK. So please bear with me.
Below is my simple code for verifying that I am logged into Facebook.
For some reason I always get the 'not_autherized' response, even though I am the only developer of my app. The app number I provide is correct.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'censored app id', // App ID from the app dashboard
status : true, // Check Facebook Login status
cookies : true,
xfbml : true // Look for social plugins on the page
});
FB.getLoginStatus(checkLoginStatus);
function checkLoginStatus(response) {
if (response && response == 'connected') {
alert('User is authorized!');
} else {
alert('User not authorized!!!');
}
};
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id) {
if (d.getElementById(id)) return;
var js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
var fjs = d.getElementsByTagName(s)[0];
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
Is there anything I have overlooked?
Much appreciated :)
A friend helped me with this. He very helpfully pointed out something that Facebook has neglected to document.
When you create a new facebook application, then it is NOT automatically authorized by the admin and developers. An authorized application is one that exists in the "Account Settings->Apps" list. If it is not in this list, then it is not authorized.
This means that you need to call FB.login() at some point in your code in order to popup the user authorization window.
Mind you, this should be called from a button. Otherwise, the popup could be blocked.
Hope this helps someone else but me.
Cheers :)
I have implemented a Facebook based login.
The FB.login works perfectly, but the FB.logout doesn't. I have tried with different FB.init, deleting cookies, running the logout page several times in a row, but the only way to log my user out is in facebook itself.
The code I'm using for logout is:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '***************',
xfbml: true,
status: true,
cookie: true
});
FB.getLoginStatus();
FB.logout();
</script>
Any ideas?
Thank you
did you tried having some button onclick event is FB.logout();
function logout(){
FB.logout(function(response) {
// user is now logged out
});
}
<button onclick="logout()">LogOut</button>
Try This
Try to do this:
<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
});
// 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>
and then call the FB.logout(). FB must be initializad before.
From the documentation:
This code loads the SDK asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots.
The URLs in the above code are protocol relative. This lets the browser to load the SDK over the same protocol (HTTP or HTTPS) as the containing page, which will prevent "Insecure Content" warnings.
The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.
im using this code to create a facebook connect button on my site:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
apiKey: 'xxxxxxxxxxxxxxxxxxxMQTQ2DshKBkNG4aAZDZD',
appId : 'xxxxxxxxxxxxxxxx', // App ID
channelUrl : '//www.xxx.net/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));
function logOut(){
FB.logout();
}
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>
<a href="#" onclick="logOut();" >Logout</a>
when i hit the login button , im loggin in but when i hit the logout link
i get disconnected from facebook (not from the app itself)
and then when i do the following:
1. log in again (directly on facebook.com )
2. go to my site
3. hit the login , and it sais im alread connected to the app
what am i doing wring here ?
If I understand this correctly, you are expecting to get disconnected from the app as well? That is not how it works. When you authorize an app, it will stay authorized unless you remove it from the authorized list in FB. Logging out will only log you out of FB.
When you login to FB, as your app is authorized already, hitting the login button goes to FB sees that its already authorized, tells you so.
today somebody reports me that the "Facebook login button" suddenly disappear, on his website that i made , actually yesterday was working ok, and i did not change any code at all for weeks , i have activated the July, August Changes since i made the website, in order to avoid this problems
this is my code
<div id="fb-root"></div>
<div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true">Login with Facebook</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'FB APP ID',
status : false,
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));
function Facebook_login () {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = "THE URL TO PROCESS THE LOGIN";
}
});
}
</script>
We experienced the same issue on our website. Looks like Facebook has changed the implementation of the login button, it is now created within an iframe. It also no longer supports the 'onlogin' attribute (no longer in the docs).
We fixed by adding our own button, using the FB SDK FB.login method.
For you it would look something similar to (assuming you use jQuery for the click event)
<div id="fb-root"></div>
<button class="fb_login">Login with Facebook</button>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'FB APP ID',
status : false,
cookie : true,
xfbml : true,
oauth : true
});
$(".fb_login").click(function() {
FB.login(Facebook_login);
});
};
(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));
function Facebook_login () {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = "THE URL TO PROCESS THE LOGIN";
}
});
}
</script>
Hi you are not the only one experiencing trouble since today.
My website isn't displaing correctly the button and the login is broken, too.
This seems to be a bug on Facebook side, introduced with today's update, see here:
http://developers.facebook.com/bugs/386085844776949 and here
http://developers.facebook.com/bugs/250500218391321
Try subscribing to the bugs to have FB look at them.
Sometimes, it happens due to not re-initializing the Fb.init function. I solved this problem by parsing Fb.XFBML and i added FB.XFBML.parse(); in script tag just before fb-login button as :
<script>FB.XFBML.parse();</script>[enter image description here][1] <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button>
You can see a sample of code here:
[1]: https://i.stack.imgur.com/YM7QM.png