css 样式的 facebook 登录按钮，最佳实践

Question

我在我的 web 应用程序中使用 Facebook登录按钮进行单点登录（下面的代码）。但我不知道如何用 css 控制按钮的样式。我看到 Facebook 插件在我的页面中插入了一个 iframe...

<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>

但这不会呈现：

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

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

你知道如何控制按钮样式吗？

Answer 1

正如您在 fb 文档中看到的，div.fb-login-button被替换为iframe您从外部加载的脚本。要自己设置此按钮的样式，您只需创建一个根据您的意愿设置样式的按钮，然后自行触发登录机制。

欲了解更多信息，请阅读此处。