change the size of Facebook Like button

Question

I used the below code to get the Like button of Facebook. Now the things is, I would like to change the size of the Like button that is rendered. I tried the width attribute which not not working at all. And I tried to override the CSS class that's used for the below code by facebook. But overriding the CSS class is also not working as well. So tell me how can I increase the height and width of the Like button.

<div class="fb-like" data-href="http://www.xxxxx.com" data-send="true" data-width="450" data-show-faces="true"></div>

Answer 1

Or you could target the iframe with CSS and scale it by using CSS3. Something like this:

#fbiframe
{
transform: scale(1.5);
-ms-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-o-transform: scale(1.5); 
-moz-transform: scale(1.5); 
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}

Here's an example http://www.tinydesign.co.uk/like/

Answer 2

You can't change the style of this kind of Facebook buttons, but you can create your own ones if you use the JavaScript OpenGraph SDK, in this way you can use a div (with custom information) or use an image, basically customize it however you want it. The downside is that is not as straight forward as using the Facebook generated buttons, and that you require an App Id and that the user gives you some permissions, but aside of that you can use them as you please.