Full source code for this tutorial can be found as an attachment at the bottom of this page. Download WebMatrix

When launching WebMatrix, choose the “Site From Template” option and then the “Bakery” template. This creates the foundations for a fully functional e-commerce website that we can then adapt to our needs. We will add three social features to this website: LinkShare, Twitter and Facebook. This is how our website looks like in the beginning:

Most of the time, adding a social network to a website means going through a lot of developer documents, understanding what parts of it we want to integrate and finally adding the required JavaScript code. There’s nothing wrong with this, but wouldn’t it be great if we could do it a lot faster? Enter Web Helpers.

Helper #1 – LinkShare

WebMatrix supports the ASP.NET MVC 3 framework. This framework can use multiple view engines, but for now we’ll focus on the newly released Razor view engine. It’s a very powerful view engine for MVC 3 and all of the code examples we’ll see in this article are targeted for it.  PHP, .NET, or any other web developer shouldn’t have trouble understanding these simple use cases for the syntax.  Razor can be used by creating a new type of file – an ASP.NET Web Page – that has a .cshtml extension (or .vbhtml if you’re using VB.NET). One of the things that make Razor so powerful is the simplicity with which you can mix server code and HTML. 

The first feature we want in our website is the ability for users to share our lovely products on social networks like del.icio.us, Twitter, Google Buzz or Facebook. For this we’ll use the LinkShare web helper, and all it takes is one very small line of code in our _SiteLayout.cshtml file:

@LinkShare.GetHtml(Page.Title)

Now we have link sharing features with virtually no effort at all.

Since we added it to the special file _SiteLayout.cshtml, this feature is available across our entire website.  Therefore, the user can share any page, whether it’s the homepage or a specific product. The parameter specifies the title we want to use when sharing the page, so it makes sense to use whatever is set for the shared page. Most of the available helpers support customization and the LinkShare helper is no exception. Let’s imagine, for some reason, that we only want to use the Digg and Stumble Upon sharing links. One of the parameters for GetHtml is an array that we can use to specify this:

@LinkShare.GetHtml(Page.Title, linkSites: new LinkShareSite[] { LinkShareSite.Digg, LinkShareSite.StumbleUpon} )

For additional configuration of the LinkShare helper, you can find the full documentation on MSDN at http://msdn.microsoft.com/en-us/library/microsoft.web.helpers.linkshare.gethtml(v=vs.99).aspx.

Helper #2 – Twitter

I don’t know of any social network that has more 3^rd party clients than Twitter. Its powerful and flexible REST API makes it relatively simple to build a client application that shows your friends’ tweets and lets you send your own 140 characters into cyberspace. In most websites, however, Twitter is integrated to display a list of tweets from a specific user or with a specific hash tag. Although twitter provides their own widgets to make developers’ lives simpler, I’ve yet to see anything that comes even close to this:

@Twitter.Profile("dzone")

This simple line of code is all it takes in WebMatrix to display the latest tweets from DZone, and it renders like this:

@Twitter.Search("#webmatrix") 

Instead of DZone’s tweets, we now have the latest tweets on WebMatrix.

The Twitter helper is extremely configurable, so we can adapt it to whatever our needs may be. The full signature of these methods is documented at MSDN: http://msdn.microsoft.com/en-us/library/gg537782(v=VS.99).aspx. There are the obvious options for colors and size, but also for parameters like number of tweets, search interval, avatars, timestamps, looping and more. For our bakery shop, we’ll customize the size, colors, tweet count and scrollbars.

@Twitter.Profile(twitterUserName: "dzone",

                                width: 400,

                                height: 500,

                                backgroundShellColor: "#e6e3d8",

                                tweetsBackgroundColor: "#fdfcf7",

                                shellColor: "#696969",

                                tweetsColor: "#696969",

                                tweetsLinksColor: "#a52f09",

                                numberOfTweets: 10,

                                scrollBar: true)

Looking good, don’t you think?

So, with practically no code at all, we now have link sharing and twitter integrated in our website. What’s missing? Oh yes, Facebook.

Helper #3 – Facebook

Building a social hub and not integrating Facebook would be like buying a super expensive valve-powered hi-fi system and not having some vinyl records to play on it. (Ok, I know this is very debatable, but have you heard My Bloody Valentine’s Loveless on vinyl?). Obviously, we don’t want to leave our bakery out of this business opportunity so we better start adding Facebook features in our website.

One of Facebook’s most used features in a website is the ‘Like’ button, so that’s the first thing we’re adding. How? With the Facebook Web Helper:

@Facebook.LikeButton()

 Could it be simpler? Don’t think so. Just by adding this ridiculously simple code to our _SiteLayout.cshtml we now have a good looking Facebook button across our entire site. As always, we can customize the Like button by passing parameters to the above method.

If we try running your website now, we get an error stating “CS0103: The name 'Facebook' does not exist in the current context”. The reason for this is that the previous helpers are part of the Microsoft.Web.Helpers package and bundled with the Bakery template. Facebook is not part of this package, so we need to add it to our website. Follow these steps:

1.     Navigate to the Admin area of your website at http://localhost:28992/_Admin/. (Replace the port number (28992) with whatever port was assigned to your website).

2.     Choose a password and follow the steps to allow access to the Admin area.

3.     In the Package Manager page, choose “Show: Online” in the dropdown box and search for Facebook. You should see Facebook.Helper (1.0 at this time) and an install button in front of it. Click this button and the Facebook Helper will be installed in our website.

4.     Run the website again and you should now see the Facebook ‘Like’ button. 

The Facebook Web Helper is an open source project, and all documentation and source files are available at http://facebookhelper.codeplex.com/. If things weren’t simple enough, the Facebook.Helper package installs reference and documentation files inside a Facebook folder in our website.

Finally, we want our customers to see what’s happening in our Facebook page when they visit our bakery website. Facebook has many other widgets available (Comments, Login, Recommendations, etc...) and the web helper features all of these. An Activity Feed is the widget we are going to use in this instance.  It shows user activity on our Faceboo. We can add it to our website simply by typin

@Facebook.LikeBox(

            href: "http://www.facebook.com/pages/DZone/259639764711",

            showStream: true,

            height: 600)

Our website now looks like this:

Cool, don’t you think?

Recap and next steps

WebMatrix was released to make web developers’ lives easier. Web Helpers are not exclusive to WebMatrix (they can be used in Visual Studio and downloaded through NuGet), but they’re deeply integrated into the WebMatrix core. They’re an essential piece for making this tool so incredibly simple to use. You no longer have to go to every website you want to integrate with and read a whole bunch of documents, as everything is centralized in the Admin area and abstracted by the helpers. This is what tools should be about: making our lives easier.

If you want to explore other available packages, feel free to check what’s available in the Admin area of your website (eg: http://localhost:28992/_Admin/). You’ll see a lot of extensions for a vast array of features like jQuery integration, IE9, OData, Bing, Azure and others.

A suggested exercise is to incorporate the PayPal helper in our bakery. Feel free to download the source code for this article (attached) and add the package for PayPal. You’ll need to add some pages, but the PayPal package installs all the documentation you need to use it. It’s simple and very useful, as we do want to get paid for purchases in the bakery, don’t we?