title: css styling the facebook Login Button, best practices
body: <p>I am using the Facebook <a href="https://developers.facebook.com/docs/plugins/login-button" rel="noreferrer">Login Button</a> 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...</p>
  
  <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script&gt;(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&amp;appId=myid";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
  &lt;div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But this doesn't render  :</p>
  
  <pre><code>.fb-login-button {
      width: 300px !important;
      font-size: 16px !important;
      line-height: 30px !important;
      padding: 3px 8px !important;
  }
  </code></pre>
  
  <p>JSfiddle : <a href="http://jsfiddle.net/4SqGn/" rel="noreferrer">http://jsfiddle.net/4SqGn/</a></p>
  
  <p>Do you know how to control the button styles please ?</p>