如何在fb：login-button上应用自定义css？

Question

我想在facebook javascript sdk按钮上应用自定义我自己的CSS。我使用下面的按钮登录facebook。

<fb:login-button id="fblogin" max-rows="1"  width="100px" size="xlarge" class="facebookbutton" scope="public_profile,email" show-faces="false" onlogin="fbLogin();">
                                    Sign up with Facebook
  </fb:login-button>

I have applied CSS like below but this not apply on facebook button.

#fblogin{
width:100% !important;
color:Green !important; 
}

Answer 1

第1步：将JavaScript SDK包含在您的页面上一次，最好是在打开的body标签之后。

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.2&appId=yourID&autoLogAppEvents=1"></script>

第2步：将此代码放在您希望插件显示在页面上的任何位置。

<div class="fb-login-button" data-size="large" data-button-type="continue_with" data-auto-logout-link="false" data-use-continue-as="false"></div>

Source page