Resize Facebook Like button

Question

I used the code below to get the Like button on Facebook. Now the whole point is that I would like to resize the Like button that is displayed. I tried the width attribute, which does not work at all. And I tried to override the CSS class that was used for the code below using facebook. But overriding the CSS class also doesn't work. So tell me how to 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 can customize the iframe with CSS and scale it with CSS3. Something like that:

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

Answer 2

Facebook How buttons are displayed in an iFrame using Javascript, which they provide, that the iFrame is hosted on Facebook, and styles cannot be overridden.

That's right. If you could change the size or style of the Like button, then we would see HUGE, bright red, flashing like buttons all over the Internet - that would be awful. They are designed to be careful, recognizable and unobtrusive.

Answer 3

You cannot change the style of this type of Facebook buttons, but you can create your own if you use the JavaScript OpenGraph SDK , so you can use the div (with user information) or use the image, basically adjust it as you want. The disadvantage is that it is not as straightforward as using the generated Facebook buttons, and that you need an application identifier, and that the user gives you some permissions, but you can also use them as you like.

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 as a demo

If you do not want the button in the center, you can use float instabled of margin