简体   繁体   中英

How can I get the new Facebook Javascript SDK to work in IE8?

I've boiled down my page to the simplest possible thing, and it still doesn't work in IE8.

Here's the entire html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
<head></head>
<body>
<div id="fb-root"></div>
<fb:login-button></fb:login-button>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({appId: 'd663755ef4dd07c246e047ea97b44d6a', status: true, cookie: true, xfbml: true});
  FB.Event.subscribe('auth.sessionChange', function(response) {
    alert(JSON.stringify(response));
  });
  FB.getLoginStatus(function (response) { alert(JSON.stringify(response)); });
</script>
</body>
</html>

In firefox, safari, and chrome (on a mac), I get the behavior I expect: if I am not logged into Facebook, I get a dialog on page load with an empty session. When I click the Login button and log in, I get a second dialog with a session. If I am logged into Facebook, I get two dialogs with sessions: one from the getLoginStatus call, and another from the event.

In IE8, I get no dialogs when I load the page. The getLoginStatus callback is not invoked. When I click the Login button, I get a dialog, but it has a very strange error in it:

Invalid Argument

The Facebook Connect cross-domain receiver URL ( http://static.ak.fbcdn.net/connect/xd_proxy.php#?=&cb=f3e91da434653f2&origin=http%3A%2F%2Fmysiteurl.com%2Ff210cba91f2a6d4&relation=opener&transport=flash&frame=f27aa957225164&result=xxRESULTTOKENxx ) must have the application's Connect URL ( http://mysiteurl.com/ ) as a prefix. You can configure the Connect URL in the Application Settings Editor.

I've sanitized the Connect URL above, but it is correct.

The dialog does have username/password fields. If I log in, the dialog box gets redirected to my Connect URL, but there's no fb cookie, so of course nothing works.

What am I doing wrong here?

Update (2010 Sep 10):

This problem is not universal. My site url has a port number in it, because it's my test site: http://mysiteurl.com:12345 . Without a port number, ie8 seems to be ok. With the port number, it continues to fail as it did before. However, the error message is now more terse:

Invalid Argument

Given URL is not allowed by the Application configuration

Also, this problem is specific to IE (actually, I suspect it's specific to the flash XD transport, but I don't know how to confirm that). It works fine on every other platform/browser pair I've tried.

I am still no closer to making this work with a url with a port number.

Try passing channelUrl param to your FB.init function and create channel.html file as suggested by ref link below:

https://developers.facebook.com/docs/reference/javascript/

They REALLY should publish this. But when working on you local server on a random port eg 8080 you HAVE to use 127.0.0.1 and NOT localhost or else it won't work in IE. ALso ensure that your connect URL in the facebook application's settings is set to 127.0.0.1

I have been fiddling with my code for hours trying to figure this out. My situation is a bit different, but I feel it may be from the same problem:

Anytime I would execute commands under the FB.Event.Subscribe function, IE8 would execute my entire command before the trigger event had actually changed (eg, when subscribed to 'auth.login', the cb function would execute before a user typed his/her username and password). Of course, my callback functions depended on data necessary after the user had logged in.

I test in IE, Firefox, and Chrome, and IE is the only browser giving me trouble. I, too, have my test site running under a port other than 80, but I haven't tried specific diagnostics yet to pinpoint the problem, although I'm fairly certain it relates to this.

Hopefully this helps anyone with similar issues at least be aware of other possible problems. Hope to find an answer or workaround soon!

If your problem only happens when running your site on a port other than port 80, then you have your answer: only run it on port 80. Variants on this question/problem come up over and over with Facebook app development where people run their test or dev site on a port other than port 80. Man up and run it on port 80!

It is not as if you are going to run on a different port in production, so make your test environment mimic production.

Do you have some legitimate reason you have to run on an alternate port number? Really it is not hard at all to run as many sites as you want all on port 80.

I had the same problem here with IE. Works fine in Firefox and Chrome. But then I just figured it out.

In your Facebook application setting, in Web Site tab, I am sure you have "Site URL" filled out, but now you need to fill out the field "Site Domain" below it and it'll work for IE.

I don't know WHY without that field it still works for browsers other than IE, doesn't make any sense on Facebook's end.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM