css styling the facebook Login Button, best practices

Question

I am using the Facebook Login Button for Single Sign On in my webapp (code below). But I can't figure out how to control the button's styles with css. I see the Facebook plugin inserts an iframe in my page...

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_CA/all.js#xfbml=1&appId=myid";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true"></div>

But this doesn't render :

.fb-login-button {
    width: 300px !important;
    font-size: 16px !important;
    line-height: 30px !important;
    padding: 3px 8px !important;
}

JSfiddle : http://jsfiddle.net/4SqGn/

Do you know how to control the button styles please ?

Answer 1

As you can see in the fb docu, the div.fb-login-button is replaced by an iframe by the script you load externally. To style this button yourself, you could just create a button which is styled depending on your wishes and trigger the login mechanism yourself.

For further information, read here.