Facebook Template in Visual Studio 2013

Introduction

Today, I will create a Facebook application in the Visual Studio 2013 (updated by Visual Studio 2013 Update 3). The Facebook app is called a Canvas App that is built by the new Facebook Template.

Visual Studio 2013, as updated by Update 3, does not have the Facebook Project Template for creating the ASP.NET Web Application. It has been removed in this updated version of Visual Studio 2013. There is also a brand new type that exists to create a Facebook app that is described here and we'll see it later in this article.

Prerequisite

There are some prerequisites given below:

• Visual Studio 2013 (Update 3)
• VSIX Extension for Facebook Template

So, let's begin to create the Facebook application with the following sections:

• Creating Web Application using Facebook Template
• Configure SSL Certificate
• Creating Facebook App
• Configure Facebook App
• Working with Web Application

Creating Web Application using Facebook Template

In this section we will create the web application using the Facebook Template. Use the following procedure.

Step 1

Open Visual Studio 2013 and click on "New Project".

Step 2

Select the ASP.NET Facebook Application.

Note: If VSIX is not installed, this template will not show.

Visual Studio automatically creates the Facebook application and adds files and folders in the solution. You can see the Solution Explorer below:

Configure SSL Certificate

In this section we will enable the SSL Certificate for the project. Use the following procedure.

Step 1

Go to Solution Explorer and select the project and open the Properties tab.

Step 2

Set the value to True of SSL and copy the SSL URL.

Step 3

Select the project in Solution Explorer and right-click to select the Properties.

Step 4

Select the Web Tab from the left pane and paste the SSL URL into the Project URL.

Step 5

Now click on the Create Virtual Directory.

Creating Facebook App

In this section we will create the Facebook App using the https://developers.facebook.com. Use the following procedure to create the app.

Step 1

You need to login into Facebook to create the app. Click on Add New App.

Step 2

Now enter the name for the app and click on Create New Facebook App ID.

Step 3

Now choose a category to create the app and click on Create App ID.

Step 4

Now in the next Add Platform wizard click on the Website.

Step 5

Copy the SSL URL and paste in Site URL in the App Configuration.

Step 6

In the next wizard click on Skip to Developer Dashboard.

Configure Facebook App

In this section we'll configure the Facebook app for the Facebook application that was created in Visual Studio 2013. So, let's begin with the following procedure.

Step 1

Click on the Settings option in the left pane of the App Dashboard.

Step 2

Enter the namespace for the app and click on the Add Platform.

Step 3

In the Add Platform wizard, click on the Facebook Canvas and paste the SSL URL in the Canvas URL and Secure Canvas URL option.

Step 4

Click on the Save Changes button and your Facebook app is ready to launch.

Working with Web Application

In the section, we'll configure the web application for the Facebook app. Use the following procedure.

Step 1

Open the Web.Config file of the project. Copy the Facebook App ID, App Secret and App Namespace from the Facebook app dashboard.

Step 2

Copy all in the configuration file in the respected option as shown below:

Step 3

Press Ctrl +F5 to run the application, this will show the wizard for the SSL Certificate.

Step 4

Now in the next wizard, the certificate is installed, click on Yes.

Step 5

Firefox will show the IIS Certificate warning, because Firefox does not trust the IIS SSL Certificate, it uses its own certificate. Do as shown below:

Note: For more info about browsers that trust SSL, I have created an article for SSL Certificate Warning.

Step 6

Enter the Facebook credentials to login and it will prompt to confirm the app for accessing the public profile, click on Okay.

Step 7

This app will access the email and your photos, click on the Okay.

Step 8

Now you can show the app in the Facebook and your Facebook application is created.

Summary

So far we have seen the Facebook template to create the Facebook application and a brand new look to create the Facebook app in the developer mode of Facebook. Thanks for reading and Stay Updated!!