Web browser prevents facebook popup login window

Hello I am using this function to login with facebook. Now browser prevents popup window to open and asks for permission. How to resolve it ? I can unserstand the issue is that browser takes this as non user event.

function chk_login()
{
  window.fbAsyncInit = function() {
  FB.init({appId: my_app_id, status: true, cookie: true, xfbml: true,oauth : true});
    FB.getLoginStatus(function(response) {
        if (response.authResponse) {
            var fb_access_token = response.authResponse.accessToken;
            FB.api('/me', function(response) {
                   console.log(response);
                 });
        }
        else
        {
        }
    });
    FB.login(function(response) {
        if (response.authResponse) {
            var fb_access_token = response.authResponse.accessToken;
            FB.api('/me', function(response) {
                console.log(response);
                 });
        }
    },{scope: fb_scope});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());  
    }


<img src="fb_login.jpeg" onclick="chk_login()" alt="Facebook Login" style="cursor:pointer;"/>

Answers


Don't wrap the whole SDK in your function, instead have your SDK initializing in the top of the page (after the <body> tag) and put the FB.login() method in your login function. something like:

<body>
<script>
var isLoaded = false;
window.fbAsyncInit = function() {
    FB.init({appId: my_app_id, status: true, cookie: true, xfbml: true,oauth : true});
    isLoaded = true;
    FB.getLoginStatus(function(response) {
        if (response.authResponse) {
            var fb_access_token = response.authResponse.accessToken;
            FB.api('/me', function(response) {
                console.log(response);
            });
        }
    });
};
// Load the SDK Asynchronously
(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));
function chk_login() {
    if(!isLoaded) {
        alert("JS-SDK is not yet loaded or something went wrong. Try again.");
        return false;
    }
    FB.login(function(response) {
        if (response.authResponse) {
            var fb_access_token = response.authResponse.accessToken;
            FB.api('/me', function(response) {
                console.log(response);
            });
        }
    },{scope: fb_scope});
}
</script>

<img src="fb_login.jpeg" onclick="chk_login()" alt="Facebook Login" style="cursor:pointer;"/>

Need Your Help

XNA 3D Point Clouds

c# xna xna-4.0 kinect

I'm trying to output realtime 3D point clouds (307,200 points) using XNA and Kinect; however, it's been ages since I last used XNA and 4.0 changed several things.

mysql query, how to go about it?

php mysql

I am storing data in a mysql database with unix time()

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.