Cannot login on IE

[curt0]

I implemented this code into my AngularJS (version 1.2.6) app and it enables me to login with Facebook on Chrome, but not IE9 (I have not tested on other versions of IE). When I run ezfb.login(), I get Facebook's dialog popup. After I enter my login info and click "Log In", the popup goes blank and nothing happens after that (though, if I open Facebook.com in another tab, it has logged me in there). Nothing runs after the ezfb.login() line and nothing shows in the console for the Facebook popup.

Has anyone got it to work on IE? Any suggestions on what I need to do?

[pc035860]

Hi @curt0 ,

This is an issue related to Facebook JavaScript SDK.
Here's a possible solution.
http://stackoverflow.com/questions/5778100/facebook-connect-showing-blank-popup-on-login-in-internet-explorer-8

Hope it helps.

[curt0]

Hi @pc035860 ,

Thanks for your reply and suggestion.
I found that StackOverflow posting already, but none of their suggestions work. I still have the same problem.

I have enabled protected mode in IE. I have this in my code:

        FB.init({ 
            appId: XXXXXXX, 
            channelUrl: "https://example.com/facebook/channel.html", 
            status: true, 
            cookie: true, 
            xfbml: true,
            oauth: true
        });

There might be one slight difference from the StackOverflow posting. When I get the Facebook popup initially, it has this URL:

https://www.facebook.com/login.php?skip_api_login=1&api_key=1386155918327149&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Foauth%3Fredirect_uri%3Dhttps%253A%252F%252Fs-static.ak.facebook.com%252Fconnect%252Fxd_arbiter%252F8n77RrR4jg0.js%253Fversion%253D40%2523cb%253Df2b0390d5ffce74%2526domain%253D.....

After I enter my login info and click on "Log In", the popup goes blank and has this URL:

https://www.facebook.com/dialog/oauth?redirect_uri=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F8n77RrR4jg0.js%3Fversion%3D40%23cb%3Df1d57b90826ff49%26domain%3D....

This is what shows in the console for Facebook's popup, after clicking on "Log In":

<p>HTML1204: facebook.com is running in Compatibility View because 'Display all websites in Compatibility View' is checked.</p><p> </p>

login.php?login_attempt=1&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Foauth%3Fredirect_uri%3Dhttps%253A%252F%252Fs-static.ak.facebook.com%252Fconnect%252Fxd_arbiter%252F8n77RrR4jg0.js%253Fversion%253D40%2523cb%253Df1097a1afb7eeb5%2526domain%253D.......

Have you (or anyone else) seen the above? I welcome any other suggestion. Thanks!

[pc035860]

The channelUrl parameter should be an html page in your domain rather than example.com (which is just an example).
And I found that current FB.init doc doesn't have channelUrl anymore. I guess that means specifying channelUrl might not help to solve your problem.

According to your last error message, may be you should uncheck "Display all websites in Compatibility View" setting in your IE9?
http://support.microsoft.com/kb/2536204

[curt0]

Thanks for your reply and suggestions.

Yes, the channelUrl parameter has a URL to my domain, not to example.com. Specifying this didn't make any difference anyways.

Turning off Compatibility View simply stops showing those lines in the console, but it doesn't fix the problem.

Do you happen to have IE11? If so, are you able to log in?

[pc035860]

I do have IE11 on Windows 8.1. And it works fine.

[curt0]

Have you tried iE9?

[pc035860]

Nope

[curt0]

I was curious to find out if this problem existed only with my AngularJS app. I used browserstack.com to find out if I was able to login with Facebook. Like you, I was able to login with IE11 on Windows 8.1. Here are my other results:

Windows 7
IE 8 - website does not show
IE 9 - no
IE 10 - no
IE 11 - yes

Windows 8
IE 10 - don't think so, but not sure
IE 10 desktop - no

Windows 8.1
IE 11 - yes
IE 11 desktop - yes

I'm interested in working with you to get your code to work with IE9 and IE10. Is there anything that you can think of that we should check out or look into?

[pc035860]

Have you tried the demo plunk provided in README.md?
http://plnkr.co/edit/qclqht?p=preview

[curt0]

Here are my results for http://plnkr.co/edit/qclqht?p=preview:

Windows 7
IE 8 - website does not show
IE 9 - your code does not appear
IE 10 - yes, logout showed "…content cannot be displayed…"
IE 11 - yes, logout showed "…content cannot be displayed…"

Windows 8
IE 10 - yes, but Facebook window does not close
IE 10 desktop - yes, logout showed "…content cannot be displayed…"

Windows 8.1
IE 11 - yes, logout showed "…content cannot be displayed…"
IE 11 desktop - yes, logout showed "…content cannot be displayed…"

I have IE9 on Windows 7 on VirtualBox. Your code on http://plnkr.co/edit/qclqht?p=preview does not appear on either my machine or on browserstack.com:

For most scenarios, I am able to log in, but after I click on logout, I get this:

In IE10 on Windows 8, after I entered my login info and clicked Log In, the Facebook window goes blank and does not close. When I was able to bring up the Plunkr tab, your code shows that I am logged in:

I'm not as concerned about the other issues, as I am about being able to log in and log out with IE9 and IE10.

According to this site, IE still has the largest market share among browsers at over 50%: http://thenextweb.com/insider/2014/02/01/ie11-passes-ie10-market-share-firefox-slips-bit-chrome-gains-back-share/ . In fact, a huge percentage of people are still forced to use IE8 at their office because of their company's IT department. So, even though the Linux, Mac, Chrome lovers, which includes me and especially Google, hate IE, we are excluding a huge percentage of the population by not getting our code to work with IE.

[curt0]

FYI, ezfb.ui works in IE9, but not when accessing the web app in Facebook's Canvas in IE9.

Facebook's Canvas is an iFrame. Would you happen to have any clues as to why or how the iFrame might be blocking ezfb.ui?

Update:

This needs to be added:

display: 'iframe'

The above is the default but need to stipulate otherwise ezfb.ui does not work in IE9 in Facebook's Canvas.