Introduction

Microsoft WebMatrix provides an easy way to get started with web development, and together with new Razor syntax for ASP.NET Web Pages it includes everything you need to get your web site up, running and integrated with many other sites and networks, in a short period of time. The WebMatrix helpers are designed to make your life easier when creating web sites. They provide you a simple and consistent way of performing common web development tasks that otherwise would require a great deal of custom coding. With a few lines of code you should be able to secure your web site using membership, store information in Windows Azure Storage, integrate your site with Facebook, among others things.

The Foursquare Helper for WebMatrix makes it simple to integrate Foursquare in your site. With a few lines of code you'll be able to show an "Add to My Foursquare" button or show any user's badges in your site.

Getting Started in 60 Seconds

The helper mainly consists of a Foursquare.cshtml file, that should be placed in the App_Code folder of your WebMatrix site, together with a Foursquare folder with pages for handling authentication. To use the helper follow these steps:

Note: If you only need to use the Foursquare.GetFoursquareButton() method. You can avoid the following steps and call the method directly in your WebMatrix page.

  1. Make note of the Site URL where your Microsoft WebMatrix site is running (click the Site workspace | Settings page).
    wm-mysite-settings[11]
  2. If you haven't got an Foursquare account, sign up. Login to Foursquare and browse to the OAuth Consumer Registration page.
  3. In this page, set the Application Web Site value to http://localhost:[port], replacing the [port] placeholder with the port where your local WebMatrix site is running. oauth-registration[11]
  4. Then set the Callback Url to http://localhost:[port]/Foursquare/RequestToken, replacing the [port] placeholder with the port where your local WebMatrix site is running and click Register. Make note of the consumer key and secret values obtained. registered-consumers[11]
  5. Add the following line to the _AppStart.cshtml page of your WebMatrix site (if the file does not already exist, create it in the root of the website), replacing the placeholders your Foursquare consumer key and secret.
    @{
        Foursquare.Initialize(consumerKey: "{consumer-key}", 
                                consumerSecret: "{consumer-secret}");
    }
  6. In a Default.cshtml page of your site, add the following code to display a user's Foursquare badges (replace the id by your user id if you want). Notice that you need to login with Foursquare for accessing this information.
    <body>
        ...        
        @if (Session["accessToken"] != null) {	
    	  @Foursquare.GetBadgesWidget(Session["accessToken"].ToString(), userId: 13442)
        } else {
          <div>
                You're not logged in with Foursquare, login by clicking 
                        the following @Foursquare.GetLoginLink("link")
          </div>
        }
        ...
    </body>   

Documentation and Samples

Helper reference is available here. Optionally, you can download a sample WebMatrix web site where you can see the helper in action, including a detailed description of how the authentication flow of the helper works. To download and run it with Microsoft WebMatrix, follow these steps:

  1. Download the sample site from the Downloads section. Extract the contents and open the folder in WebMatrix.
  2. Make sure that your web site is running in the same URL that you've configured when registering your application in the OAuth Consumer Registration page (e.g. http://localhost:[port]).
  3. Configure your Foursquare consumer key and secret in the _AppStart.cshtml page of the sample site.
  4. Run the sample! It contains code samples and examples of each feature provided by the helper.

More Info

You can find more information about the Foursquare API in http://developer.foursquare.com/.

Learn more on WebMatrix, ASP.NET Web Pages and the Razor Syntax with the WebMatrix tutorials.

Last edited Jan 7, 2011 at 7:42 PM by jsenior, version 23