Creating Facebook Template in Visual Studio 2013 Preview

Nimit Joshi

13y47.3k10100Article

App DevelopmentProject CreationSSL Settings in FB

10 Comments

Join the conversation! Your thoughts help the community grow.

Saravanakumar Sekaran12y ago
Thanks for the great tutorial
- Nimit Joshi12y ago
  My Pleasure..
Ismail Hakki Sen12y ago
good example.
- Nimit Joshi12y ago
  Thanks..
Ricardo Paiva12y ago
http://www.thenighthunter.com.br/facebook My app has to face is giving this error and not even appearing
- Nimit Joshi12y ago
  It seems like your facebook app is not created properly. Please recreate it and follow the steps defined above or you can refer http://www.c-sharpcorner.com/UploadFile/4b0136/working-with-facebook-and-google-oauth2-and-openid-in-visual/
Ajith Joseph13y ago
Thanks for the great tutorial. I am new in MVC. Could you please tell me how to add an option to upload image(Imageuploader) and store these data to database from this facebook app, Thanks in advance.
- Nimit Joshi13y ago
  you can refer this: http://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/fileupload-in-Asp-Net-mvc/
Ravi Kumar13y ago
It really good nimit..
- Nimit Joshi13y ago
  Thanks Ravi..

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

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

SSL Settings

Select your application in the Solution Explorer.
Open the Properties Window.
By default your SSL Enable is false, change it to true.
Copy your SSL URL.
Right-click on your app in Solution Explorer and click Properties.
Select the "Web" Tab.
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.

Open your browser and go tohttp://developers.facebook.com/apps and enter your login credentials in Facebook.
Register yourself as a developer and follow the directives.
Click "Create New App".
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.
Note your App ID and your App Secret. Ensure that your Sandbox Mode is Enabled.
Open the Web.config file in Visual Studio 2013 Preview.
Paste the App Id, App Secret and App Namespace values into the corresponding elements.
Right-click on your project and go to properties. From the "Web" tab copy your Project URL.
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.
Click on "Save Changes".
Run your application from Visual Studio 2013 Preview.
If your browser displays some type of error then ignore it and login to Facebook and Facebook want to authenticate the app before running.
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.