Google +1 Helper for WebMatrix and Razor

The Google Checkout helper is implemented as a NuGet package and can be downloaded directly from there, but of course it is much more convenient to use the build-in infrastructure WebMatrix offers: open the ASP.NET Web Pages Administration, search for the helper in the Package Manager, and install it into your project.

After installation, you can access the functionality using the GooglePlusOne helper name. The easiest way to get the helper working is to use all the default options:


@GooglePlusOne.PlusOneButton()


The associated output will look similar to this:


<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-us'}
</script>
<g:plusone size="tall"></g:plusone>


The GooglePlusOne helper supports two display options Google +1 offers: setting the language, and setting the size of the button.

For the language, GooglePlusOne.Languages contains an enumeration with all the (currently 44) languages Google +1 supports. You can provide the language either by using the the first argument to PlusOneButton(), or by using the named parameter language as shown here:


@GooglePlusOne.PlusOneButton(language: GooglePlusOne.Languages.German)


The default language used is en-us (enumeration value: GooglePlusOne.Languages.EnglishUS).

Regarding the size for the Google +1 button, four options are provided: Small, Standard (the default), Medium, and Tall.


@GooglePlusOne.PlusOneButton(
language: GooglePlusOne.Languages.German,
size: GooglePlusOne.Sizes.Tall)


For optimization reasons, you may want to put the JavaScript library Google +1 uses and the markup for the button on different places on your page. In order to separate these two elements, the GooglePlusOne helper supports display types defined in GooglePlusOne.DisplayTypes with the following values:

• JavaScript (only outputs the markup to load the JavaScript library)
• Button (only outputs the markup to load the Google +1 button)
• All (outputs both the markup to load the JavaScript library and the markup to load the Google +1 button)

The following code loads the JavaScript libraries and the button separately:


@GooglePlusOne.PlusOneButton(
language: GooglePlusOne.Languages.German,
display: GooglePlusOne.DisplayTypes.JavaScript)

@GooglePlusOne.PlusOneButton(
size: GooglePlusOne.Sizes.Tall,
display: GooglePlusOne.DisplayTypes.Button)


Note that the language parameter is only used for loading the JavaScript library, whereas the display parameter is only used for the button itself. The way Google implemented its +1 feature is exactly like this: when loading the JavaScript libraries, you provide the language to use, and the size will be used when the button is displayed. Therefore, a size setting used together with display type GooglePlusOne.DisplayTypes.JavaScript would be ignored.

If you are using ASP.NET MVC, you can also use this helper. When you have NuGet installed on your system (or even in Visual Studio), you can then install the helper:


PM> Install-Package GooglePlusOne


Then, just add the appropriate markup to one of your Razor views. When using the default ASP.NET MVC3 website template, you could put the following code in your /View/Home/Index.cshtml file - you even get IntelliSense!


@GooglePlusOne.PlusOneButton(
language: GooglePlusOne.Languages.German,
size: GooglePlusOne.Sizes.Tall)


I am looking forward to feedback and plan on continue working on the helper when Google adds more features or languages.