I would like to login to my website by facebook connect but I have problem with facebook connect BUTTON. When I click in this button, i'm login but then the page is multi-refresh.
This is my code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxyyyxxxx',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
window.top.location = 'http://mystite.pl/login.php?mode=fb_login';
}
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/pl_PL/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Where is problem?
As far as I am concerned, there is a page refresh after logging in to fb via js sdk (not 100% sure).
And you have there another refresh
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
window.top.location = 'http://mystite.pl/login.php?mode=fb_login';
}
});
Related
i have a login page where i will give link for facebook login but unfortunately the facebook oauth dialog opens up as soon as i land on the the login page .I want it on click of the link and not on page load.Can any help?
<p><a onclick='login(); return false;'>Login</a></p>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '3423243443', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true // enable OAuth 2.0
// channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
alert("connected1"+response.authResponse.expiresIn);
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
alert("not logged in");
login();
}
},true);
};
(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() {
FB.login(function(response) {
if (response.authResponse) {
testAPI(response)
// connected
alert("connected2 "+response.authResponse);
} else {
// cancelled
alert("cancelled");
alert("cancelled"+response.authResponse);
}
});
} ;
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.email + '.');
});
} ;*/
</script>
Because you inserted the FB.getLoginStatus, which calls your login function, in window.fbAsyncInit on every page's loads.
You should fire FB.getLoginStatus only though a button, with an onclick trigger.
Here is a little example: http://facebook.stackoverflow.com/a/15720747/2212966
I have mine wrapped with a jquery button click event handler. Here is a snippet from my code:
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id',//use your facebook appId in here
status : false,
cookie : true,
xfbml : true,
version : 'v2.2'
});
jQuery('#signUpWithFacebookButtonId').click(function(){
FB.login(function(response) {
if (response.status === 'connected') {
console.log('Logged into your app and Facebook.');
} else if (response.status === 'not_authorized') {
console.log('The person is logged into Facebook, but not your app.');
} else {
console.log('The person is not logged into Facebook, so we are not sure if they are logged into this app or not.');
}
}, {scope: 'public_profile, email'});
});
};//end window.fbAsyncInit function
FB.getLoginStatus() works fine if the user is logged into facebook. But, if the user is not logged into facebook, then FB.getLoginStatus() callback is not called and I am not able to handle that case in my code because I dont get a callback. I am not in sandbox mode.
I also added 'true' to force the callback eg) FB.getLoginStatus(function(response){}, true) . It did not help. Is this a bug? Is it fixed yet?
If not, please give a work around when user is logged out of facebook. I ma stuck with this issue for a week now.
function GetFBLoginStatus() {
FB.getLoginStatus(function(response) {
alert("inside call back function");
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
alert("Connected FBID = " + uid);
} else if (response.status === 'not_authorized') {
alert("not_authorized");
} else {
alert("Not Logged into facebook");
}
return true;
}, true)
}
You can create an auth.logout event:
FB.Event.subscribe('auth.logout', function(response) {
alert('logged out!');
});
Or a better solution, create an auth.authResponseChange event:
FB.Event.subscribe('auth.authResponseChange', function(response) {
console.log('The status of the session changed to: '+response.status);
alert(response.status);
});
Update:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
cookie : true,
xfbml : true,
});
FB.Event.subscribe('auth.login', function(response) {
alert('logged in');
});
FB.Event.subscribe('auth.logout', function(response) {
alert('logged out');
});
};
function GetFBLoginStatus() {
FB.getLoginStatus( function(response) {
console.log(response);
if (response.status === 'connected') {
var accessToken = response.authResponse.accessToken;
alert(accessToken);
} else if (response.status === 'not_authorized') {
//login function
alert('login first');
} else {
//login function
alert('login first');
}
}, true);
}
//Load the SDK Asynchronous
(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>
<img src="../FacebookSmall.bmp" />ddd
</div>
Responding to Philip's comment: I tried to refresh the page after logging out of facebook. Here is my code: I am calling the javascript function GetFBLoginStatus() on the click of a link. When I am logged into facebook everything works fine. When I am not logged into facebook, I don't get any alerts.
<div id="fb-root">
</div>
<!-- pull down Facebook's Javascript SDK -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
// initialize the library with your Facebook API key
FB.init({ apiKey: 'XXXXXXXXXXXXX' });
</script>
<div>
<img src="../FacebookSmall.bmp" />
</div>
<script type="text/javascript" language="javascript">
function GetFBLoginStatus()
{
FB.Event.subscribe('auth.authResponseChange', function(response){
alert(response.status);
});
FB.getLoginStatus(function(response)
{
alert("inside call back function");
if (response.status === 'connected')
{
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
alert("Connected FBID = " + uid);
}
else if (response.status === 'not_authorized')
{
alert("not_authorized");
}
else
{
alert("Not Logged into facebook");
}
}, true) ;
}
I am doing facebook integeration. When I login, the widget does not reload. Because of that I am unable to post comments. When I reload the window it works fine. What I am doing wrong?
I am using the code below.
<script>
window.fbAsyncInit = function() {
FB.init({ appId: '217419501642964',
status: true,
cookie: true,
xfbml: true,
channelUrl:'https://creator.zoho.com/channel.html'});
_ga.trackFacebook();
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}())
</script>
TIA
Log
Try rerendering the XFBML after the login:
FB.Event.subscribe('auth.login', function(response) {
FB.XFBML.parse(document.getElementById('myfblogin'));
// where myfblogin is the id of your <fb:login-button> element
});
I'm trying to see if a user is logged into FB on my website. I have the following code below but regardless if I'm logged into my FB account or not the FB.getLoginStatus response is always returning null.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXXXXXXXXX', status: true, cookie: true,
xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
alert('Logged In');
} else {
alert('Not Logged In');
}
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
So it turns out this was a misinterpretation of the FB docs. The session will only return if the user is connected to the app. To see if the user is logged in but not connected you need to use response.status
maybe response.session is deprecated, official working example from Facebook:
To determine if a user is connected to your app:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
} else {
// no user session available, someone you dont know
}
});
My FB.ui stream.share and stream.publish work perfectly but when I call the Callback funcion, it always returns as error, even though the story is published on my Facebook profile.
[script] <div id="fb-root<?php the_ID();?>"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '151136734905815', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root<?php the_ID();?>').appendChild(e);
}());
function fb_share (url, title){
var share = {
method: 'stream.share',
display: 'dialog',
u: url,
t: title
};
FB.ui(share, function(response) {
if (response && response.post_id) {
alert(response.post_id);
} else {
alert('Error: Post was not published due to some error. Please try again later.');
}
});
}
</script>[/script]
It always returns Error: Post was not published due to some error. Please try again later. even though the story is in facebook successfully. Any help on this?
$('#share').bind('click', function(e){
var share = {
method: 'stream.share',
u: 'http://your/share/url/with/id/123'
};
FB.ui(share, function(){
$.post("/log_shares.php", {"id": 123});
});
e.preventDefault();
});