facebookfacebook-fbml

Facebook SDK: Replace "Log In" button with custom image

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>
Solution

  • 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