WebMatrix

WebMatrix Helpers

Facebook Helper - Start Here

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 Facebook helper is designed to integrate your WebMatrix site with Facebook, making it possible to add the Facebook Social Plugins, such as Like button, Facepile, Comments, Login Button and Like Box, among others, in a few simple steps. It also allows you easily integrate your site with the Facebook login mechanism, so users do not have to create another account just to access your website.

Depending on the social plugin you want to use, the helper requires that you call an initialization method. Check the table below and if the social plugin you want to use does not require initialization see the Getting Started in 60 seconds (without initialization) section, otherwise see the Getting Started in 60 seconds (with initialization) section.

Social Plugin Initialization Required
Like Button No
Activity Feed No
Recommendations No
Like Box No
Login Button Yes
Facepile Yes
Comments Yes
Live Stream Yes

Getting Started in 60 Seconds (without initialization)

These steps will guide you on how to display a Facebook Like button into your Web site:

  1. Add the highlighted line from below in the page where you want to show the Like button, in this case for liking the Microsoft Web home page:
    <!DOCTYPE html>
    <html>
    ...
    <body>
    ...
    @Facebook.LikeButton("http://www.microsoft.com/web")
    ...
    </body>
    </html>

Getting Started in 60 Seconds (with initialization)

These steps will guide you on how to display a Facebook Comments box into your Web site:

  1. Make note of the Site URL where your Microsoft WebMatrix site is running (click the Site workspace | Settings page).
     Configuring Facebook Application to run in localhost
  2. Register a new Facebook application and make note of the Application Id and Secret. (Check http://www.facebook.com/developers for instructions on how to create a Facebook application).
    Create a Facebook Application
  3. When creating your Facebook application, make sure you set the Site Url to http://localhost:[port], replacing the [port] placeholder with the port where your local WebMatrix site is running.
    Facebook Application Core Settings
  4. Add the following line to the _AppStart.cshtml page of your WebMatrix Site (create this page if it does not exist). Replace the placeholders with your Application Id and Secret.
    @{
    Facebook.Initialize("{your App ID}", "{your App Secret}");
    }
  5. Add the highlighted lines from below in the page where you want to show the Comments box:
    <!DOCTYPE html>
    <html @Facebook.FbmlNamespaces()>
    ...
    <body>
    @Facebook.GetInitializationScripts()
    ...
    @Facebook.Comments()
    ...
    </body>
    </html>
Note: Some of the Facebook Social Plugins require that your site is published into a public address where others can use it; see the helper reference for a complete list. To do this you can try some of the *Free* WebMatrix Hostings providers, like Cytanium (also check this tutorial on publishing with WebMatrix).

Running the Facebook Helper Sample

Optionally, you can download a sample WebMatrix web site where you can see the helper in action, and also see how to use the helper to integrate the Facebook login mechanism with the membership model of your web site. To download and run it with Microsoft WebMatrix, follow these steps:

  1. Browse to the Facebook Helper CodePlex site and download the Facebook Helper Sample
  2. Extract the content of the package, right-click the Facebook.Bakery folder and select 'Open as a Web Site with Microsoft WebMatrix'. This will open the Bakery sample web site with WebMatrix.
  3. Change your WebMatrix site settings to match the Site Url you have configured in your Facebook application settings.
    Configuring WebMatrix to run in localhost
  4. Open the _AppStart.cshtml page, uncomment the following line and replace the placeholders with your Facebook Application Id and Secret.
    @{
    Facebook.Initialize("{your App ID}", "{your App Secret}", "bakery");
    ...
    }
  5. Click on the Run button located in the Home tab.
  6. Play with the sample!

More Info

The helper ships with the following files: The Facebook.cshtml file located into the App_Code folder inside you WebMatrix site, and a Login.cshtml file under the Facebook folder that will handle user login when using his Facebook account.

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

To explore the helper implementation you can open the Facebook.cshtml file located under the App_Code folder. Additionally, you can get more information on the helper from the Facebook Helper CodePlex site.