Facebook的登錄喜歡的Pinterest風格

Question

我想集成Pinterest風格的Facebook登錄到我的網站。有沒有辦法做到這一點？

pinterest facebook login style

Answer 1

我有一個解決方案，但它肯定不是最佳的。我發現Pinterest使用這個端點來生成它的很好的按鈕：facebook.com/v2.7/plugins/login_button.php;然而，生成的輸出似乎只與Pinterest Facebook應用程序ID綁定（我嘗試輸入我的ID，但只收到標準登錄按鈕，根據Facebook文檔here）。

所以我提出哈克解決方案來自從this question來自Pinterest的網站採取了iframe結合ScottyG的回答得到如下：

<div style="position:relative;"> 
    <iframe name="f34219de7beb196" width="268px" height="50px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/login_button.php?app_id=274266067164&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FiPrOY23SGAp.js%3Fversion%3D42%23cb%3Df5f46a0766a3f%26domain%3Dau.pinterest.com%26origin%3Dhttps%253A%252F%252Fau.pinterest.com%252Ff16edab41b7ba12%26relation%3Dparent.parent&container_width=268&locale=en_US&scope=public_profile%2Cemail%2Cuser_likes%2Cuser_about_me%2Cuser_birthday%2Cuser_friends&sdk=joey" class="" style="border: none; visibility: visible; width: 268px; height: 50px;"></iframe> 
    <a href="#" style="position:absolute; top:0; left:0; display:inline-block; width: 268px; height: 50px; z-index:5;"></a> 
</div> 

哪裏這裏，你可以更換錨的href取其網址，你需要的，如果你正在構建一個服務器端的Oauth舞，就像我打算做的一樣（或者你可以在這裏註冊Facebook的javascript API的FB.login（）調用onclick）。

下面是一個例子：https://jsfiddle.net/rw9f7jxj/

注：我沒有測試所有的瀏覽器，但它在Safari和Chrome瀏覽器爲我工作。