Monthly Archives: August 2011

Facebook Login Button with Image

Previously I was searching for how to change the Facebook Login Button with an image. Surfing the internet didn’t gimme answer. I also posting in some coding forum, but there is also no good answer. It cost me more than 2 days when facing this problems. However i found the answer by my self. Therefore in this post i want to share it with you. Because i know facing this problems is tiring.

Before we continue with manipulating the facebook login buton with an image, i asume you already knwo about how to make facebook login button. If you dont know about it yet, please check this. After you read this lets start.

First, Found the fb tag. It should be like:

<fb:login-button></fb:login-button>

Change it into some thing like:

<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>

In this case, i make the width become 216, because i’ll use an image that have property width=216 and height=72.

The result should be look like:

Facebook

Facebook

Second, Make your own button. In this case, we will use three div. First for the image, second for the facebook login button, and the last is for the container of both.

First div:

<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;z-index:111;">
<img src="yourimage.jpg" style="cursor:pointer" />
</div>

Second div:

<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>
</div>

The last div will contain both of first div and second div:

<div style="position:relative;width:216px;height:72px;" >
</div>

Third, Combine all of the div. Then the final code will look like:

<div style="position:relative;width:216px;height:72px;" >
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;z-index:111;">
<img src="yourimage.jpg" style="cursor:pointer" />
</div>
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>
</div>
</div>

Make sure the width and the height is correct based on your image width and height. Then, copy the final code into your website.

How it works:

The first div that contain your image will be placed under the second div that contain the facebook button. The second div will be exactly overlayed the first div. Then, we make the second div opacity become 0, so it will be invisible. As a result, when you press your image, you actually press the facebook button.

http://septiadi.com/2011/08/08/facebook-login-button-with-image/