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
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
Sometimes I'm getting the "FB is not defined" issue when loading the http://connect.facebook.net/en_US/all.js
I've realized that the problem is because sometimes my website just doesn't load that file. So it gets nothing, and the object FB literally doesn't exist.
My solution is to prevent my users when this happens, so I've tried the following codes in JavaScript but none seems to work:
if (FB) {/*run the app*/} else {/*alert the user*/}
if (FB!==false) {/*run the app*/} else {/*alert the user*/}
if (FB!='undefined') {/*run the app*/} else {/*alert the user*/}
thanks for the answer!
I think you should solve the main issue instead, which solution is provided by Facebook (Loading the SDK Asynchronously):
You should insert it directly after the opening tag on each page you want to load it:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
From the documentation:
The Facebook SDK for JavaScript doesn't have any standalone files that
need to be downloaded or installed, instead you simply need to include
a short piece of regular JavaScript in your HTML that will
asynchronously load the SDK into your pages. The async load means
that it does not block loading other elements of your page.
UPDATE: using the latest code from the documentation.
Assuming FB is a variable containing the Facebook object, I'd try something like this:
if (typeof(FB) != 'undefined'
&& FB != null ) {
// run the app
} else {
// alert the user
}
In order to test that something is undefined in plain old JavaScript, you should use the "typeof" operator. The sample you show where you just compare it to the string 'undefined' will evaluate to false unless your FB object really does contain the string 'undefined'!
As an aside, you may wish to use various tools like Firebug (in Firefox) to see if you can work out why the Facebook file is not loading.
I guess you missed to put semi-colon ; at the closing curly brace } of window.fbAsyncInit = function() { ... };
For people who still got this FB bug, I use this cheeky fix to this problem.
Instead of http://connect.facebook.net/en_US/all.js, I used HTTPS and changed it into https://connect.facebook.net/en_US/all.js
and it fixed my problem.
There is solution for you :)
You must run your script after window loaded
if you use jQuery, you can use simple way:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
status : true,
version : 'v2.5'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
$(window).load(function() {
var comment_callback = function(response) {
console.log("comment_callback");
console.log(response);
}
FB.Event.subscribe('comment.create', comment_callback);
FB.Event.subscribe('comment.remove', comment_callback);
});
</script>
You were very close with your original example. You could either use #jAndy's suggestion or:
if (typeof FB != 'undefined')
It's pretty strange for FB not to be loaded in your javascript if you have the script tag there correctly. Check that you don't have any javascript blockers, ad blockers, tracking blockers etc installed in your browser that are neutralizing your FB Connect code.
I had FB never being defined. Turned out that I was prototyping functions into the Object class called "merge" and another called "toArray".
Both of these screwed up Facebook, no error messages but it wouldn't load.
I changed the names of my prototypes, it works now. Hey, if Facebook is going to prototype Object, shouldn't I be allowed to prototype it?
FB recommends to add the async all.js include right after body, so that FB object get prepared when you use it in page.
You can also have artificial delay using setTimeout to make sure FB object is loaded. e.g.
<script>setTimeout(function(){
FB.Event.subscribe('edge.create',
function (response) {
alert('msg via fb');
});},2000);
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId :'your-app-id',
xfbml :true,
version :'v2.1'
});
};
(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 /sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}
(document,'script','facebook-jssdk'));
</script>
From the documentation: The Facebook SDK for JavaScript doesn't have any standalone files that need to be downloaded or installed, instead you simply need to include a short piece of regular JavaScript in your HTML tha
I had a similar issue and it turned out to be Adblocker Pro. Be sure to check that this or other blocking extensions have been disabled. I lost around 1hr 30 mins due to this. Feel like such a noob ;)
...
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script type="text/javascript">
...
Check div id="fb-root" /div" !!! It's very important to run.