Using the Facebook SDK, I get the following console error when trying to connect a user to my site. The "Connect with Facebook" button works fine in all other browsers, except Firefox.
I have a Channel URL in the innit config, and I've confirmed this issue happens in Firefox installs without Firebug. The following is my code:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'my_real_app_id',
channelUrl : 'MYURL.com/channel.php',
status: true,
cookie: true,
xfbml : false
});
};
(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));
$(document).ready(function() {
$('a#login-fb').click(function(event) {
event.preventDefault();
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information...');
FB.api('/me', function(response) {
handleFacebookLogin(response);
});
} else {
console.log('User cancelled login or did not fully authorize');
}
}, {scope: 'email, offline_access, user_birthday, publish_stream, publish_actions' });
});
</script>
I fixed this issue by changing my above javascript, right below #fb-root to the following:
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({
appId : 'my_id',
status: true,
cookie: true,
xfbml : false
});
};
(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);
}());
//rest of code here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With