Question

如何使用Facebook弹出窗口更改登录的宽度和高度？默认情况下，它显示450x260像素的弹出窗口，因此我们无法看到登录表单（附加的捕获）。如何更改弹出窗口的大小？

此处未显示默认弹出窗口大小，登录表单： Default Popup Size, Login Form is not seen here

我们需要调整它的大小，以便我们可以看到登录表单： We need to resize it so we can see the login form

我已尝试在FB.ui and setting popup size中建议的解决方案但无济于事。任何帮助将不胜感激。

这是我的完整代码：

<?php
session_start();
define('YOUR_APP_ID', 'myidhere');
define('YOUR_APP_SECRET', 'mysecrethere');

function get_facebook_cookie($app_id, $app_secret)
{ 
    $signed_request = parse_signed_request(@$_COOKIE['fbsr_' . $app_id], $app_secret);
    $signed_request['uid'] = $signed_request['user_id']; // for compatibility 
    if (!is_null($signed_request))
    {
        $access_token_response = file_get_contents("https://graph.facebook.com/oauth/access_token?client_id=$app_id&redirect_uri=&client_secret=$app_secret&code={$signed_request['code']}");
        parse_str($access_token_response);
        $signed_request['access_token'] = $access_token;
        $signed_request['expires'] = time() + $expires;
    }
    return $signed_request;
}

function parse_signed_request($signed_request, $secret)
{
  list($encoded_sig, $payload) = explode('.', $signed_request, 2); 
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);

  if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
    error_log('Unknown algorithm. Expected HMAC-SHA256');
    return null;
  }

  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log('Bad Signed JSON signature!');
    return null;
  }

  return $data;
}

function base64_url_decode($input)
{
  return base64_decode(strtr($input, '-_', '+/'));
}

if (isset($_COOKIE['fbsr_' . YOUR_APP_ID]))
{ 
    $cookie = get_facebook_cookie(YOUR_APP_ID, YOUR_APP_SECRET);
    $user = json_decode(@file_get_contents('https://graph.facebook.com/me?access_token=' .$cookie['access_token']));
}
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Login Connect for Website Demo</title>
</head>
<body>

<?php
if (@$cookie)
{
    ?>
    <h2>You Are Logged In <?= $user->name ?> </h2> <br />
    E-mail ID: <?= $user->email ?>
    <br />
    <a href="javascript://" onclick="FB.logout(function() { window.location='sandbox/facebook_login' }); return false;" >Logout</a>
    <?php
}
else
{
    ?>
    <h2>Welcome Guest! </h2>    
    <div id="fb-root"></div>
    <fb:login-button perms="email" width="width_value" show_faces="true" autologoutlink="true" size="large">Login with Facebook</fb:login-button>
    <?php
} ?>

<script src="http://connect.facebook.net/en_US/all.js"></script>   
<script>
 // Initiate FB Object
 FB.init({
   appId: '<?= YOUR_APP_ID ?>', 
   status: true,
   cookie: true, 
   xfbml: true
   });
 // Reloading after successfull login
 FB.Event.subscribe('auth.login', function(response) { 
    window.location.reload(); 
 });
</script>
</body>
</html>

Answer 1

Mozilla Firefox存在问题，导致autoGrow无效。当我升级到Mozilla Firefox 16.0.2时，问题会自动解决。

Answer 2

尝试使用jquery

操作dom的height属性

$('[whatever dom element]').attr([modify attributes]);

使用Facebook弹出窗口更改登录的宽度和高度

2 个答案: