facebook like button larger size

Question

is there anyway to increase the size of the fb like plugin?

thanks.

Loveliesbleeding

Answer 1

Yeah, target the iframe with CSS and scale it using CSS3. Something like this:

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

Batten

Just in case it helps anyone else, my iframe didn't have an ID. So I targeted it with .fb_iframe_widget iframe. – Conure

Just a word of wrarning that this will break on mobile browsers (tested Chrome, Firefox) – Blocky

Appears to be "not respected" on mobile but works on desktop. – Sesame

Answer 2

Nope, it comes as is. What's strange is that Google+ and Twitter allow you have have various sizes for their buttons.

Arlaarlan

Answer 3

There's a workaround, but it goes against FB's policy of changing how their button looks. I imagine that you could probably create a bigger size FB like button and just use that...

http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/

Accredit

"Somebody somewhere" said it might not be against policy to scale it... – Sesame

Answer 4

I using bootstrap and add property btn and btn-large css

<div class="fb-like btn btn-large btn-primary" data-href="#"
data-width="550" data-layout="button" data-show-faces="true" 
data-share="false"></div>

it can make the button become larger.

Penult

Answer 5

These days the like plugin offers a "small" or "large" variant, viz data-size:

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div>

You might be able to draw attention to it in other ways, also, like centering it, etc. see https://www.quora.com/Is-it-possible-to-increase-the-size-of-Facebook-like-button

Also try this:

.fb-like {
    transform: scale(1.5);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -moz-transform: scale(1.5);
}

(from https://www.babelscribe.co.nz/notes/resizing-facebook-like-buttons/) though it might mess up the positioning a bit.

And of course I suppose if you're truly desperate you could do the old trick of "your own custom like button" that just redirects them to a page with only the "real" like button or that pops up a modal with "just the like button" that they have to reclick again :|

Sesame