自定义Facebook连接按钮

时间:2012-06-14 16:15:51

标签: facebook

如何用我自己的自定义登录按钮替换生成的facebook登录按钮?

我猜它可以通过创建激活对话框的代码功能或者通过一些css技巧将屏幕上的按钮驱动来完成。我更喜欢第一种解决方案。

我怎样才能让自己的按钮做他们自己做的事情并摆脱默认按钮?

以下是来自facebook开发者网站的示例代码:

require 'fb/facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'X',
  'secret' => 'X',
));

// See if there is a user from a cookie
$user = $facebook->getUser();

if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
    $user = null;
  }
}

?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
  <body>
    <?php if ($user) { ?>
      Your user profile is
      <pre>
        <?php print htmlspecialchars(print_r($user_profile, true)) ?>
      </pre>
    <?php } else { ?>
      <fb:login-button></fb:login-button>
    <?php } ?>
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId: '<?php echo $facebook->getAppID() ?>',
          cookie: true,
          xfbml: true,
          oauth: true
        });
        FB.Event.subscribe('auth.login', function(response) {
          window.location.reload();
        });
        FB.Event.subscribe('auth.logout', function(response) {
          window.location.reload();
        });
      };

      (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
      }());

    </script>
  </body>
</html>

1 个答案:

答案 0 :(得分:5)

只需使用JavaScript SDK的FB.login方法,并在您自己的按钮上单击它。

http://developers.facebook.com/docs/reference/javascript/FB.login/