我在我的网络应用程序中使用Facebook Login Button进行单点登录(下面的代码)。但我无法弄清楚如何用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/
你知道如何控制按钮样式吗?
答案 0 :(得分:2)
正如您在fb文档中看到的那样,div.fb-login-button
被外部加载的脚本替换为iframe
。要自己设置此按钮的样式,您可以创建一个按照您的意愿设置样式的按钮并自行触发登录机制。
有关详细信息,请阅读here。
答案 1 :(得分:1)
虽然很旧,但这里是我正在使用的示例代码。
<!--HTML-->
<button id="customBtn" (click)='checkLoginState();'>
<span class="icon"></span>
<span class="buttonText">Facebook</span>
</button>
<div id='fb-status-login'></div>
以下是您可以使用的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;
}
在组件内部(我使用的是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 + '!';
});
}
答案 2 :(得分:0)
我已经发现你可以使用(未记录的)colorscheme属性(&#39; light&#39;或&#39; dark&#39;)和登录按钮,用于其他Facebook社交插件 - 比如按钮等。
这提供了文字颜色的替代方案,并且符合我的要求,因为我有黑色背景和默认的&#39;灯光。 scheme使用黑色文本,这意味着使用默认设置,FB iframe中没有文本可见。
E.g。
如果您需要更好地控制外观,最好创建自己的按钮,并使用Javascript SDK构建自定义内容: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.3