How to Integrate Facebook Login To Your Web App using jQuery

Adding a Login with Facebook option to your web app is a pain! The process requires multiple requests to the Facebook API, and usually results in a messy callback soup that you get stuck managing.

A typical Facebook login flow usually requires the following sequence:
  • window.fbAsyncInit
  • FB.init
  • FB.login
  • FB.api(/me)

You may also like:

Include script after the jQuery library:
<script src="/path/to/jquery.fblogin.js"></script>
You will need a valid Facebook App Id and the Facebook JS SDK loaded to use the plugin. After that simply call $.fblogin(options) where options is an object with the desired settings.
// This will login a user with Facebook and return user's public data
    fbId: '{FB app id}',
    success: function (data) {
        console.log('Basic public user data returned by Facebook', data);
    error: function (error) {
        console.log('An error occurred.', error);

Login requesting Facebook permissions:

// the permissions option is a comma separated list of extended FB permissions
    fbId: '{FB app id}',
    permissions: 'email,user_birthday',
    success: function (data) {
        console.log('User birthday' + data.birthday + 'and email ' +;
Visit the official website for documentation, sample and find out what other options are available.
Official Website
Feel free to contact me for any help related to jQuery, I will gladly help you.

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..