Facebook login with Pinterest style

Question

私はPinterestスタイルのFacebookログインを自分のウェブサイトに統合したい。これを行う方法はありますか？

pinterest facebook login style

Answer 1

私は解決策を持っているが、それは確かに最適ではないのです。私はPinterestがこのエンドポイントを使っていいボタンを生成することを発見しました：facebook.com/v2.7/plugins/login_button.php;しかし、生成された出力はPinterest FacebookアプリケーションIDにのみ結び付けられているようです（私は自分のIDを入力しようとしましたが、Facebookの文書hereのように標準のログインボタンしか受け取りませんでした）。

だから、提示、私のハックソリューションは、以下を得るためにPinterestのサイトから取られたのiframeでthis questionからScottyGの答えを組み合わせることから来ている：

あなたがあれば必要なあなたはどちらのURLにアンカーのhrefを置き換えることができ、ここで

<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のダンスを構築しています（代わりに、Facebookのjavascript APIのFB.login（）をのonclickコールに登録することもできます）。ここで

は例です：https://jsfiddle.net/rw9f7jxj/

注：私はすべてのブラウザをテストしていないが、それはSafariとChromeの両方に私のために働きました。