facebook - 如何使用我的自定义图像更改 Facebook 登录按钮

Question

我的脚本有这样的代码

echo '<p class="wdfb_login_button"><fb:login-button scope="' .
     Wdfb_Permissions::get_permissions() . '" redirect-url="' .
     wdfb_get_login_redirect() . '">' .
     __("Login with Facebook", 'wdfb') . '</fb:login-button></p>';

它使用 facebook 的默认 login button plugin .但我想使用我的自定义 facebook 连接图像。谁能帮帮我？

Answer 1

您使用的方法是从 Facebook Javascript 代码呈现登录按钮。但是，您可以编写自己的 Javascript 代码函数来模仿该功能。这是如何做到的-

1. 使用您要显示的图像创建一个简单的 anchor 标记链接。在 anchor 标记上有一个 onclick 方法，它实际上可以完成真正的工作。

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

1. 接下来，我们创建 Javascript 函数，它将显示实际的弹出窗口并在用户允许的情况下获取完整的用户信息。如果用户不允许我们的 Facebook 应用程序，我们也会处理这种情况。

window.fbAsyncInit = function() {
    FB.init({
        appId   : 'YOUR_APP_ID',
        oauth   : true,
        status  : true, // check login status
        cookie  : true, // enable cookies to allow the server to access the session
        xfbml   : true // parse XFBML
    });

  };

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: 'public_profile,email'
    });
}
(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

1. 我们完成了。

请注意，以上功能已经过全面测试并且可以正常工作。您只需输入您的 Facebook APP ID 即可。