Facebook "Like" button control

Facebook is a great medium for promoting your site. A simple "like" button can drive traffic and increase hits. A cool thing if, like me, you rely on click-throughs to fund your site hosting. Searching online for an ASP.Net Facebook like button control I came up with nothing but javascript and php stuff so, I decided to attack the problem myself.

Creating an ASP.Net control is simple and, essentially, ASP.Net controls are objects that run on the server and which present themselves as HTML text via the response stream. Looking at the code generated by Facebook's own site we see something like this:

Essentially they spit out an iframe with some parameters which you can place on the page. This has a drawback inasmuch as the code is generated specifically for the page and so, potentially, you'll need to generate a new button for each and every page on your site.

So, What happens then if you want to use a master page? Well. in this case you'll need to regenerate the iframe text such that the URL presented by the control adapts to the requested page. Luckily, with an ASP.Net user control, this is a fairly simple matter.

All ASP.Net controls have a Render override that enables the control to spit out its own chunk of HTML into the response stream so all we have to do is override this and adapt the iframe string accordingly. I thought it would be a good approach to use the original string created by Facebook as a basis for the iframe then replace the salient portions with information formatted in by a simple string format operation.

To cope with the values required by the Facebook like button such as the font style, verb value; like or recommend , and other values, I created some simple enumerations that can be set in the markup or in the codebehind.

So that the control can adapt its output to make the button "like" whichever page it's displayed on, I used the Request.Url property to format the URL portion of the iframe. Other values such as colour scheme and such are provided by the various properties. The full code for the control in C# is listed below.

I added nothing to the FacebookLikeButton.ascx file so it is formatted as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FacebookLikeButton.ascx.cs" Inherits="FacebookLikeButton" %>

The contents of the FacebookLikeButton.ascx.cs codebehind file is as follows:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

/// <summary>

/// You are granted royalty free rights to use this button on your web site

/// You may not republish this source code in any form.

/// </summary>

public partial class FacebookLikeButton : System.Web.UI.UserControl

{

public bool ShowFaces { get; set; } //The ShowFaces option

public FacebookButtonLayout ButtonLayout { get; set; } //The layout option

public FacebookButtonFont Font { get; set; } //The Font

public FacebookButtonVerb Verb { get; set; } //Like or Recommend

public FacebookButtonColorScheme ColorScheme { get; set; }

//Here is the code generated by Facebook's developer page that spits out Like buttons.

//<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.bobpowell.net&layout=standard&show_faces=true&width=450&action=like&font=verdana&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

//This string can be adapted to allow it to be used as a format string.

const string iFrameData = @"<iframe src=""http://www.facebook.com/plugins/like.php?href={0}&layout={1}&show_faces={2}&width=450&action=like&font={3}&colorscheme={4}&height=80"" scrolling=""no"" frameborder=""0"" style=""border:none; overflow:hidden; width:450px; height:80px;"" allowTransparency=""true""></iframe>";

static string[] Fonts = { "arial", "lucida+grande", "segoe+ui", "tahoma", "trebuchet+ms", "verdana" };

public FacebookLikeButton()

{

ShowFaces = true;

}

protected void Page_Load(object sender, EventArgs e)

{

// nothing needed

}

/// <summary>

/// Renders the control to the response stream

/// </summary>

/// <param name="writer"></param>

public override void RenderControl(HtmlTextWriter writer)

{

writer.BeginRender();

writer.Write(iFrameData,

Request.Url,

Enum.GetName(typeof(FacebookButtonLayout),ButtonLayout),

ShowFaces.ToString(),

Enum.GetName(typeof(FacebookButtonVerb),Verb),

Enum.GetName(typeof(FacebookButtonColorScheme),ColorScheme));

writer.Flush();

writer.EndRender();

}

public enum FacebookButtonLayout

{

standard,

button_count,

box_count

}

public enum FacebookButtonFont

{

arial,

lucida_grande,

segoe_ui,

tahoma,

trebuchet_ms,

verdana

}

public enum FacebookButtonVerb

{

like,

recommend

}

public enum FacebookButtonColorScheme

{

light,

dark

}

So, there you have it. A simple Facebook "Like" button in the form of a nicely controllable ASCX. Be sure to "Like" this page ;-)