9

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>
Nagaraj .
  • 425
  • 1
  • 5
  • 13
  • 1
    possible duplicate of [Resize/scale facebook like button (height and width)](http://facebook.stackoverflow.com/questions/8676972/resize-scale-facebook-like-button-height-and-width) – Igy May 30 '12 at 16:46
  • yeah or http://stackoverflow.com/questions/3493117/custom-skin-for-facebook-like-button – InspiredBy May 30 '12 at 16:50
  • 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 – reach4thelasers Jun 11 '12 at 19:31
  • Possible duplicate of [Resize/scale facebook like button (height and width)](http://stackoverflow.com/questions/8676972/resize-scale-facebook-like-button-height-and-width) – rogerdpack May 15 '17 at 16:02

4 Answers4

16

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/

Ben
  • 641
  • 7
  • 6
3

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.

reach4thelasers
  • 26,181
  • 22
  • 92
  • 123
  • 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. – duality_ Sep 22 '12 at 13:40
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.

rogerdpack
  • 62,887
  • 36
  • 269
  • 388
Rafael
  • 2,827
  • 1
  • 16
  • 17
0

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

pshindi.in
  • 1