How to change facebook login button with my custom image

Question

My script has code like this

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>';

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

Answer 1

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

3. We are done.

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