with upgrade of Firefox to 42.0 I got some strange behavior..
I'm calling FB.init method like this:
FB.init({
appId: '{$appid}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
But in Firefox it gets blocked, I get warning:
The resource at "https://connect.facebook.net/en_US/all.js" was blocked because tracking protection is enabled.
This is default behavior, I didn't set up any additional security or whatever..
What to do?
EDIT - after help and googling, this is a little bigger problem:
Turns out Firefox's Do Not Track and tracking protection are two separate things:
Do Not Track is enabled in Preferences/Options > Privacy > "Tell sites that I do not want to be tracked". Enabling sends the DNT header but it does not block any requests.
Tracking Protection is enabled in about:config > privacy.trackingprotection.enabled. Enabling does not send the DNT header, but does block requests based on Disconnect's blocklist. So detecting 2 isn't as easy as checking navigator.doNotTrack, because that property is only set for 1.
Solution (temporarily) - try to do FB.init, if error do some alert..
try {
FB.init({
appId: '{$appid}',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
}catch(err) {
alert('Some info for the user...');
}
Does anyone have better solution?
A simple google search leads to this page: https://developer.mozilla.org/en-US/Firefox/Privacy/Tracking_Protection
You should be able to deactivate that feature right where the message appears, or via about:config. It should actually be deactivated by default afaik.
From the client side, you can't. This is security policy Firefox. You can read about this issue in thread: https://bugzilla.mozilla.org/show_bug.cgi?id=1226498
If any one is coming to this post to find how to handle this error. I think this answer may help.
(function (d, s, id) {
let js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
//here goes the error handling
js.onerror = (e) => {
//here we can handle the error
//we can show the user why the page isn't loading correctly
}
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
A way to go about it is checking whether the FB object exists after all script resources have been loaded. In this way we are covered regardless of what caused the script load failure:
$(window).on("load", function() {
// If Facebook SDK failed to load ...
if (typeof FB === "undefined") {
// ... then change interface/set global variable to handle missing FB
}
});
Related
The below code is from the official Facebook developer pages, and works in FF and Safari, and sometimes in Chrome — but more often not in Chrome.
On Snow Leopard with the latest Chrome, I click the login button and see a little flicker as the FB login dialog opens and closes. If, in my FB account, I remove and re-add the app, I get asked for permissions, but the auth.authResponseChange event never seems to fire.
Does anyone know if this is a bug, or where I might find a solution that doesn't require me to manually poll the server?
Is this a product of Google+ vs. Facebook?!
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : $APP_ID$, // App ID from the app dashboard
channelUrl : $channelUrl$, // Channel file for x-domain comms
status : true, // Check Facebook Login status
cookie : true,
oauth : true,
xfbml : true // Look for social plugins on the page
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
console.log('auth.authResponseChange fired');
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
};
// 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));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses the JavaScript SDK to
present a graphical Login button that triggers the FB.login() function when clicked.
Learn more about options for the login button plugin:
/docs/reference/plugins/login/ -->
<!-- scope='publish_stream,read_stream' -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
Go into chrome settings - advanced settings; Under privacy click "content settings". See if the "Block 3rd party cookies and site data" is checked.
I'm having a similar issue where in chrome the js-sdk will give me the momentary fb popup, but doesnt actually seem to log the user in or recognize the user being logged in/authorized. In my case I think I've narrowed my issue down to that setting.
If you have it enabled, try disabling it to see if that fixes it for you... although that's really just a diagnostic step, it's not a resolution since you would still have users who have that setting enabled.
I'm trying to determine the workaround if any.. possibly involving the use of fb login flow "for web" (ie not using their sdk and thereby potentially avoiding the use of 3rd-party cookies)
here's my post on my version of this issue... can facebook javascript/php SDK's "talk" to each other if 3rd-party cookies are disabled? facebook->getUser() returns 0
I have the following code to start facebook SDK on the site (warning, stripped some functions out, and removed namespaces because they don't add to this discussion):
var facebookAppId = "501843009849438";
var facebookEvents = (function(){
var facebookHasLoaded = false;
var asyncLoadFacebook = function() {
// exposed to window because it is called by facebook
window.fbAsyncInit = function() {
FB.init({
appId : facebookAppId, // App ID
channelUrl : '//'+location.host+'/nl/recommendations/facebook/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
});
};
// 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'));
facebookHasLoaded = true;
};
return {
enable: function() {
if (!facebookHasLoaded) {
jQuery('body').append('<div id="fb-root" />');
asyncLoadFacebook();
}
}
};
})();
// If there are no fb-like's found, we don't auto-start and you should manually load .enable().
jQuery(document).ready(function(){
if (jQuery('.fb-like').length !== 0) {
facebookEvents.enable();
}
});
This javascript is placed in a file that is loaded on every page of the site. Because we don't want to load the SDK on every page, the check has been added on 'document.ready'.
What have I done to try and fix it
I have placed breakpoints in Chrome, and it nicely gets into the asyncLoadFacebook function. I also get an iframe inside my div on a page. Tried developers.facebook.com. Also read a lot of fora around the interwebs. Double checked the appId via facebook graph, it is the right appId.
HTML for the like button
This is the div I use to show the like button:
<div class="fb-like" data-href="${canonicalURLEncoded}" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="verdana"></div>
The only thing "wrong" when loading pages is that I see a lot of error messages like:
Blocked a frame with origin "http://****************" from accessing a frame with origin "https://s-static.ak.facebook.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
But I never use http or https in the code when calling some script url (as you can see in the script sample). The pages with like buttons are in http. Plus, google plus gives the same logs in the console, but the plusone buttons just works like it should.
Inline is not possible
Unfortunaly I cannot just deploy and test around. Especially inline javascript (right after the body) is NOT an option. I really want the async version to just work..
I'm putting Tweet and Facebook Like buttons on the project im working. Everything seems to be working but when click the btns I get this JS error:
Unsafe JavaScript attempt to access frame with URL http://platform.twitter.com/widgets/tweet_button.1357735024.html#_=1357834238249&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fwww.sandals.com%2Fmain%2Fnegril%2Fne-home.cfm&size=m&text=Negril%2C%20Jamaica%20All%20Inclusive%20Vacation%20-%20Sandals%20Negril%20Beach%20Resort%20%26%20Spa&url=http%3A%2F%2Fwww.sandals.com%2Fmain%2Fnegril%2Fne-home.cfm&via=SandalsResorts from frame with URL http://www.facebook.com/plugins/like.php?locale=en_US&app_id=150389325070106&href=www.sandals.com/main/negril/ne-home.cfm&send=false&layout=button_count&width=60&show_faces=false&action=like&colorscheme=light&font&height=21. The frame requesting access set 'document.domain' to 'facebook.com', the frame being accessed set it to 'twitter.com'. Both must set 'document.domain' to the same value to allow access.
this is the code im using for fb and twitter
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '150389325070106', // App ID from the App Dashboard
channelUrl : '//www.sandals.com', // Channel File for x-domain communication
status : false, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true, // parse XFBML tags on this page?
frictionlessRequests: true
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
// Twitter Btn JS
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
i followed the steps in fb dev site but still get those errors :S
As you can read in the linked answer, this is an issue with Twitter's API. Alternatively to the answer on the linked question, I created a custom tweet button that looks exactly like the one of Twitter's JS API but doesn't use it and still includes the share count. Feel free to use it.
Demo: http://fiddle.jshell.net/eyecatchup/Th6P2/2/show/
Code: https://github.com/eyecatchup/tweetbutton
Having spent hours trawling the web I have found many posts related to this but none seem to work, even some 'working' examples on jsfiddle appear not to work!
I want to register when a user clicks 'like' on my web page.
The 'like' link appears and indeed it pops up a new window for you to log into facebook. But I cannot subscribe to the 'edge.create' event. I know the sdk is loading ok because I can subscribe to the 'xfbml.render' event.
Some posts say that you must have an appId for this to work [I do] but others claim that it works without.
Here is my code:
One point to note is that I am currently running this under //localhost:57477, so I have set the like href to google.com. I did note that one of the posts indentified a recent facebook bug where this event didn't fire if the href domain didn't match that of the web page, but this is now marked as 'fixed'.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
//console.log('window.fbAsyncInit');
FB.init({
appId: 'myappid',
status: false,
cookie: false,
xfbml: true
});
//Additional initialization code here
FB.Event.subscribe('edge.create',
function (response) {
//console.log('edge.create');
alert('edge.create');
}
);
FB.Event.subscribe('xfbml.render',
function (response) {
//console.log('xfbml.render');
alert('xfbml.render');
}
);
};
// 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));
</script>
<div href="http://google.com" class="fb-like" data-send="false" data-width="450" data-show-faces="false" data-font="verdana"></div>
I know this is old thread, but i came here with the same problem.
The thing that worked for me is that Facebook AppID must belong to a domain (set it in Facebook App settings) in which your site stands - localhost won't work then.
Your code looks good to me, I think the problem is in the FB.init() options.
This is what I use:
{
appId: 'myappid',
authResponse: false,
channelUrl: "http://url-to-my-channel-url.com",
cookie: true,
oauth: true,
status: true,
xbfml: true
}
With these init options, I am able to use edge.create to track when someone clicks the Like button.
I'm not sure its something I did wrong, (everything seems to go wrong in ie with the facebook sdk)
When I get the facebook friends FB.api('/me/friends' (already logged in), I got a weird error, "enable to get the property list"
On ie8 & ie9, it works on chrome and FF, anyone got a workaround?
I assume you use JavaScript and FBML because you tagged JavaScript and FBML
Here are the reasons of getting error in ie
Verify that you did place the below code correctly as I think you didn't.
1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
The following code will load and initialize the JavaScript SDK with all common options. Replace YOUR_APP_ID and WWW.YOUR_DOMAIN.COM with the appropriate values. The best place to put this code is right after the opening <body> tag.
<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'; 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. Add an XML namespace to the <html> tag of your document. This is necessary for XFBML to work in earlier versions of Internet Explorer.
<html xmlns:fb="http://ogp.me/ns/fb#">
Thanks