javascript css 样式的 facebook 登录按钮，最佳实践
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22252144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css styling the facebook Login Button, best practices
提问by Louis
I am using the Facebook Login Buttonfor 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...
我在我的 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>
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/
JSfiddle：http: //jsfiddle.net/4SqGn/
Do you know how to control the button styles please ?
你知道如何控制按钮样式吗？
回答by DonJuwe
As you can see in the fb docu, the div.fb-login-buttonis replaced by an iframeby 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.
正如您在 fb 文档中看到的那样，div.fb-login-button被iframe您从外部加载的脚本替换为。要自己设置此按钮的样式，您只需创建一个根据您的意愿设置样式的按钮并自己触发登录机制。
For further information, read here.
如需更多信息，请阅读此处。
回答by Manish Bansal
Although quite old, but here is sample code that I am using.
虽然很旧，但这里是我正在使用的示例代码。
<!--HTML-->
<button id="customBtn" (click)='checkLoginState();'>
<span class="icon"></span>
<span class="buttonText">Facebook</span>
</button>
<div id='fb-status-login'></div>
Below is the CSS(Inspired by google button) you can use. For logo, you can download any 32px*32px png.
下面是您可以使用的 CSS（受谷歌按钮启发）。对于徽标，您可以下载任何 32px*32px png。
//CSS
#customBtn {
display: inline-block;
background: white;
color: #444;
width: 190px;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
background: url('/assets/images/f-normal.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
Inside your component (I am using Angular 4), you can define function like this.
在您的组件内部（我使用的是 Angular 4），您可以像这样定义函数。
public checkLoginState() {
console.log('checking login status');
FB.getLoginStatus((response)=> {
this.statusChangeCallback(response);
});
}
public statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
console.log('status was already connected. will test api.');
this.testAPI();
} else if(response.status ==='not_authorized'){
console.log('status was not authorised. will call login');
FB.login((response)=> {
if (response.status === 'connected') {
console.log('status is now connected. will test api.');
this.testAPI();
} else {
console.log('fatal.');
document.getElementById('fb-status-login').innerHTML = 'some serious shit happened';
}
});
} else{
document.getElementById('fb-status-login').innerHTML = 'Please log ' +
'into this app.';
}
}
public testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('fb-status-login').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
回答by NeilB
I've figured out you can use the (undocumented) colorscheme attribute ('light' or 'dark') with the Login Button, which is for use with other Facebook Social Plugins - Like button etc.
我发现您可以将（未记录的）colorscheme 属性（'light' 或 'dark'）与登录按钮一起使用，该按钮用于其他 Facebook 社交插件 - Like 按钮等。
This gives an alternative to the colour of text, and suited my requirements as I had a black background and the default 'light' scheme uses black text, which meant no text in the FB iframe was visible with the default settings.
这提供了文本颜色的替代方案，并且符合我的要求，因为我有黑色背景，并且默认的“浅色”方案使用黑色文本，这意味着在默认设置下 FB iframe 中没有文本可见。
E.g.
例如
If you need more control over the appearance, you'd be better off creating your own button and use the Javascript SDK to build something custom: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.3
如果您需要更多地控制外观，最好创建自己的按钮并使用 Javascript SDK 构建自定义内容：https: //developers.facebook.com/docs/facebook-login/manually-build-a -登录流/v2.3
