• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 458
  • Last Modified:

Facebook Image API in IE

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
0
Al4ddin2
Asked:
Al4ddin2
  • 9
  • 7
1 Solution
 
GaryCommented:
What IE version
0
 
Al4ddin2Author Commented:
I am using IE10, but I need it to work in IE8+
Thanks
0
 
Al4ddin2Author Commented:
any ideas?
I was hoping this would be quite simple as Facebook is so popular and surely they cater for IE users?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
I thought Facebook was dropping/had dropped support for IE8 - will have to double check their API, which may take a while.
0
 
GaryCommented:
Is it not working in any version of IE or just IE8
0
 
Al4ddin2Author Commented:
Any version of IE. Like I say, I have IE10 and it doesn't work for me.
Thanks
0
 
GaryCommented:
Can you post your code or link to where I can see it in action
0
 
Al4ddin2Author 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

0
 
GaryCommented:
The code is working fine for me in IE11
0
 
Al4ddin2Author Commented:
IE10, 9?
0
 
Al4ddin2Author Commented:
Did you setup an app and test it against that?
Could it be the setup of that causing the issue?
0
 
Al4ddin2Author 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
0
 
GaryCommented:
I'm testing here
https://developers.facebook.com/tools/javascript-console/

and it works under IE10 as well
0
 
Al4ddin2Author 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
0
 
Al4ddin2Author Commented:
also because im not using https?
0
 
GaryCommented:
https could be an issue since FB uses it for all users
Your setup looks fine.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now