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.
Related
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?
I'm trying to add Facebook Login to my website using the Facebook Javascript SDK.
Everything seems to work, but the login popup opens with annoying scrollbars when asking for permissions (I'm already logged in Facebook). I tested it with Firefox 16, IE 9. Other sites that uses the Facbook login in a popup don't have the same behavior on my machine.
Perhaps they use a different approach?
Here is my code.. it's pretty simple, and you can just copy/paste in an html page to test it. Just set your APP-ID.
<html>
<body>
<img src="images/facebooklogin.png" id="login-fb" onclick="login();" />
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({
appId : 'APP-ID',
status : true,
cookie : true,
xfbml : false
});
};
// 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 login()
{
facebookPerms = [
'user_photos', 'email', 'offline_access', 'user_relationships', 'read_stream',
'user_about_me', 'user_birthday', 'user_education_history', //'publish_stream',
'user_hometown', 'user_interests', 'user_location', 'user_likes',
'user_religion_politics', 'user_activities', 'user_work_history'
];
//Get the facebook login status
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
ajaxLogin();
} else {
//Display the facebook login dialog
FB.login(function(response) {
if (response.authResponse) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
ajaxLogin();
} else {
// user is not logged in, display the error dialog box
errorNotLogged();
}
}, {
//Ask for permissions of Facebook
scope: facebookPerms.join(',')
});
}
});
}
</script>
</body>
</html>
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
I would send a request with FB.ui when the user enter to a particular .php page.
I use this script to async loading the javascript SDK:
<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));
function sendRequestToRecipients(user_id) {
FB.ui({method: 'apprequests',
message: 'My Great Request',
to: user_id,
}, requestCallback);
}
</script>
Then, I try to call the function sendRequestToRecipients() inside the tag with onLoad function:
<body onLoad="sendRequestToRecipients('0000'); return false;">
But I receive 2 errors "Unexpected identifier", and nothing happens.
Also, if I delete the onload from body and I manually call the sendRequestToRecipients function with a button
<input type="button"
onclick="sendRequestToRecipients('0000'); return false;"
value="Send"
/>
Everything goes perfectly!
Any help??
You can't call that from the onload event since you can only make api requests once the facebook sdk finished loading and initializing.
It should be:
<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
});
sendRequestToRecipients("USER_ID");
};
// 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 sendRequestToRecipients(user_id) {
FB.ui({method: 'apprequests',
message: 'My Great Request',
to: user_id,
}, requestCallback);
}
</script>
Notice that I called sendRequestToRecipients in the window.fbAsyncInit callback method, after the FB.init.
How can I resolve the resize of facebook app on IE ?
the FB.Canvas.setSize() is not working.
Thanks!
Since there's very little to go on in your question. No example url, no code example. I can only guess. So here's where to start.
1) Be sure to include the Javascript SDK inside of script tags.
<script>
// Load the SDK Asynchronously
(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>
2) Be sure to include the fb-root div inside of the body
<body>
<div id="fb-root"></div>
...your html here...
</body>
3) Be sure to do the FB.init() and FB.Canvas.setSize() after the javascript SDK has had a chance to load. Meaning do it inside of your window.fbAsyncInit
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
});
};
4) Make sure you have specified your APP ID and also the correct location for a valid ChannelUrl