0

I use the default Facebook Login Button in my website. It works fine on all desktop browsers, it also works on my iPhone with Firefox and Chrome. However when I use Safari, I have to click twice on the button in order to send the request.

I heard that Safari is having this issue in general. Does anybody have a solution for this?

Here is my code that I use:

              function getInfos() {
                FB.api('/me', {fields: 'first_name,last_name,email,id'}, function(response) {
                  var fn = ('first_name' in response) ? response.first_name : "null";
                  var ln = ('last_name' in response) ? response.last_name : "null";
                  var fid = ('id' in response) ? response.id : "null";
                  var mail = ('email' in response) ? response.email : "null";
                  // ... SUCCESS!! and whatever you want to do with the FB data...
                });
              }

              function processLoginStatus(response) {
                if (response.status === 'connected') {
                  getInfos();
                } else {
                  FB.login(function(response) {
                    if (response.authResponse) {
                      processLogin(response);
                    } else {
                      // user clicked cancel
                    }
                  }, {scope: 'public_profile,email'});
                }
              }
            
              function processLogin(response) {
                if (response.status === 'connected') {
                  getInfos();
                } else if (response.status === 'not_authorized') {
                  console.log("processLogin: not authorized");
                } else {
                  console.log("processLogin: else");
                }
              }
            
              function checkLoginState() {
                FB.getLoginStatus(function(response) {
                  processLoginStatus(response);
                });
              }

              $(document).ready(function() {
                if ($('.facebooklogin').length != 0) {
                  if (typeof FB === 'undefined' || FB === null) {
                  } else {
                    FB.init({
                      appId      : 'MYAPPID',
                      cookie     : true,
                      xfbml      : true,
                      version    : 'v7.0'
                    });
                    $('button.facebooklogin').click(function() {
                      checkLoginState();
                    });
                  }
                }
              });
basZero
  • 4,129
  • 9
  • 51
  • 89
  • This is mostly related to the general Safari issue: https://stackoverflow.com/questions/17710893/why-when-do-i-have-to-tap-twice-to-trigger-click-on-ios – basZero Jun 25 '20 at 11:42
  • Also the trick with `@media (hover) { /* Your styles */ }` does not work. There is no `:hover` style at all anymore in my CSS. – basZero Jun 25 '20 at 12:04
  • I’m guessing this is more likely a problem with Safari’s aggressive blocking of 3rd-party cookies … – CBroe Jun 25 '20 at 12:07

0 Answers0