Pinterest 스타일의 Facebook 로그인

Question

Pinterest 스타일 Facebook 로그인을 내 웹 사이트에 통합하고 싶습니다. 이것을 할 수있는 방법이 있습니까?

pinterest facebook login style

Answer 1

나는 해결책을 가지고 있지만, 그것은 확실히 최적이 아니다. Pinterest가이 끝점을 사용하여 멋진 버튼을 생성한다는 것을 알게되었습니다. facebook.com/v2.7/plugins/login_button.php; 그러나 생성 된 출력은 Pinterest Facebook 응용 프로그램 ID에만 연결되어있는 것 같습니다 (내 ID를 입력하려했지만 Facebook 문서 here에 따라 표준 로그인 단추 만 받았습니다). 당신이 경우 필요한 중 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> 

을 :

그래서되게 내 해키 솔루션은 다음 얻기 위해 고객 센터 사이트에서 가져온 iframe을 함께 this question에서 ScottyG의 답변을 결합에서 온다 당신은 서버 측 Oauth 댄스를 만들고 있습니다. (대안으로 페이스 북 자바 스크립트 API의 FB.login()을 등록 할 수 있습니다. 여기서 onclick을 호출하십시오). https://jsfiddle.net/rw9f7jxj/

참고 :

다음은 예입니다 나는 모든 브라우저를 테스트하지 않았다하지만 사파리와 크롬 모두 나를 위해 일했다.