Creating Facebook Template in Visual Studio 2013 Preview

Introduction

I am introducing ASP.NET Web Project development using the Facebook Template. As I described in my earlier article that there are various types of project templates defined in Visual Studio 2013 Preview. These project templates introduce you to the cutting-edge web standards and leverage the power to use ASP.NET technologies as well as give you a start on your own application.

Visual Studio 2013 Preview provides the following types of web project templates that target the .NET Framework 4.5 or later versions:

• Empty template
• Web Forms template
• MVC template
• Web API template
• SPA template
• Facebook template
• Mobile template   

To go through this article, make sure that you have the following software which must be installed:

• Visual Studio 2013 Preview
• ASP.NET and Web Tools

In this article, I am describing the way to create your web application using the Facebook Project Template. The functionality used in this Facebook template will help you with authentication, permissions and accessing Facebook data. This article helps you to build your web application using the Facebook template in Visual Studio 2013 Preview. When you use the Facebook template, it includes a new library to take care of all major things that are involved for building your Facebook app.

When you want to host your application, the host needs to follow the following important steps.

Project Creation

1. Open your Visual Studio 2013 Preview.
    
2. In the New Project, choose "Web" and then select "ASP.NET Web Application".
    
3. Select your .NET Framework.
    
4. Enter your application name, choose location (optional) and click "OK".
   
   
    
5. Select "Facebook Template". There is no authentication required for creating this template.
   
   
   

SSL Settings

1. Select your application in the Solution Explorer.
   
   
    
2. Open the Properties Window.
    
3. By default your SSL Enable is false, change it to true.
   
   
    
4. Copy your SSL URL.
    
5. Right-click on your app in Solution Explorer and click Properties.
    
6. Select the "Web" Tab.
   
   
    
7. In the Project URL option, paste your SSL URL and click "Create Virtual Directory".
   
    

Creating Facebook app and connecting to project

The Facebook Template helps you to provide boilerplate code with which you connect your application to Facebook and fetch properties, like photos and email. All you need to do is some settings in your Facebook.

1. Open your browser and go tohttp://developers.facebook.com/apps and enter your login credentials in Facebook. 
   
   
    
2. Register yourself as a developer and follow the directives.
    
3. Click "Create New App".
    
4. Enter your unique APP Name and APP Namespace credentials. Select your unique APP Namespace that will be used to access your Facebook app. You can also leave App Namespace because it is optional.
   
   
    
5. Note your App ID and your App Secret. Ensure that your Sandbox Mode is Enabled.
   
   
    
6. Open the Web.config file in Visual Studio 2013 Preview.
    
7. Paste the App Id, App Secret and App Namespace values into the corresponding elements.
   
   
    
8. Right-click on your project and go to properties. From the "Web" tab copy your Project URL.
   
   
    
9. Paste your Project URL in the Canvas URL and Secure Canvas URL. Change the Canvas Width to "Fluid" for changing your app width depending on the user's web browser size. 
   
   
    
10. Click on "Save Changes".
     
11. Run your application from Visual Studio 2013 Preview.
     
12. If your browser displays some type of error then ignore it and login to Facebook and Facebook want to authenticate the app before running.
    
    
     
13. Allow your app and it will run your app. You now have a simple Facebook application.
    
    
    

Summary

This article described how to develop a web application using the Facebook Template. This article helps you to run your web app and create your app in Facebook. Some settings in Facebook and as well as your app in Visual Studio 2013 Preview. So just create an app in Facebook and create some special application.