Login Facebook Javascript SDK does not work in IE 11?

Question

Login Facebook Javascript SDK does not work in IE 11?

Navigation

#1 by (1 votes)

5

I'm trying to integrate "authenticate" with the Facebook SDK JavaScript, it works in Firefox / Chrome / Safari but in Internet Explorer it stays in "stand by" already to give the application permission to access my information. Is there something wrong or is it some IE configuration?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Facebook SDK para Javascript</title>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="main.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>Facebook SDK login con Javascript</h1>

    <a href="#" id="login" class="btn btn-primary">Iniciar sesión</a>

    <script>
    // 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'));
     </script>
</body>
</html>

main.js

$(function() {

    var app_id = 'APP_ID_HERE';
    var scopes = 'email';

    var btn_login = '<a href="#" id="login" class="btn btn-primary">Iniciar sesión</a>';

    var div_session = "<div id='facebook-session'>"+
                      "<strong></strong>"+
            "<span></span>"+
                      "<img>"+
                      "<a href='#' id='logout' class='btn btn-danger'>Cerrar sesión</a>"+
                      "</div>";

    window.fbAsyncInit = function() {

      FB.init({
        appId      : app_id,
        status     : true,
        cookie     : true, 
        xfbml      : true, 
        version    : 'v2.2'
      });

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

    var statusChangeCallback = function(response, callback) {
        console.log(response);

        if (response.status === 'connected') {
            getFacebookData();
        } else {
            callback(false);
        }
    }

    var checkLoginState = function(callback) {
        FB.getLoginStatus(function(response) {
            callback(response);
        });
    }

    var getFacebookData =  function() {
        FB.api('/me', { locale: 'en_US', fields: 'name, email' }, function(response) {
            $('#login').after(div_session);
            $('#login').remove();
            $('#facebook-session strong').text("Bienvenido: "+response.name);
        $('#facebook-session span').text("Email: "+ response.email);
            $('#facebook-session img').attr('src','http://graph.facebook.com/'+response.id+'/picture?type=large');
        });
    }

    var facebookLogin = function() {
        checkLoginState(function(data) {
            if (data.status !== 'connected') {
                FB.login(function(response) {
                    if (response.status === 'connected')
                        getFacebookData();
                }, {scope: scopes});
            }
        })
    }

    var facebookLogout = function() {
        checkLoginState(function(data) {
            if (data.status === 'connected') {
                FB.logout(function(response) {
                    $('#facebook-session').before(btn_login);
                    $('#facebook-session').remove();
                })
            }
        })

    }
    $(document).on('click', '#login', function(e) {
        e.preventDefault();

        facebookLogin();
    })

    $(document).on('click', '#logout', function(e) {
        e.preventDefault();

        if (confirm("¿Está seguro?"))
            facebookLogout();
        else 
            return false;
    })

})

javascript facebook internet-explorer-11

asked by Luis Gómez 17.12.2015 в 22:14

source

1 answer

Facebook Login What is the meaning of "... args" in the argument of a Javascript function?

score 1 · Accepted Answer

It's a usual problem in IE when deploying to localhost , since it fails to redirect for some security policy issue

Instead of using localhost in the URL try with. 127.0.0.1 and the port where you are testing.

http://127.0.0.1:1234

For a short time I have posted your code in this Azure website and when opening it in IE it works without problem, since the error only occurs in local execution environment.

link

And in any case ... IE11 ...? mm is for legacy applications, if you are in something new, do not forget to try it in Edge .