I am using the Facebook Javascript SDK to create a login button using the following markup.

<div class="fb-login-button" data-show-faces="false" data-width="300px" 
     data-max-rows="1">Login with Facebook</div>

This works fine. However, I want to customise this a little bit by making it larger. I know this was possible using different values (size= for example) in the XFBML markup. I've found the correct FB css classes that need to be applied by looking at the generated html so I can always hack it with some JQuery magic.

I would much rather just set the appropriate data-* attribute and have FB-JSSDK do it on its own.

I've already tried data-size= which totally doesn't work

I am using the Facebook Javascript SDK to create a login button using the following markup.

<div class="fb-login-button" data-show-faces="false" data-width="300px" 
     data-max-rows="1">Login with Facebook</div>

This works fine. However, I want to customise this a little bit by making it larger. I know this was possible using different values (size= for example) in the XFBML markup. I've found the correct FB css classes that need to be applied by looking at the generated html so I can always hack it with some JQuery magic.

I would much rather just set the appropriate data-* attribute and have FB-JSSDK do it on its own.

I've already tried data-size= which totally doesn't work

• javascript
• facebook-javascript-sdk
• facebook-login

Share Improve this question Follow edited Nov 27, 2011 at 10:02 Jay Stevens asked Nov 22, 2011 at 15:20 Jay StevensJay Stevens 5,92399 gold badges4646 silver badges6868 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I just tried data-size="large", and it worked. The style fb_button_large was applied to it, and it was slightly larger. It wasn't much larger though, I hardly noticed. Also, it's not documented so I assume it will be depreciated eventually?

data-size="xlarge" was NOTICEABLY larger, however.

<div class="fb-login-button" data-show-faces="false"
 data-max-rows="1" data-size="xlarge">Login with Facebook</div>

So, I'm not sure why it's not working for you. What I would do instead, then, is just use CSS if you want to fully customize the button.

The new button is just nested <div class="fb-login-button"><a class="fb_button"><span class="fb_button_text"> DOM construct, and you can use CSS to style it however you want.

If you are having a cascading precedence issue with the Facebook styles taking over, just use !important at the end of your style declaration to override the Facebook ones.

You can even change the size of the "F" image, since it's a sprite with multiple sizes. When you override the styles, just play with the background-position property until you get the right one.

Good luck!