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浏览器为我工作。