i'm loading the facebook js sdk via the window.fbAsyncInit function. it's working fine in chrome but in safari and firefox FB.Auth._loadState has the state 'loading' forever and non of the FB.* functions are working.
anyone experiencing the same problem? do i need to set some special headers?
any help would be appreciated.
update
<div id="fb-root"></div>
<script>
var app_id = <?=conf_app_id?>;
window.fbAsyncInit = function() {
FB.init({appId: app_id, status: true, oauth: true, cookie: true, channelUrl: 'https://www.example.com/channel.html'});
}
$(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>
i think it might be an issue with the loadbalancer :( does anyone know if facebook is crosschecking the ip/session or something after loading the sdk?!
Related
I am working on a website and wanted to give my users an option to log-in using facebook.
I am successful at logging in but events are not working for me.
Whenever i logged in, the function "login" was not called.....I have tried assigning this login function to other button for checking it manually, the alert worked but it didnt get any response.
Here my Code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: MY_APP_ID, status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
login();
});
};
function login(){
FB.api('/me', function(response) {
alert('You have successfully logged in, '+response.name+"!");
});
}
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}()); </script>
<fb:login-button autologoutlink='true'
perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
This is the facebook application setting:
Have you tried loading the all.js script in the <head> instead of #fb-root? Use the following:
(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/es_LA/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
instead of:
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
[EDIT: updated sample]
The SDK inserts elements into fb-root which expect to be positioned relative
to the body or relative to an element close to the top of the page.
Which might replacing the SDK source as well.
resource: Facebook Javascript SDK.
--
can you try to subscribe to other event and see if its work
FB.Event.subscribe('auth.statusChange', function(response) {
// do something with response
});
From Facebook documentation (try subscribing this instead)
auth.authResponseChange
This event is fired for any auth related change as they all affect the session: login, logout, session refresh. Sessions are refreshed over time as long as the user is active with your app.
auth.statusChange
Typically you will want to use the auth.authResponseChange event. But in rare cases, you want to distinguish between these three states:
1. Connected
2. Logged into Facebook but not connected with your application
3. Not logged into Facebook at all.
Scenario 1 (New User)
Facebook Login Button's Text: "Login"
User State: User not connected
Now user clicks on login and completes the login flow.
Button's text changes to "Log Out" and this is the only time when'auth.login' triggers.
FB.Event.subscribe('auth.login', function (response) {
// do something with response
if (response.status === 'connected') {
// user connected
FB.api('/me', function (response) {
alert(response.name + " " + response.id);
});
}
});
Scenario 2 (Existing User)
If a user who is logged in to Facebook and has already authorized your app visits your app then the user automatically get's connected and Login Button's text is "Log Out".
In this case add the following code into the fbAsyncInit function:
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
// connected
alert(response.name + " " + response.id);
}
});
FB.getLoginStatus is called everytime the page refreshes but you can also call it anytime in your app by embedding it into a javascript function.
I have the following code (javascript)
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?=$this->facebook->getAppID()?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
loading();
alert("test");
window.location = throute + "login/index/fblogin";
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status=="connected") {
alert("test");
window.location = throute + "login/index/fblogin";
}
});
};
(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>
If user is not logged in on fb everything is fine.
My problem is that if the user is already logged in on fb he is automatically logged in on site when he access it. I need him to log after click on the "Login" button.
Ty for help.
Just initialize the FB-app when the user clicks your loginButton. I am guessing you are using facebooks own loginbutton, you don't need to do that.
('#loginButton').click(function(){
FB.init({
appId: '<?=$this->facebook->getAppID()?>',
cookie: true,
xfbml: true,
oauth: true
});
//the rest of the code follows here
});
What will happen is that if users are already logged in on Facebook, they will be logged in directly upon pressing your button.
If the user is not logged in on Facebook, the login-dialog will appear upon clicking on your button.
When I click on my FB log in button the FB auth dialog pops up. After I enter my FB credentials the dialog redirects to a url like this:
https://www.facebook.com/dialog/permissions.request?wholeBunchOfQueryParameters
or, if I was already logged into FB, the popup dialog is:
https://www.facebook.com/dialog/oauth?wholeBunchOfQueryParameters
but those are blank dialogs that stay open. Once I close the dialog the callback happens but not until then. This is the behavior on IE and Chrome.
I did have this working fine and I think it stopped working when I got a new computer so maybe it is environmental. I thought it has worked since then but maybe not. I reverted to a version of my code that was working and it no longer works either so that further suggests that it is environmental but I don't know what it could be. I could be off in the weeds.
Also, one other bit of info, I'm developing locally so I'm using localhost:port. I did a ton of research on this issue and did see someone say to use 127.0.0.1 instead of localhost so I did try that as well but it didn't make a difference.
Any idea why the dialogs won't close?
<fb:login-button perms="email,user_checkins" onlogin="afterFacebookConnect();"
autologoutlink="false" ></fb:login-button>
<div id="fb-root" style="display:inline; margin-left:20px;"></div>
<script language="javascript" type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'myAppId',
status: true, cookie: false, xfbml: true
});
};
function afterFacebookConnect() {
FB.getLoginStatus(function (response) {
alert("Hi");
var access_token = FB.getAuthResponse()['accessToken'];
if (response.authResponse) {
window.location = "../Account/FacebookLogin?token=" +
access_token;
} else {
alert(FB.getAuthResponse);
}
});
};
function logout() {
FB.getLoginStatus(function (response) {
var access_token = FB.getAuthResponse()['accessToken'];
if (response.authResponse) {
window.location = "../Account/Logout";
} else {
// user clicked Cancel
}
});
};
$(document).ready(function () {
if (document.getElementById('fb-root') != undefined) {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}
});
</script>
This is a known bug that has surfaced in the last few days (see https://developers.facebook.com/bugs/241915819261223).
The good news is one of FB's Engineers has just stated the following, so we should see this resolved shortly:
We have a fix for this issue and it will be pushed soon. Stay tuned.
Facebook login button disappears whenever I refresh the page in Internet Explorer 9. All other browsers are OK. IE only shows the button first time any refresh make it disappear.
I am using facebook connect with folowing code
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '193048084076885', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
</script>
and fb button
<fb:login-button v="2" size="medium" length="long" perms="email, user_about_me, user_birthday, user_education_history, user_hometown, user_interests, user_location, user_photos"></fb:login-button>
Do you know any workaround?Thanks.
I found the solution, put following to above the head section.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Going out of my mind on this one.
I have Facebook like buttons on my ecommerce store. I have set them up using the XFBML and JAvascript SDK.. I am using the correct Meta OG properties.. everything work fine for facebook.
Now this is where it goes wrong: I was trying to follow this guide: http://www.websharedesign.com/blog/how-do-i-track-that-little-facebook-like-button-in-google-analytics.html but it doesn't work for me as there a couple of differences. Firstly Im using the Async version of Google analytics... Secondly, my facebook like buttons get the URL automatically (In this article the user has manually put in the href...) So i changed the code to add in the gaq.push method instead;
I have tried adding:
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackEvent', 'facebook', 'like', href]);
});
into the main Async Facebook script, i have tried putting this on its own at the bottom of the page.. I have even tried adding this as an onclick= on the actual fb:like.
The only time i got it to register anything was when i accidentally added that code in my main Google analytics and then it generated a report for every page view as an event...
Please help!!
EDIT this is all my code: I have GA at the top of my page...
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'xxxxxxxxxxxxxxx']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Then below this FB is defined at the top of the body:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxxxxxxxxx', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
alert('Facebook Like');
_gaq.push(['_trackEvent', 'facebook', 'Facebook like', 'test']);
});
};
(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>
You see I have a put the gaq.push in the facebook code above - with an alert. Now this alert is fired when i click like, but the trackEvent is not sent to google? (Also, ideally where it says 'test' I would like the URL of the page...)
Thanks guys.. after 7 hours i worked out what the problem was... I had my IP hidden from Google Analytics as i didn't my test visits to mess up the stats of th regular pageviews.. So i learned the hard way that it also hides your IP addres from track Events! For reference the code that I supplied before works perfectly.. the only thing I changed was the changing the 'test' to url to get the href of the page being liked, so my final Facebook code was:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxxxxxxxxx', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
alert('Facebook Like');
_gaq.push(['_trackEvent', 'facebook', 'Facebook like', href]);
});
};
(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>
What a muppet! Thanks for your help though!