Customizing Facebook Login button *USING JSSDK not FBML*

Question

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

Answer 1

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!