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:
- 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:
- Make note of the Site URL where your Microsoft WebMatrix site is
running (click the Site workspace | Settings page).
- 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).
- 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.
- 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}");
}
- 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>
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:
- Browse to the Facebook Helper CodePlex site and download the Facebook Helper Sample
- 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.
- Change your WebMatrix site settings to match the Site Url you have
configured in your Facebook application settings.
- 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");
...
}
- Click on the Run button located in the Home tab.
- 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.