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".

Creating New Project in VS 2013

Step 2

Select the ASP.NET Facebook Application.

Creating 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:

Solution Explorer

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.

Enabling SSL of Project

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.

SettingUp Project Url

Step 5

Now click on the Create Virtual Directory.

Virtual Directory Created

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.

Adding New Facebook App

Step 2

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

Creating Facebook App ID

Step 3

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

Creating App ID

Step 4

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

Selecting Platform to Create Fb App

Step 5

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

App Configuration

Step 6

In the next wizard click on Skip to Developer Dashboard.

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.

App Settings

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.

Adding Facebook Canvas Platform

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:

Web Config Settings

Step 3

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

SSL Certificate Configuration

Step 4

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

SSL Security Warning

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:

Accepting SSL Warning in Firefox

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.

Fb App Confirmation

Step 7

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

Login Review

Step 8

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

Facbook App in MVC

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!!