且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-04 22:41:58

您正在使用的方法是从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.