CSS样式化Facebook登录按钮的最佳实践

Question

CSS样式化Facebook登录按钮的最佳实践

5

我正在使用Facebook的登录按钮来实现我的webapp中的单点登录（以下是代码）。但是我无法通过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/

请问您知道如何控制按钮样式吗？

- Louis

1

创建一个可工作的fiddle以便我们可以检查您的问题并提供解决方案。谢谢。 - Hendra Nucleo

抱歉，我添加了jsfiddle。 - Louis

3个回答

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 + '!';
    });
  }

- Manish Bansal

你是不是想用 click 而不是 (click) 作为 HTML 属性名？ - NightOwl888

正如我所提到的，我正在使用Angular，因此(click)是有效的语法。但是对于普通的HTML，您可以使用onclick。 - Manish Bansal

0

我已经找到了一个方法，可以使用（未公开的）颜色方案属性（“light”或“dark”）与登录按钮一起使用，这适用于其他Facebook社交插件 - 喜欢按钮等。

这为文本颜色提供了一种替代方案，非常适合我的要求，因为我有一个黑色背景，而默认的“light”方案使用黑色文本，这意味着在默认设置下FB iframe中没有文本可见。

例如：

如果您需要更多的控制权来控制外观，那么最好创建自己的按钮并使用Javascript SDK构建自定义内容： https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.3

- NeilB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DonJuwe · Accepted Answer

如您在fb文档中所见，通过您外部加载的脚本，div.fb-login-button 被 iframe 替换。若要自定义此按钮样式，您可以创建一个按照您要求进行样式设置的按钮，并手动触发登录机制。

更多信息请阅读此处。