像Pinterest风格的Facebook登录 [英] Facebook login like Pinterest style
问题描述
我想将Pinterest风格的Facebook登录信息集成到我的网站.有办法吗?
I want to integrate Pinterest style Facebook login to my website. Is there a way to do this?
推荐答案
我有一个解决方案，但这当然不是最佳方案.我发现Pinterest使用此端点来生成它的漂亮按钮:facebook.com/v2.7/plugins/login_button.php；但是，生成的输出似乎仅绑定到Pinterest Facebook应用程序ID(我尝试输入我的ID，但根据Facebook文档
I have a solution, but it's certainly not optimal. I found that Pinterest uses this endpoint to generate it's nice button: facebook.com/v2.7/plugins/login_button.php ; however, the generated output seems to be tied into the Pinterest Facebook application ID only (I tried inputting my ID but only received a standard login button as per Facebook documentation here).
因此，我提出的骇客解决方案来自将此问题中的ScottyG答案与从Pinterest网站上获取的iframe可获取以下信息:
So my hacky solution presented comes from combining ScottyG's answer from this question with the iframe taken from the Pinterest site to get the following:
<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>
如果要像我打算做的那样构建服务器端Oauth舞蹈，则可以在此处将锚的href替换为所需的任何URL(或者，您可以注册Facebook javascript api的 FB.login()调用onclick此处.
Where here you can replace the anchor's href to whichever url you need if you are building a server-side Oauth dance like I am planning to do (alternatively you could register the Facebook javascript api's FB.login() call to the onclick here).
这里是一个示例: https://jsfiddle.net/rw9f7jxj/
注意:我并未测试所有浏览器，但它在Safari和Chrome中都适用.
Note: I didn't test all browsers but it worked for me in both Safari and Chrome.
这篇关于像Pinterest风格的Facebook登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
