Resize/scale facebook like button (height and width)

Question

I couldn't find anywhere (if it's possible) how to resize the whole like button (not it's iframe or the container, but the button itself with the writing and everything).

Google+ offers several versions of it's +1 button, the smallest being 15px.

For design purposes I need to change (scale) the size of the FB like button to match the layout of the site (in this particular case... scale down to 15px).

(according to FB terms and conditions scaling is permitted.)

Godden

Could you add a link that scaling is permitted? Just wondering... – Stephanotis

Possible duplicate of facebook like button larger size – Stephanotis

Answer 1

Although you say not the iframe, if you do scale the iframe with CSS3 it will increase the size of the button. It would probably be best to give the iframe a ID or class but something like this would work if it was the only iframe on the page:

iframe
{
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 is an example http://www.tinydesign.co.uk/like/

Counterproductive

Can't seem to click on this on iPhone, it doesn't do anything. – Spraddle

Not working on iPhone may be due to ejohn.org/blog/clickjacking-iphone-attack , couldn't find any workaround yet – Projectile

would something like padding: 2px fix this? is the reason it doesn't work on iPhone that something is scaled up and rounded such as to be theoretically outside the bounds? – Hunnicutt