如何使用我的自定义图像更改 Facebook 登录按钮 [英] How to change facebook login button with my custom image

问题描述

我的脚本有这样的代码

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 的默认登录按钮插件.但我想使用我的自定义 Facebook 连接图像.有人可以帮我吗?

Its using facebook's default login button plugin. But i would like to use my custom facebook connect image. Can anyone help me?

推荐答案

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

The method which you are using is rendering login button from the Facebook Javascript code. However, you can write your own Javascript code function to mimic the functionality. Here is how to do it -

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

1. Create a simple anchor tag link with the image you want to show. Have a onclick method on anchor tag which would actually do the real job.

<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，它就会工作.

Please note that the above function is fully tested and works. You just need to put your facebook APP ID and it will work.

这篇关于如何使用我的自定义图像更改 Facebook 登录按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！