Develop Reference

Like button not showing up

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..

FB.login url serves a blank page when there is no facebook cookie set on mobile browsers

Something starange is happening when trying to login to facebook with the javascript SDK on mobile Safari and Android browser. When I clear both my 'history' and my 'cookies and data' and try to login to Facebook using the FB.login method, Safari and Android browser open a new tab with the auth url but stays blank. In all the desktop browsers, everything works just fine.
The strange thing is, is that when I clear my 'history' and my 'cookies and data', then visit facebook.com (not logging in or anything), close the site, open my site and then try to login to FB, it actually works like it should!
So this seems like facebook.com sets a cookie which causes the authentication URL to succesfully load.
I have looked all over for a solution for this problem but couldn't find anything and thus my first stackoverflow post...
Just to be complete, this is the code I use to init the FB SDK:
window.isFacebookSDKLoaded = false;
window.onFacebookSDKLoaded = function () {}; //is injected with a function from another js app on the site
window.fbAsyncInit = function() {
FB.init({
appId : '{{ appID }}', // App ID
channelUrl : '{{ baseUrl }}channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
window.isFacebookSDKLoaded = true;
window.onFacebookSDKLoaded();
};
(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));
Someplace else in my app I just simply do:
(using google closure)
mm.controller.facebook.DoFBLogin.prototype.doLogin = function ()
{
FB.login( goog.bind( this.loginResult, this ), { scope: app.Config.getFBPermissions() } );
}
mm.controller.facebook.DoFBLogin.prototype.loginResult = function ( result )
{
// logged in
};
If someone has a solution... Thanks in advance!

Facebook Javascript SDK FB Undefined

When attempting to use the Facebook JS SDK, I keep running into the error FB undefined.
When I watch it through the JavaScript debugger on IE it runs through correctly during the page load, then at the end it is just undefined and no events that are subscribed to fire.
The goal: to make a page tab refresh the top most level page, to get past the fan gate.
Any ideas on what I am missing here?
Code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({
appId : 'APP CODE INSERTED HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'URL to Channel .ASPX'
});
// Additional initialization code here
FB.Event.subscribe('edge.create',
function(response){
top.location.href = 'Page to refreshed inserted here';
});
};
(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>

Your JavaScript to load the SDK Asynchronously doesn't match what the Facebook SDK documentation currently shows. See below:
// 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));
Both blocks of JavaScript to load the SDK are very similar. Your JavaScript uses:
d.getElementsByTagName('head')[0].appendChild(js);
To load the SDK. The most current version as documented by FB uses:
ref = d.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(js, ref);
Your version adds the source reference to load the FB JavaScript by appending to the HEAD HTML tag. The most current version does this by finding the first SCRIPT reference and inserting the FB reference before that reference.
Perhaps your issue is caused by the subtle differences between these two methods.
One way to rule this out would be to temporarily hard code the loading of the FB JavaScript synchronously by placing the following HTML into your page's header:
<head>
<script type="text/javascript" src="http://connect.facebook.net/en_us/all.js"></script>
.
.
.
</head>

Facebook script all.js crashes in Chromium browser: Uncaught SyntaxError: Unexpected identifier all.js:57

I use the following code to initialize Facebook. After I changed many many things in a separate Javascript file that is loaded by the HTML page, I get an Uncaught Syntax Error inside the Facebook script (which is embedded in the HTML page in the following form), but I do not know the reason for this error and what causes it.
fbAsyncInitDone = false;
window.fbAsyncInit = function() {
FB.init({
appId : '{{app_id}}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
//fillinFriends();
fbAsyncInitDone = 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));
How can I make all.js work again? I think this error is related to Chromium, because Firefox still works. I badly need a working Facebook Javascript, because it is used by several Facebook elements on the page.

FB.api('/me/friends') throws error in Internet Explorer

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