Facebook popup up is blocked in Chrome (v31)

[evdoks]

It seems that Chrome blocks the Facebook pop-up, when using your module (try the demo). In Firefox it is working fine.

[luiscarlosjayk]

Hi @Silentser ,

could you provide an example on your own implementation at Plunkr?
So I could check, since it is working for me.

Thanks

[evdoks]

I was using your demo implementation on Plunker. I am trying it on OS X with Chrome 31. Maybe it has something to do with your pop-up blocking settings? I also attach the screenshot:

[luiscarlosjayk]

Hi @Silentser,

have you tried on a project from yourself? localhost or perphaps a live url? I'm using it on projects and it's working normally.

So, please try it and provide a link in case the issue persists.
Please, after trying it, answer if it was successful or not, so this can be known.

(see a localhost simple demo)

Regards

[taraxe]

The sample demo you provide http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview is blocked for me using both chrome 30.0.1599.66, 31.0.1650.57 and even Firefox 24, 25 and 25.1 using Mac OS X.

Hope this helps.

[evdoks]

I believe the problem with the demo is having Facebook.login() in the callback of asynchronous Facebook.getLoginStatus function. In order for FB popup not to be blocked a browser popup blocker, the call to Facebook.login() should be a result of a user action (click on a button). By calling this function in a callback puts it in a new context and therefore the pop up is blocked.

[taraxe]

Ok,
I think it's a problem because you'll only want to call login after checking loginStatus.

[luiscarlosjayk]

I think you are right, just haven't had the time to propose a solution.
If you come with any before me, please provide it.
Thanks for your collaboration @taraxe, @Silentser

[kasparasg]

I ran into this issue too and the way I went about it was like this:

// In your app config
$routeProvider
      .when('/signin', {
        templateUrl: '/partials/users/signin.html',
        controller: 'SigninCtrl',
        resolve: {
          FBStatus: function($q, Facebook) {
            var defer = $q.defer();

            Facebook.getLoginStatus(function(result) {
              defer.resolve(result);
            });

            return defer.promise;
          }
        }
      })

// Then in controller
.controller('SigninCtrl', function(FBStatus, Facebook) {
  if (FBStatus.status !== 'connected') {
    Facebook.login(function(response) {
      // Do something with response
    });
  }
});

Hope it helps.

[austinpray]

The callback will not fire for me in safari due to:

[Error] Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://localhost:3000". The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access.
    (anonymous function) (xd_arbiter.php, line 18)
    ca (xd_arbiter.php, line 18)
    p (xd_arbiter.php, line 18)
    q (xd_arbiter.php, line 18)
    (anonymous function) (xd_arbiter.php, line 18)
    (anonymous function) (xd_arbiter.php, line 18)
    require (xd_arbiter.php, line 18)
    global code (xd_arbiter.php, line 34)

in the console. I am researching a fix now.

[austinpray]

The callback is not firing because safari on iOS 7 and the latest desktop safari is blocking the facebook login as a popup.

[altsanz]

Still blocked on Google Chrome Versión 34.0.1847.92 beta and Firefox 27.0.1 on Mac OS X

[luketn]

Still blocked for me on Chrome as well.

[evdoks]

@foreachlt - thanks a lot - your workaround works perfectly!

[austinpray]

Sweet!

[mrzmyr]

Thanks for your contribution guys ! 👍 If you have any problems according this issue please open a new one.