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>

Nystrom

possible duplicate of Resize/scale facebook like button (height and width) – Silique

yeah or #3493617 – Trouvaille

Remember to mark the answer of the question that helped the most or the one with the most votes - even if it wasn't the answer you wanted to hear – Uroscopy

Possible duplicate of Resize/scale facebook like button (height and width) – Raybourne

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/

Conchaconchie

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

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

Answer 2

Facebook Like buttons are rendered in an iFrame by the Javascript snipped they provide, that iFrame is hosted by Facebook and the styles cannot be overridden.

Quite rightly so.... If you were able to change the size or style of a Like Button then we would see HUGE, bright red, flashing like buttons all over the internet - that would be awful. They're designed to be discreet, recognisable and non-obtrusive.

Uroscopy

Recognisable is also the key here. Imagine simple links all over the net that no one would see / suspect they are FB like buttons. You just click a simple link and bam, you've liked a page that you didn't intend to. – Santa

Answer 3

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.

Amylo

Answer 4

Create div class for iframe

<div class='like-btn'>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width=105&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;appId=422608707941592" width="105" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div> 

now add this CSS

.like-btn iframe{margin:0 auto;float;none;border-radius:3px;display:block;max-width:105px;padding-top:2px;padding-left:2px;box-shadow:2px 2px 0px #222;height:35px;border:6px solid #3D58A4 !important;background: #3D58A4}

Result:

Facebook Like Demo

If you don't want button at center, you can use float insteed of margin

Poston