Facebook SDK: Replace “Log In” button with custom image

Question

I have Page Tab App, which has a landing page with a "Log In" button for users to click to install the App. Can I replace the "Log In" button with my custom image?

The current code for the "Log In" button is :

<div class="fb-login-button" data-scope="friend_likes"></div>

Answer 1

You can use the JS Api for this,

function fbAuth() {
    FB.login(function(response) {
      if (response.authResponse) {
        alert('User fully authorize the app.');
      } else {
        alert('User canceled login or did not fully authorize the app.');
      }
    }, { scope: 'friend_likes' });
}

then you can call it in a custom button with the onclick event:

<a href="#" onclick="return fbAuth();">Login</a>

Facebook Documentation: FB.login