FB.login fails and execution stops on FB.login. I can only see for a few seconds facebook login popup that says "loading", then it disappear and nothing happens.
I have after body tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '129519787234412', // App ID from the App Dashboard
channelUrl : '<?=URL?>facebookChannel.php', // Channel File for x-domain communication
status : true, // check the login status upon init?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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>
After all HTML, in script tag:
$(".box_top_img").click(function(){
FB.login(function(response) {
if (response.authResponse) {
FB.getAuthResponse()['accessToken'];
FB.api('/me', function(response) {
$.ajax({
url:"ajax/check_vote.php",
type:"POST",
data:response,
success:function(response){
var result = $.parseJSON(response);
if(result.code == 0){
$("#container_1").hide();
$("#container_2").hide();
$("#container_3").show();
}else if(result.code == 1){
$("#container_1").hide();
$("#container_2").show();
$("#container_3").hide();
$("#facebook_id").val(result.id);
if(result.first_name)
$("#name").val(result.first_name);
if(result.last_name)
$("#lastname").val(result.last_name);
if(result.email)
$("#email").val(result.email);
}else{
$("#container_1").show();
$("#container_2").hide();
$("#container_3").hide();
}
}
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
});
Thanks!!
Check if sandbox mode is disabled on the app settings page
You could try to replace facebook-jssdk with fb-root. This should work.
Related
I am using facebook login popup in my website. I am showing a loader for api response. But when user click on close button (X) of facebook login window, My loader is showing infinite. So i want to get that event when user click on close button. I am using below code for facebook login popup.
window.fbAsyncInit = function() {
FB.init({
appId : '###',
cookie : true,
xfbml : true,
version : 'v3.1'
});
FB.AppEvents.logPageView();
window.checkLoginState = function() {
FB.getLoginStatus(function(response) {
document.getElementById('loader-response').classList.add('show');
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if (response.status === 'connected') {
getProfile();
} else {
window.localStorage.setItem('facebook',false);
}
}
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I have edited your code.
Just add document.getElementById('loader-response').classList.add('show'); after the FB.getLoginStatus(function(response) function.
I'm trying to integrate Facebook login into my website with Facebook Javascript SDK. According to the step by step instructions provided by Facebook Developer document here, here is the test code I wrote:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{$MY_APP_ID}',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.1', // use version 2.1
status : true, // check FB login status
});
};
function fblogin() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert('Logged in.');
}
else {
FB.login();
}
}, true);
}
</script>
<button onclick="fblogin()">login</button>
<script src="//connect.facebook.net/en_US/sdk.js"></script>
Sorry, because of the restriction of website domain, I can't take this to fiddle. But I tried on my own domain, the Facebook login window popuped in Chrome and Firefox, but blocked by Safari. This is kind of weird, is there anything wrong for the code snippets provided by Facebook Developer Document?
As we already discussed in the comments, FB.login must be called on user interaction, the example in the docs is not correct.
This should be a working example how to do a login correctly, copied together from several articles in the Facebook docs:
<script>
//call this on user interaction (click)
function doLogin() {
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email,user_friends'});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
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;
} 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, 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button onclick="doLogin()">login</button>
More explanation: http://www.devils-heaven.com/facebook-javascript-sdk-login/
I just want make a script who post when i make the login. I find this code
var body = 'i13 App - Post test';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
}else {
alert('Post ID: ' + response.id);
}
});
it work with Facebook javascipt Test Console, but when i put in my script i never can post and received the alert('error occured),
Thz for your help,
Have you set up the page code correctly? ensure you have the following code within the page
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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>
https://developers.facebook.com/docs/reference/javascript/
After the user is logged in successfully you can have a button trigger the following code"
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
https://developers.facebook.com/docs/reference/javascript/FB.api/
I have been racking my brain for 2 days now. I am trying to build a simple Facebook app using the Javascript SDK and I just want a simple alert if the user is not authorized using getLoginStatus(). It works fine in my website but not in the canvas. I get no alert. I am using very simple code that Facebook provides.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '354932757968708', // App ID from the app dashboard
channelUrl : '//www.staging.socialdigi.com/channel.html', // Channel file
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("Youre In");
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
alert("Not Authorized");
} else {
// the user isn't logged in to Facebook.
}
});
};
// Load the SDK asynchronously
(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 get the following errors in the console but have been told it doesnt have anything to do with my issue
Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://staging.socialdigi.com". The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access.
I do not have an ssl
Its in sandbox mode
I have the canvas url correct and nothing for secure canvas url
app id is correct
any help is appriciated
thanks
About 50% of the time, when calling FB.init, I get this javascript error:
Refreshing the page sometimes fixes the issue. I can't discern any particular pattern.
Does anyone recognize this code? Is it part of the facebook js sdk?
How do I figure out what is going wrong? I checked the open issues at the Facebook support site but did not see anything.
This is my init code straight out of the fb docs:
<script>
window.fbAsyncInit = function () {
debugger;
FB.init({
appId: xxxx,
status: true,
cookie: true,
xfbml: true
});
};
// Load the SDK Asynchronously
(function (d) {
debugger;
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>