change the facebook login image

Question

I am using facebook login on my site. Everything is working using the facebook button. I would like to change the graphic image to be my own image. How can I change this?

I currently am using the following to display the button.

<fb:login-button v="2" size="medium" onlogin="FB_ConnectPostAuthorization()">Facebook</fb:login-button> 

Once again, all I want to change is the picture itself.

Answer 1

You can do this by using CSS

Frist: hide image button

#RES_ID_fb_login_image {
    display: none;
}

second: add our custom image as background for connect link

.fbconnect_login_button {
    background: url('http://www.iconfinder.com/ajax/download/png/?id=60824&s=24') no-repeat;
    display: inline-block;
    height: 24px;
    width: 24px;
}

That's all :)

Answer 2

It is possible to do.

This is code of button:

<fb:login-button id="fb_butonek" scope="email">Login me</fb:login-button>

Place this to bottom of your CSS file:

#fb_butonek a
{
background: url("__URL_TO_IMAGE__") no-repeat;

width:247px; /*my image width*/

height:42px; /*my image height*/
}

#fb_butonek a span
{
border:0px none;
background: none;
display:none;
}

Answer 3

In short you can't . If you want to use that FBML tag then you are stuck with that image. The other option is just to redirect the user to:

http://www.facebook.com/connect/uiserver.php
?app_id=APPID
&next=RETURNURL
&cancel_url=CANCELURL
&perms=publish_stream
&fbconnect=0
&canvas=1

and they will be returned to you web page when they login (use the return URL as your site)