Create NewApp in Facebook and Connect the App to ASP.NET MVC Project - ASP.NET MVC

, ,

Facebook ASP.NET MVC Template provides boilerplate code to connect your application to Facebook and retrieve Facebook properties such as Likes, photos, email and friends profile details. However, in order to get your application connect and interact with Facebook, we need to configure some settings from an application that you created in Facebook copy to your ASP.NET MVC project.

  1. In your browser, navigate to and log in by entering your Facebook credentials.
  2. If you aren’t already registered as a Facebook developer, click Register as a Developer and follow the directions to register.
  3. Click Create New App.(Figure 1)
  4. Enter an App Name and App Namespace, and then click Continue.(Figure 2)
  5. On the Basic Settings page for the app, set the Sandbox Mode to Enabled. This ensures that you have exclusive access to the app until it's ready to be made available to everyone.(Figure 3)
  6. In Visual Studio, open the application Web.config file that is located in the root folder of your project.
  7. Copy and paste the AppId, App Secret, and App Namespace values into the corresponding key elements in the appSettings collection in the Web.config file.(Figure 4)
  8. In Solution Explorer, right-click the project and click Properties, and then click the Web tab.
  9. Copy the Project URL from the Web tab and paste it into the Canvas URL field in the Facebook Basic Settings page.(Figure 5)
  10. Change Canvas Width to Fluid.
  11. Click Save Changes.(Figure 6)
  12. Press CTRL+F5 to run the application.

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6

ASP.NET MVC Facebook Application | ASP.NET MVC

, ,

Visual Studio 2012 recent update released (VS2012.2) contains an enhancement to ASP.NET MVC that introduced new Facebook Application template. This tutorial will teach you to build a Facebook canvas application using Facebook Applications Template in Visual Studio 2012

Facebook Canvas applications using ASP.NET MVC Facebook Application template

Facebook Application template includes necessary library to build Facebook canvas application. Facebook Application template will ease of writing code for authentication, permissions, and accessing Facebook data. The Facebook Application template also has an extensibility model to build your own storage providers.

Prerequisites to create a Facebook Canvas Application in ASP.NET MVC
  • Visual Studio 2012 or Visual Studio Express 2012
  • ASP.NET and Web Tools 2012.2 update for Visual Studio 2012
Steps to Create Facebook Canvas applications using ASP.NET MVC Facebook Application template
  1. Run Visual Studio 2012 or Visual Studio Express for Web 2012.
  2. From the File menu, click New Project.
  3. In the New Project dialog box, expand C# and then click Web under Templates.
  4. Click ASP.NET MVC 4 Web Application.
  5. Leave the .NET Framework version set to .NET 4.5 for developing Facebook template requires.
  6. Enter HelloWorldFacebookApp for the project name, and then click OK.(Figure 1)
  7. In the New ASP.NET MVC 4 Project dialog box, click Facebook Application, and then click OK.(Figure 2)
Figure 1

Figure 2