css造型facebook登錄按鈕，最佳做法

我在我的webapp（代碼如下）中使用Facebook登錄Login Button進行單點登錄。但我無法弄清楚如何用css控制按鈕的樣式。我看到的Facebook插件插入在我的網頁的iframe ...css造型facebook登錄按鈕，最佳做法

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

你知道如何控制按鈕款式好嗎？

來源

2014-03-07 Louis

的代碼創建工作小提琴，所以我們可以檢查你的問題並提供解決方案。謝謝。 –

對不起，我添加了jsfiddle – Louis

正如您在fb實例中看到的那樣，div.fb-login-button由您在外部加載的腳本替換爲iframe。要自己設計這個按鈕，您可以創建一個根據您的願望設置風格的按鈕，並自己觸發登錄機制。

欲瞭解更多信息，請閱讀here。

來源

2014-03-07 14:14:15 DonJuwe

謝謝，我把你的鏈接中的快速啓動代碼，但他們使用的按鈕' Facebook'仍然是FB的「登錄按鈕」。你能提供一個替代網絡代碼，用於可與api一起使用的自定義按鈕嗎？ ...即。 '

\t \t \t \t \t \t \t \t \t \t \t \t Sign in with Facebook \t \t \t \t \t

'不會觸發登錄 – Louis

我已經想通了，你可以登錄按鈕，這是與其他Facebook社交插件的使用使用（無證）色彩方案屬性（「輕」或「黑暗」） - Like按鈕等

這爲文本的顏色提供了一種替代方案，並且適合我的要求，因爲我有一個黑色背景，默認的「淺色」方案使用黑色文本，這意味着FB iframe中的文本在默認設置下可見。

E.g.

如果您需要更多的控制權的外觀，你會是好創建自己的按鈕，並使用JavaScript SDK創建自定義的東西： https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.3

來源

2015-06-06 12:15:22 NeilB

css造型facebook登錄按鈕，最佳做法

回答

相關問題