Facebook login button setup * Using non-FBML JSSDK *

Question

I am using the 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> 

It works great. However, I want to tweak it a bit, making it larger. I know that this is possible using different values ​​( size= for example) in the XFBML markup. I found the right FB css classes to apply when looking at the generated html so that I can always crack it using some jQuery magic.

I would rather just set the corresponding data-* attribute and FB-JSSDK itself do it myself.

I already tried data-size= , which doesn't work completely

Answer 1

I just tried data-size="large" and it worked. The fb_button_large style was applied to it, and it was a bit bigger. It was not much more, although I hardly noticed. In addition, it is not documented, so I assume that it will depreciate in the end?

data-size="xlarge" was GREATLY bigger, 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 is not working for you. Instead, I would use CSS if you want to customize the button completely.

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

If you have a cascading priority issue when using Facebook styles, simply use !important at the end of the style declaration to override Facebook tags.

You can even resize the image to "F", as this is a sprite with multiple sizes . When you redefine styles, just play with the background-position property until you get the correct one.

Good luck