Create Facebook App using ASP.NET MVC

Introduction

In this article, I show how to create an app on Facebook that will be connected to your ASP.NET MVC Project.

In this article, we will use the MVC 4 template in Visual Studio 2012 to create a Facebook App. The app is created at the end of this article will look something like this.

Now let's start creating the App.

Step 1. First of all, you need to create a New Web Project in MVC 4, for that.

1. Run your Visual Studio 2012.
2. Select "File" -> "New" -> "Project...".
3. Now under the Templates first expand the C# node then the Web node then select "ASP.NET MVC 4 Web Application".
4. Now provide the name for this project and then click on the "OK" button.
   

On the next page, you need to select the "Facebook Application Template", this is a very necessary step since this is the template that will help to create the Facebook App. Remember that the Facebook template will be available under the "Razor Engine" only.

Step 2. Now click on the name of your project and then press the F4 Key, this will open the properties of your project or you can open it from the File menu.

On pressing the F4 key the "Properties Section" will be opened, here you need to do two things.

1. The first thing is to enable SSL Enabled by making it True.
2. The second is to copy the SSL URL provided below the SSL Enabled.
   

Step 3. Now right-click on your project in the Solution Explorer and select the Properties.

In the Properties select "Web".

On the Web, paste the copied SSL URL in the Project URL and then click on "Create Virtual Directory".

This will create the Virtual Directory for this URL, this URL will be used to configure Facebook.

Step 4. Now open your browser and open this link: https://developers.facebook.com/apps

Now on this page use the following procedure.

1. Login with your Facebook ID.
2. If you are not Registered as a Developer then click on "Register as Developer", then provide all the requested information.
3. After you have registered you will find a button named "+ Create New App" on the default page, click on this button.
   

Now you need to provide an App Name and an App Namespace for this app. If you don't provide the namespace for the app then the App Id will be used in the URL Section. This namespace will be part of the URL and will be used to access your Facebook Application; for example, "https://apps.facebook.com/clbbday." After providing the name and namespace click on the "Continue" Button.

Step 5. Now on the Basic Setting page set the Sandbox Mode to Enabled, this will let you access your app and modify it but it will restrict your app from being used by others until you allow everyone to access it.

On this page you can also see that the "App ID" and "App Secret" are also provided, these will be used in the next step of this article.

Now open the Web.Config file of your project, on the Web.Config you will find that space for the App ID, App Secret, and App Namespace is provided.

Just copy these things from the basic page and paste them into the Web.Config file.

Step 6. Now again go to the Properties and click on Web, from here copy the Project URL.

Now go to the Basic Page and paste this URL into the Canvas URL and in the Secure Canvas URL.

You also need to change the Canvas Width to Fluid, this will help your app to change its size depending on the browser's size.

After providing these things click on the "Save Changes" button.

Step 7. Now go back to your project and press "Ctrl+F5" to run the application or debug it.

Now your browser will prevent you from accessing it and will give you a Security Certificate Warning because IIS Certificates are not trusted by the browser, so click on "Proceed Anyway" to use the app.

Now your app will be running and it will look like this.

Note. It might happen that when you try to find the Facebook Application Template under your MVC 4 Project, you will know that it's not available there in that case you need to download the latest ASP.NET and Web Tools, for just click on this Link http://www.asp.net/vnext/overview/latest