New Facebook Helpers in WebMatrix Beta 2

Today we launched WebMatrix Beta 2 with a bunch of new features.  Here are my favorites:

  • Themes – quickly switch between different themes on your website
  • New HTML5 Templates in the box – rounded corners, transitions, sexy HTML5 templates. yum.
  • NuPack Package Management – get the bits you need, when you need em
  • New @Helper Syntax – adding helpers is now even easier

The new @Helper syntax makes it super easy to create your own helpers for WebMatrix.  Why would you want to do that? Well, there’s a couple of reasons.  Firstly, as a timesaver.  If you find yourself writing the same code or HTML time after time in your websites, it might be time to package up your code in a reusable Helper that you can utilize throughout your websites instead of writing the same thing over and over again and wasting time.  Secondly, if you are trying to foster a developer community that can use your service or website, then creating WebMatrix Helpers to make their life easier is a smart thing to do – because it removes friction for people to use your service.

Take the new Facebook Social Plugin Helpers in WebMatrix Beta 2 as an example.  They make use of the new @helper syntax to make it easier for developers to add social widgets to web pages.  The way you get these helpers is also worth mentioning, because it highlights a use of the NuPack technology that we announced today also.  Facebook’s Social Plugins Helper includes shortcuts to the following social widgets:

  • Login Button
  • Like Button
  • Comments
  • Recommendations
  • LikeBox
  • Facepile
  • LiveStream
  • ActivityFeed

As well as the ability to easily add metadata which shows up in rich ways across Facebook.

Getting your Helpers using NuPack

NuPack is an open source project driven by Microsoft that provides package management for developers in WebMatrix or Visual Studio 2010.  Within WebMatrix there is a package management page that you can visit where you can manage which packages are installed in your website projects.  With NuPack, it’s super easy to get Helpers and other things you’ll need to develop your website.

Note -  the current structure of our website if we create a new website from template.  Inside our app_data folder we have a bunch of folders including packages.  This is where the assets for our packages live.  We can see that we already have microsoft-web-helpers.1.0 installed by default and this package provides Helpers like Twitter, ReCapture and more.  There is also a packages.config file which contains information which points WebMatrix to the packages installed in App_Data.

image

To manage the packages installed in our website, we need to get to the admin page by simply navigating to http://localhost:xxx/_admin where xxx is your port number.  (Note – by default this is only enabled when running websites locally, as a security precaution).  If it’s the first time you’ve visited the page, you’ll be asked to create a password, remember this for future visits to the package manager page.

image

Next, you’ll be presented with a list of packages that you can install to use within your website.  Clicking on the Install button next to the Facebook.Helper 1.0 will install the files and pre-requisites for the helper to work correctly.  In the case of the Facebook Helper there are no dependencies however.

image

image

Once installed, the package “explodes” (in a useful, not violent way) in your website, installing various assets.  If we now look at the structure of the website in WebMatrix we see the Facebook Helper package has been installed successfully:

image

The most important asset is the Helper itself – FacebookSocialPlugin.cshtml and you can see that it was installed under the App_code folder in the root of website.  In this particular helper, we’ve also included some docs which explain how to get started as well as a full reference for all the methods in the helper.

To get to the docs just navigate to http://localhost:xxx/facebook/docs/starthere.htm

Note – There is already a Facebook Helper included in the Microsoft-web-helpers library which provides a shortcut to adding the Like Button to your website.  The FacebookSocialPlugin helpers has the like button as well as all the other Facebook Social Plugins and other good stuff like Open Graph etc.  In the next release we’ll merge the two Helper libraries so they are consolidated.

@helper syntax

Let’s explore the Facebook Social Plugin Helper a little more to understand how to use the @helper syntax.  The naming of the FacebookSocialPlugins.cshtml file is a good place to start.  This name will be taken as the class name at runtime, so the developer will use FacebookSocialPlugins.Foo() when using the helpers within the file.  Exploring the file, we see that all the methods use the @helper syntax, which mixes markup and code so that it’s possible to build up quite complex HTML and then inject parameters from the method or from calculated values in the helper code itself. 

Let’s take the helper method “GetInitializationScripts” as an example.  This method emits the JavaScript required by Facebook to allow their Social Plugins to work and must be added to every page that wants to use the plugins.  It’s not a trivial amount of script and before the Helper I would have to goto Facebook’s developer portal, hunt it down and copy and paste into every page.  Now with the Facebook Social Plugins Helper I can simply add the method to my _Layout.cshtml page, and by default it’s included on every page.  That’s a nice timesaver.

@helper GetInitializationScripts() {
   <div id="fb-root"></div>
   <script type="text/javascript">
       window.fbAsyncInit = function() {
           FB.init({appId: '@FacebookSocialPlugins.AppId', status: true, cookie: true, xfbml: true});
        };
       (function() {
           var e = document.createElement('script'); e.async = true;
           e.src = document.location.protocol +
           '//connect.facebook.net/en_US/all.js';
           document.getElementById('fb-root').appendChild(e);
       }());
   
       function loginRedirect(url) { window.location = url; }
   </script>
}

Notice how we inject he AppId from the FacebookSocialPlugins class?  This notion of mixing code and markup within a class method is very powerful and useful in lots of ways.  There’s a couple additional steps that you must do in order to have the Social Plugins working including calling the following method in _AppStart.cshtml.

@{
   FacebookSocialPlugins.Initialize("[Your App Id]", "[Your App Secret]", "bakery");
}

Secondly you must register the Facebook namespace in _Layout.cshtml which tells the page about the Facebook markup:

<html xmlns="http://www.w3.org/1999/xhtml" @FacebookSocialPlugins.FbmlNamespaces() >

 

Normally this would be a copy and paste from the depths of the Facebook developer portal, now it’s simply a case of using the Helper and you’re done.

This then clears the path for us to easily add Facebook’s Social Plugins to a WebMatrix website:

    <p>
   @FacebookSocialPlugins.Comments()
</p>

 

Results in:

image

It’s important to note that some Social Plugins require your site to be published to an external host that Facebook can communicate back and forth to.

I recommend checking out the documentation which comes as part of the Helper NuPack for more information on getting started, simply press the “run” button in WebMatrix  with startHere.html opened to browse the docs.

image

Other good reading on WebMatrix Beta 2

  • Pingback: Anonymous

  • http://weblogs.asp.net/kashyapa Lohith

    James

    Excellent article on the new facebook helper in beta2. I have covered AntiForgery and Bing helper in my blog posts. Do visit and comment.

    Looking forward to many more articles on webmatrix from you.

    regards
    Lohith

  • camus

    nice!

  • http://www.topchristmastoysforkids.co.uk Samatha

    Thanks. Very informative and useful. Does it still need microsoft platform installer 3.0?

    thanks..

  • eugene

    yahooo facebook helpers!!!

  • http://www.totallyfreegadgets.co.uk Rob

    Really really interesting article, Ive actually leart quite alot from this. Thankyou!

  • http://www.buyalz.net ok1225

    Expresses its appreciation for such a good article, very useful for me to learn.

    Our site provides a lot of information about the cabal, cheap cabal alz. 24 / 7 online service, giving you the most professional level, the best service, the cheapest price, definitely make you satisfied.

    cabal alz
    cheap cabal

  • Pingback: Installing a package with NuGet Package Manager (former NuPack) - ASP.net

  • Pingback: Installing a package with NuGet Package Manager (former NuPack) - Web Dev And Stuff