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