Integrating Facebook Login with MVC development project in visual studio

In this article we are going to focus on the below features:

1. Registering the MVC development project with the facebook application.

2. Integrating login functionality into the MVC development project.

3. Logging in using the Facebook Login feature.

Step 1: In order to use any of the features of facebook into your site. First you need to be registered with facebook. So in order to create a facebook account, if you have not got one. Please visit http://www.facebook.com and sign up your self.

Now once you sign up, you need to visit http://developers.facebook.com

Step 2: click on Apps -> Click on Add New App as shown below:

Step 3: In the Add a NewApp windows -> Select Website as shown below:

Step 4: Then enter the name of your new application as shown below. Here I am showing how to do it for localhost. Below url you can get when you browse your webpage(Ctrl+F5). Here the port number may vary for your site.
http://localhost:5106/

Step 5: Then click on Create new Facebook App ID.
In the Create App window, answer NO for the questions "Is this a test version o another app?" and then choose the category as per your website. I have selected Education for demo as shown below. You can choose any suitable category for your project. Hit the Confirm button.
Step 6: Now in your MVC project, open _Layout.cshtml page and then copy the javascript code from the script section and paste it in head section of the _layout.cshtml page. Please make a note of this app_Id which we will need when displaying facebook login button in our view.

Step 7: In the 'Tell us about your website' section, enter the Site Url(required). Mobile Site URL is optional as shown below.

Step 8: To display the like button in your site. just copy the code as shown below from the facebook site and paste it in the _Layout.cshtml page anywhere you want to display it on your site in the body tag of the html.

<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>

Step 9: Now hit Ctrl + F5 and you should see the Facebook like button in your site.

Step 10: Now let us see how to integrate Facebook Login into the MVC site. Click on Facebook Login button as shown below.

Step 11: From the QuickStart section, copy the code from script section into the head section of the _layout.cshtml page. Once you copy the code, make sure that you update the app_id in this code to the app id assigned to the site when we confirmed/registered our site in the above steps.

Step 12: now copy the below code and place it in the body tag where you want to display the facebook login button to the users.

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>