0

I want to integrate Pinterest style Facebook login to my website. Is there a way to do this?

pinterest facebook login style

Sinan YILDIZ
  • 21
  • 8

2 Answers2

2

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).

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>

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).

Here's an example: https://jsfiddle.net/rw9f7jxj/

Note: I didn't test all browsers but it worked for me in both Safari and Chrome.

Community
  • 1
  • 1
Peter Brown
  • 21
  • 4
0

I couldn't figure out what the links mean in the answer above, so I assume that Facebook removed these pages already. Just in case anybody else ends up here, there's a section for creating a login button with "Continue as {NAME}" option on Facebook: https://developers.facebook.com/docs/facebook-login/web/login-button

Tomasz Mieczkowski
  • 31
  • 7