Farcebook login form works on PC and MAC not on iPad and iPhone

[Christian Zuili]

Hi

We created this test page http://www.zuiliuniversity.com/login

If you click on the text it creates your account /and/or logs you in.

BUT

Changes the link to: http://www.zuiliuniversity.com/Default.aspx?PageID=14977116&Error=Thank+you+for+logging+in.

AND Correctly logs you in.

BUT

it only works on MAC and PC

We couldnt get it to work on iPad or iPhone.

This is the code for the module

{module_facebooklogin,buttonImage="",buttonText="CLIC TO REGISTER OR LOGIN",zoneId="-1",autoSubscribeNewUsers="",redirectToPage="",pageId="-1"}

Any ideas on what are we missing?

[thetrickster888]

I'm thinking there's some bug involving the window.open function that BC attaches to your login link.  You have a few options.  Here's what the facebook login button outputs:

<a target="_fblogin" href="http://www.zuiliuniversity.com:80/FB/LinkToContact.aspx?A=0&S=False&ZID=-1&PID=-1&AuthProcessUrl=htt..." onclick="var w = window.open('','_fblogin','width=680,height=400,scrollbars=yes');w.focus();">CLIC TO REGISTER OR LOGIN</a>

I think if it is the window.open function that is messed up in iOS.  It could be that the target "_fblogin" isn't valid with that underscore or maybe even that there is an empty value for the first parameter in window.open which hshould be the url to open. 

You might be able to take advantage of BC's {system_visitorDeviceClass} module which will output "desktop", "phone" or "tablet" depending on their device.  You can write some javascript that if it's a phone or tablet you can remove the onclick attribute on the link so it just uses the HREF instead like a normal link.  The link's href attribute will still work since it leads to the Facebook permission dialog but in the same browser window.  You could try:

(function($){

      $(document).ready(function() {

          var device = "{system_visitorDeviceClass}";

          var targ = $("a[target='_fblogin']");

          if ( device === "phone" || device === "tablet" ) {

               // Remove the onclick handler the BC puts inline on your link

               targ.removeAttr("onclick");      

          }

     });

})(jQuery);

If you insert this at the bottom of your page that has the login button or the bottom of your page template it could work, you'd bypass (remove) the onclick for phones or tablets and use the regular link URL which should lead to the permissions FB prompt anyway-- just not using window.open to do it.