Question

I’m trying to develop a mobile version of an existing site for use on the iPhone, and I’m using a straight hyperlink who’s target is defined thusly:

  $fb = $this->facebook->getLoginUrl(array(
    'redirect_uri' => $redirect,
    'scope' => 'email,publish_stream,offline_access,friends_location',
    'display' => 'popup'
  ));
  $data['fb_login_url'] = $fb;

However, tapping on this in mobile safari on my iPhone takes me to what appears to be the desktop-sized Facebook login page:

How can I get a mobile-optimized version of this Facebook login page?

Answer 1

If you need to use the login function of the facebook javascript SDK see https://developers.facebook.com/docs/guides/mobile/web/#sdk

Specifically this example

FB.login(function(response) {
   if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
       FB.logout(function(response) {
         console.log('Logged out.');
       });
     });
   } else {
     console.log('User cancelled login or did not fully authorize.');
   }
 }, {scope: 'email'});

Calling FB.login() will cause the mobile web version to open in a new mobile safari ‘tab’