Question

可能重复：
Facebook SDK: Replace “Log In” button with custom image

我有这个：

<fb:login-button autologoutlink="true"></fb:login-button>

如何根据图像，尺寸等自定义按钮？

Answer 1

如果你正在使用新的Facebook JavaScript SDK，你可以使用任何元素作为按钮 - 只需将onclick事件附加到该元素，并使用必要的参数调用FB.login()。

Answer 2

如果您使用Facebook PHP SDK（如果您是新手，请查看example given），您可以获取URL以将用户重定向到Facebook登录页面：

$fb_login_url = $facebook->getLoginUrl();

然后，您可以将其作为普通链接包含在您的页面中：

<a href="<?php echo $fb_login_url ?>" id="facebook_login_link">
  Login with Facebook
</a>

您可以使用某些CSS进行自定义，例如：

#facebook_login_link {
  background: url(my_button_image.png) no-repeat top left;
  display: block;
  width: 50px;
  height: 20px;
}

Answer 3

威廉，

此链接可能会说明您要完成的工作：http://blog.mixu.net/2011/01/09/implementing-facebook-login-part-3/

以上博客文章概述了一些可选属性：

的条件
string表示按钮是可见还是隐藏。

的尺寸
string指定按钮的大小。指定图标以仅显示图标，或小图标，中图标，大图标或xlarge。（默认值为中等。）

的 autologoutlink
bool如果为true且用户已连接并具有会话，则按钮图像将更改以指示用户可以注销。单击该按钮可将用户从Facebook和所有已连接的会话中删除。（默认值为false。）

的背景
string指定要使用的消除锯齿的按钮图像以匹配您站点的背景 - 无论是纯白色，浅色还是深色。指定白色，深色或浅色。（默认值为浅。）注意：如果使用v =“2”，则不指定此属性。

的长度
string指定在大小指定为small，medium，large或xlarge的按钮上使用的文本标签。指定文本标签的缩写仅对文本标签“连接Facebook”或“长度”进行连接。如果要通过将登录按钮文本包含在fb：login-button标记中来呈现登录按钮文本，则根本不指定长度。（默认值很短。）

的 onlogin
字符串当用户获得Facebook会话时（即登录Facebook并授权网站后）执行的JavaScript代码。

的 v
string指定“2”以使用最新的Facebook Connect登录按钮（Facebook Connect向导中提供的示例）。如果您需要使用原始的Facebook Connect登录按钮，请不要使用该属性。

Answer 4

转到此answer，我已经解释了这一点并提供了代码。如果还需要进一步澄清，请告诉我。

以下是该代码的缩写版本 -

HTML PART -

<a href="#" onclick="fb_login();"><img src="images/fb_login_awesome.jpg" border="0" alt=""></a>

JAVASCRIPT FUNCTION -

function fb_login(){
    FB.login(function(response) {

        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            //console.log(response); // dump complete info
            access_token = response.authResponse.accessToken; //get access token
            user_id = response.authResponse.userID; //get FB UID

            FB.api('/me', function(response) {
                user_email = response.email; //get user email
          // you can store this data into your database             
            });

        } else {
            //user hit cancel button
            console.log('User cancelled login or did not fully authorize.');

        }
    }, {
        scope: 'publish_stream,email'
    });
}

自定义Facebook登录和注销按钮

4 个答案: