Customise the facebook login and logout button [duplicate]

Question

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

I have this:

<fb:login-button autologoutlink="true"></fb:login-button>

How do I customize the button by it image, size and etc?

Answer 1

if you're using new Facebook JavaScript SDK you can use any element as button - just attach onclick event to that element and invoke FB.login() with necessary parameters.

Answer 2

If you use the Facebook PHP SDK (if you are new, check the example given), you can get the URL to redirect the user to the Facebook login page with :

$fb_login_url = $facebook->getLoginUrl();

You can then include it in your page as a normal link :

<a href="<?php echo $fb_login_url ?>" id="facebook_login_link">
  Login with Facebook
</a>

that you can customize with some CSS, for example :

#facebook_login_link {
  background: url(my_button_image.png) no-repeat top left;
  display: block;
  width: 50px;
  height: 20px;
}