0

The Facebook Auth Dialog won't show up when viewing the app in a page tab (iframe). It works fine when viewing the app externaly though.

My Facebook app settings are:

Site URL: http://domain.com/test
Canvas URL: http://domain.com/test/
Secure Canvas URL: https://domain.com/test/
Page Tab URL: http://domain.com/test/
Secure Page Tab URL: https://domain.com/test/

I've added the app to the page tab ny using the link: https://www.facebook.com/dialog/pagetab?app_id=[MY_APP_ID]&next=https://domain.com/test/

I'm using the php sdk. And my code in //domain.com/test/index.php looks like this:

<?php
require 'facebook-php-sdk/src/facebook.php';

$facebook = new Facebook(array(
   'appId'  => '[MY_APP_ID]',
   'secret' => '[MY_APP_SECRET]',
   ));

// Get User ID
$user = $facebook->getUser();

if ($user) {
   $logoutUrl = $facebook->getLogoutUrl();
} else {
   $loginUrl = $facebook->getLoginUrl();
}

if ($user) {
   try {
      // Proceed knowing you have a logged in user who's authenticated.
      $user_profile = $facebook->api('/me');
   } catch (FacebookApiException $e) {
   error_log($e);
   $user = null;
   }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Facebook test</title>
</head>

<body>
<p>
<?php if($user) : ?>
   <a href="<?php echo $logoutUrl;?>">Logout</a>
<?php else: ?>
   <a href="<?php echo $loginUrl;?>">Login</a>
<?php endif; ?>
</p>
</body>
</html>

Would be grateful for any help!!

dannepanne
  • 377
  • 2
  • 4
  • 15

2 Answers2

2

You can't use the auth dialog in an iframe (why? see here: http://facebook.stackoverflow.com/a/10831018/1427878). Add target="_blank" to your links, and it should work. Or just embed the JavaScript SDK & use FB.login, if you want a Popup without further expense.

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • Oops, doesn't work in Firefox though. The auth dialog shows up, but adding "_blank" won't reload the page in a proper way in Firefox. Have also tried using the JS SDK, but reloading the page with window.location.reload() after authorization gives me the "To display this page, Firefox must send information that will repeat any action..."-message and no proper reload. – dannepanne May 31 '12 at 23:14
  • Facebook calls your app via POST when loading it into the iframe, so the message is normal. Do you *have* to reload your page when the user authorized your app? If so, then maybe just add the actual timestamp (JS Date object) to location.href, that makes it a „new” ressource to your browser. – CBroe Jun 01 '12 at 06:05
  • I ended up with something like this: ` window.location.href = '//';`Not beautiful, but works. Can you give me a code example with your timestamp thing? – dannepanne Jun 04 '12 at 19:40
2

Try making a JS function that change the iframe parent URL

function RedirectTo(installURL){
     window.top.location.href = installURL;
}

and call that function on the onClick event of the Login text

<?php else: ?>
   <a href="#" onclick='RedirectTo("<?php echo $loginUrl;?>")'>Login</a>
<?php endif; ?>

Make sure the RedirectURI of the $loginUrl var is the URL of your app

Then you will have to chenge this settings at your facebook app (https://developers.facebook.com/apps)

App Domains: facebook.com

Website with Facebook Login: your facebook app URL (i.e: https://www.facebook.com/{FanPageUsername}?sk=app_{appID})

miguelglz
  • 417
  • 1
  • 4
  • 16