如何用我的自定义图像更改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>

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

2) Next, we create the Javascript function which will show the actual popup and will fetch the complete user information, if user allows. We also handle the scenario if user disallows our facebook app.

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: 'publish_stream,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);
}());

3）完成了。

请注意，上述功能经过充分测试和工作。你只需要把你的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屋！