Google Plus One Button for ASP.NET

The Google +1 button lets visitors to your site recommend and share your content. I've created an ASP.NET server control to encapsulate the JavaScript you need to embed on your page. Using my server control you don't need to keep visiting the Google button generator to create the most suitable Google +1 button for you site as the ASP.NET control allows you to specify the size, annotation style and language.

Using Google +1 in ASP.NET

It's quite straight forward to include a Google +1 button in your ASP.NET using the Google Plus One server control:

<ssc:GooglePlusOne Size="Medium" Annotation="Bubble" runat="server" />

The Google Plus One Server Control

Here's the complete implementation of the server control. If you want a demonstration, you can find it in use at the bottom of this article! The JavaScript isn't very pretty, but it's what Google provide so who am I to question it!

public class GooglePlusOne : Control
{
   protected override void Render(HtmlTextWriter writer)
   {
      writer.AddAttribute(HtmlTextWriterAttribute.Class, "g-plusone");
      writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID);
      writer.RenderBeginTag(HtmlTextWriterTag.Div);
      writer.RenderEndTag();

      writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
      writer.RenderBeginTag(HtmlTextWriterTag.Script);
      writer.WriteLine("//<![CDATA[");

      writer.WriteLine("window.___gcfg = {{lang: '{0}'}};", Language);

      writer.WriteLine(@"(function() {{
         var e = document.getElementById('{0}');
         e.setAttribute('data-annotation', '{1}');
         e.setAttribute('data-size', '{2}');
         var po = document.createElement('script');
         po.type = 'text/javascript';
         po.async = true;
         po.src = 'https://apis.google.com/js/plusone.js';
         var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(po, s);
         }})();", ClientID, AnnotationToString(), SizeToString());

      writer.WriteLine("//]]>");
      writer.RenderEndTag();
   }

   public string Language
   {
      get
      {
         return (string)(ViewState["Language"] ?? "en-US");
      }
      set
      {
         ViewState["Language"] = value;
      }
   }

   public GooglePlusOneAnnotation Annotation
   {
      get
      {
         return (GooglePlusOneAnnotation)(ViewState["Annotation"] ?? GooglePlusOneAnnotation.Bubble);
      }
      set
      {
         ViewState["Annotation"] = value;
      }
   }

   public GooglePlusOneSize Size
   {
      get
      {
         return (GooglePlusOneSize)(ViewState["Size"] ?? GooglePlusOneSize.Standard);
      }
      set
      {
         ViewState["Size"] = value;
      }
   }

   private string AnnotationToString()
   {
      switch (Annotation)
      {
         case GooglePlusOneAnnotation.Inline:
            return "inline";
         case GooglePlusOneAnnotation.None:
            return "none";
      }

      return "bubble";
   }

   private string SizeToString()
   {
      switch (Size)
      {
         case GooglePlusOneSize.Small:
            return "small";
         case GooglePlusOneSize.Tall:
            return "tall";
         case GooglePlusOneSize.Medium:
            return "medium";
      }

      return "standard";
   }
}

Here's the annotation enumeration:

public enum GooglePlusOneAnnotation
{
   Bubble,
   Inline,
   None
}

And the size enumeration:

public enum GooglePlusOneSize
{
   Small,
   Medium,
   Standard,
   Tall
}

A few points worth noting are the correct use of view state to store the control's properties so that they will properly persist during post back if they have been modified in code. Also, rather than calling ToString on the enumeration properties to convert them to strings, I chose to use a switch statement to convert them. This means that if the code gets refactored, the strings will still be correct for the Google +1 JavaScript when written out to the page as HTML.