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.

Responsive Menu
Add more content here...