Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website

  1. Go to https://developers.facebook.com/apps then click on create a new app.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 1
  2. A pop up box will appear, fill in the information and click continue.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 2
    Make sure you enable the Sandbox Mode
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 3
  3. Now open your visual studio 2012, create a new project then select Visual C#>Web>ASP.Net MVC 4 Web Application. Give a name for your application and click OK.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 4
  4. Choose Facebook Application project template, if you don’t see the template you must download ASP.net and Web Tools 2012.12 release.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 5
  5. In the Solution Explorer click on Web.config, then you will be able to see AppID, AppSecret and App Namespace, fill them up.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 6
    Go back to facebook and get your AppID, AppSecret and App Namespace.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 7
  6. Now in the Solution Explorer, right click on FBApplication, click Properties, then go to the Web tab. Copy the Project Url.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 8
  7. Go back to Facebook, check the “App on Facebook” mark, then paste the copied link in the Canvas URL. Scroll down then click on the Save Changes.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 9
  8. Now in Visual Studio, Build and run the app. You will find the Facebook Authentication dialog popping up. Click Go To App, then you will see another dialog popping up click on allow.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 10
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 11
    Tadaa! Your app is now running inside Facebook, retrieving your Friends and Photos.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 12

Moving from local to Azure. So that your friend are allow to use the application too.

Now what we’ve done is just locally, no one will be able to use your app yet. So let’s host our application on Azure Website.

If you haven’t created an account on Azure yet, go ahead and create now. It is free.

  1. Now login and click on Management Portal then click on New.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 13
  2. Create a new website and fill in a appropriate URL name. Then click on Create Web Site.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 14
    after is done, click on ‘myfbappmvc’.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 15
  3. Now download publishing profile and save it on your computer.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 16
  4. Go back to Visual Studio, right click on the FBApplication, click Publish, click Import, then browse to the file you saved earlier.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 17
    after importing the settings, click on publish.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 18
  5. Finally, now you notice that your application is publish to http://myfbappmvc.azurewebsites.net/.Go back to facebook change the Canvas URL and make sure Sandbox Mode is Disabled.
    Creating a Facebook app using ASP.NET MVC and host them on Window Azure Website 19
Advertisements

3 comments

  1. Someones of any age bequeathing to originate ought the most proved and effective substances to facilitate you get
    abs. If not, so you in all likelihood don’t live plenty about is something you require to debar at all costs because it will discontinue you from making new muscular tissue.

    Like


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s