将Facebook fb：login-button转换为SDK javascript登录

Question

I need a custom facebook login button. The fb:login-button solution with medium, large etc. is not what I need. I know the FB TOS. My button will be very similiar.

How is it possible to tranform my button into a javascript onlick solution with a custom button? The "onlogin="top.location.href='example.com/facebook_connect.php" link is very important.

Here my code:

<div id="fb-root"></div>
<script type="text/javascript" language="JavaScript" src="http://connect.facebook.net/de_DE/all.js#appId=myappid6&xfbml=1"></script>
<script type="text/javascript" language="JavaScript">  FB.init({
appId  : myappid,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBML
});
</script>


<fb:login-button scope="email, public_profile" size="xlarge" onlogin="top.location.href='example.com/facebook_connect.php'">Connect with Facebook</fb:login-button>

Thank you very much.

Answer 1

HTML:

<button id="loginBtn">Facebook Login</button>

JavaScript:

document.getElementById('loginBtn').addEventListener('click', function() {
    //do the login
    FB.login(function(response) {
        if (response.authResponse) {
            //user just authorized your app
            top.location.href = 'example.com/facebook_connect.php';
        }
    }, {scope: 'email,public_profile', return_scopes: true});
}, false);

Source: http://www.devils-heaven.com/facebook-javascript-sdk-login/

Don´t use a-tags for this, it´s not a link. You don´t need jQuery either, it´s just a simple click handler. I suggest using the asynchronous way to load the JS SDK though.

Answer 2

I have used my custom button that hides default facebook login button. See if it helps.

<div class="img_container">
     <a class="btnFacebookLogin" href="#" role="button">
       <span class="img_icon icon_facebook" title="Facebook"></span>
       <div class="fb-login-button" onlogin="javascript:CallAfterLogin();" width="200" size="medium" autologoutlink="true" scope="user_education_history,user_birthday,friends_birthday,user_hometown,user_likes,email,user_checkins,user_groups,friends_groups,user_photos,user_events,user_location,user_relationships,user_relationship_details,user_religion_politics,user_website,user_work_history,user_interests,user_about_me"
           style="display: none;">
       </div>
     </a>
 </div>

JS

$(document).ready(function () {
    $('.btnFacebookLogin').on('click', function () {
        FB.login(function (response) { CallbackAfterLogin(response); }, { scope: 'email' });
    });
});

CSS

.img_container
{
    display: inline-block;
    margin-right: 5px;
}

.img_icon
{
   display: block;
   width: 42px;
   height: 42px;
}


.icon_facebook
{
    background-image: url("../Images/Icons/social.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 172px 84px;
    height: 42px;
    width: 42px;
}

You can adjust the CSS according to your custom image. I allowed 'login with' option for multiple sites like Twitter, g+; etc. So I used a single image that has all the necessary icons.