We help IT Professionals succeed at work.

Facebook Image API in IE

Al4ddin2
Al4ddin2 asked
on
503 Views
Last Modified: 2014-09-10
Hi,

I have built an image plugin for Facebook and DropBox Chooser.
Both are working fine in Chrome, FF, Safari etc. but neither work in IE.

When a user gets the Facebook login Dialog in IE they can enter their login details but the dialog never closes and it doesn't validate them so they cannot use it.
When a user uses the Dropbox chooser app there is a warning message in the popup that says 'unable to communicate with parent window'

Can anyone help with suggestions on how I can get these to work in IE please?

Thanks
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
What IE version

Author

Commented:
I am using IE10, but I need it to work in IE8+
Thanks

Author

Commented:
any ideas?
I was hoping this would be quite simple as Facebook is so popular and surely they cater for IE users?
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
I thought Facebook was dropping/had dropped support for IE8 - will have to double check their API, which may take a while.
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Is it not working in any version of IE or just IE8

Author

Commented:
Any version of IE. Like I say, I have IE10 and it doesn't work for me.
Thanks
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Can you post your code or link to where I can see it in action

Author

Commented:
Well, this is the default example that they provide on the Facebook developers site.
When I run this in Chrome and I am logged into Facebook I will get a reponse back of 'connected' and my name saying is logged in.

In IE, it always returns an 'unknown' status.

My Facebook App at the moment is just a test one.

Can you get the below to work in IE with an example application?

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
    <body>
        <div id="fb-root" class="fb-root"></div>
        <script>
            // This is called with the results from from FB.getLoginStatus().
            function statusChangeCallback(response) {
                console.log('statusChangeCallback');
                console.log(response);
                // The response object is returned with a status field that lets the
                // app know the current login status of the person.
                // Full docs on the response object can be found in the documentation
                // for FB.getLoginStatus().
                if (response.status === 'connected') {
                    // Logged into your app and Facebook.
                    testAPI();
                } else if (response.status === 'not_authorized') {
                    // The person is logged into Facebook, but not your app.
                    document.getElementById('status').innerHTML = 'Please log ' +
                        'into this app.';
                } else {
                    // The person is not logged into Facebook, so we're not sure if
                    // they are logged into this app or not.
                    document.getElementById('status').innerHTML = 'Please log ' +
                        'into Facebook.';
                }
            }

            // This function is called when someone finishes with the Login
            // Button.  See the onlogin handler attached to it in the sample
            // code below.
            function checkLoginState() {
                FB.getLoginStatus(function (response) {
                    statusChangeCallback(response);
                });
            }

            window.fbAsyncInit = function () {
                FB.init({
                    appId: '283392231841442',
                    cookie: true,  // enable cookies to allow the server to access 
                    // the session
                    xfbml: false,  // parse social plugins on this page
                    version: 'v2.0' // use version 2.0
                });

                // Now that we've initialized the JavaScript SDK, we call 
                // FB.getLoginStatus().  This function gets the state of the
                // person visiting this page and can return one of three states to
                // the callback you provide.  They can be:
                //
                // 1. Logged into your app ('connected')
                // 2. Logged into Facebook, but not your app ('not_authorized')
                // 3. Not logged into Facebook and can't tell if they are logged into
                //    your app or not.
                //
                // These three cases are handled in the callback function.

                FB.getLoginStatus(function (response) {
                    statusChangeCallback(response);
                });

            };

            // 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/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
            } (document, 'script', 'facebook-jssdk'));

            // Here we run a very simple test of the Graph API after login is
            // successful.  See statusChangeCallback() for when this call is made.
            function testAPI() {
                console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function (response) {
                    console.log('Successful login for: ' + response.name);
                    document.getElementById('status').innerHTML =
                        'Thanks for logging in, ' + response.name + '!';
                });
            }
        </script>

        <!--
            Below we include the Login Button social plugin. This button uses
            the JavaScript SDK to present a graphical Login button that triggers
            the FB.login() function when clicked.
            -->

        <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
        </fb:login-button>

        <div id="status">
        </div>

    </body>
</html>

Open in new window

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
The code is working fine for me in IE11

Author

Commented:
IE10, 9?

Author

Commented:
Did you setup an app and test it against that?
Could it be the setup of that causing the issue?

Author

Commented:
When I use this:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
    <body>
        <div id="fb-root" class="fb-root"></div>
        <script>
            // This is called with the results from from FB.getLoginStatus().
            function statusChangeCallback(response) {
                console.log('statusChangeCallback');
                console.log(response);
                // The response object is returned with a status field that lets the
                // app know the current login status of the person.
                // Full docs on the response object can be found in the documentation
                // for FB.getLoginStatus().
                if (response.status === 'connected') {
                    // Logged into your app and Facebook.
                    testAPI();
                } else if (response.status === 'not_authorized') {
                    // The person is logged into Facebook, but not your app.
                    document.getElementById('status').innerHTML = 'Please log ' +
                        'into this app.';
                } else {
                    // The person is not logged into Facebook, so we're not sure if
                    // they are logged into this app or not.
                    document.getElementById('status').innerHTML = 'Please log ' +
                        'into Facebook.';
                }
            }

            // This function is called when someone finishes with the Login
            // Button.  See the onlogin handler attached to it in the sample
            // code below.
            function checkLoginState() {
                FB.getLoginStatus(function (response) {
                    statusChangeCallback(response);
                });
            }

            window.fbAsyncInit = function () {
                FB.init({
                    appId: 'app ID',
                    cookie: true,  // enable cookies to allow the server to access 
                    // the session
                    xfbml: false,  // parse social plugins on this page
                    version: 'v2.0' // use version 2.0
                });

                // Now that we've initialized the JavaScript SDK, we call 
                // FB.getLoginStatus().  This function gets the state of the
                // person visiting this page and can return one of three states to
                // the callback you provide.  They can be:
                //
                // 1. Logged into your app ('connected')
                // 2. Logged into Facebook, but not your app ('not_authorized')
                // 3. Not logged into Facebook and can't tell if they are logged into
                //    your app or not.
                //
                // These three cases are handled in the callback function.

                FB.getLoginStatus(function (response) {
                    statusChangeCallback(response);
                });

            };

            // 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/sdk.js#xfbml=1&appId=345336152291963&version=v2.0";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            // Here we run a very simple test of the Graph API after login is
            // successful.  See statusChangeCallback() for when this call is made.
            function testAPI() {
                console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function (response) {
                    console.log('Successful login for: ' + response.name);
                    document.getElementById('status').innerHTML =
                        'Thanks for logging in, ' + response.name + '!';
                });
            }
        </script>

        <!--
            Below we include the Login Button social plugin. This button uses
            the JavaScript SDK to present a graphical Login button that triggers
            the FB.login() function when clicked.
            -->

        <div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>

        <div id="status">
        </div>

    </body>
</html>

Open in new window


I just get the following (popup.png), then it returns back to the start page (startuppage.png) with nothing having happened.

*IN IE10*
startupage.PNG
popup.PNG
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
I'm testing here
https://developers.facebook.com/tools/javascript-console/

and it works under IE10 as well

Author

Commented:
Could it have anything to do with the way I have my app configured in Facebook/developers?
At the moment it is just a test app and looks like this...
facebook.png

Author

Commented:
also because im not using https?
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.