ASP.NET Facebook Like Button UserControl
By Peter Bromberg
One year after its launch, the Facebook Like button has become ubiquitous on the web and continues to be installed on thousands of new websites every day.
Facebook first introduced the Like button at its F8 developer’s conference. The Like
Button spread its social footprint across the web: 50,000 websites installed
the Like button in its first week, and that number rose to 100,000 in less than
a month.
It continues to rise. Facebook said recently that 10,000+ websites add the Like Button
every day. The growth of the Like button hasn’t slowed down. The social network
says more than 2.5 million websites have integrated with Facebook so far, including
more than 80% of the top 100 websites in the U.S. The Like Button has overrun
the real estate of the web, leaving others to simply wonder how it happened!
What happens when somebody "Likes" a page on your site with the Like Button?
The Like button lets a user share your content with friends on Facebook. When
the user clicks the Like button on your site, a story appears in the user's
friends' News Feed with a link back to your website.
Facebook’s success hasn’t gone without notice. Google recently launched +1, its answer
to Facebook’s Like button, and a study last month by Eventbrite concluded that
a “Like” is more profitable than a tweet. If event registration site Eventbrite’s
experience is any indication, website marketers looking for monetary returns
on their efforts might get more value from Facebook than Twitter.
The company announced recently that an average tweet about an event drove 80 cents
in ticket sales during the past six months, whereas an average Facebook Like
drove $1.34 in sales. This translates well to just about any other content; you
are simply generating more potential page views. It really does not matter if
your content is an event, a forum post, or a blog article - if some visitor Likes
it - more page views can get generated. This fact has not been lost on major
news sites including all the TV networks and even the venerable Wall Street Journal.
It's easy to create an ASCX UserControl that allows you to put a Facebook Like
Button anywhere on your site. The basic code is extremely simple - we simply
take the Facebook Like Button IFRAME widget code and apply a custom Width and
Height property to the ASCX control, and concatenate the location.href property
of the page into the code:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="LikeButton.ascx.cs" Inherits="LikeButton.LikeButton" %>
<script type="text/javascript">
function makeLike() {
var start = "<iframe src=\"http://www.facebook.com/plugins/like.php?href=";
var end = "&layout=standard&show_faces=true&width=<%=this.Width %>&action=like&font&colorscheme=light&height=<%=this.Height
%>\" scrolling=\"no\" frameborder=\"0\" style=\"border:none;
overflow:hidden; width:<%=this.Width %>px; height:<%=this.Height %>px;\"
allowTransparency=\"true\"></iframe>";
var ifr = start + document.location.href + end;
document.getElementById("like").innerHTML = ifr;
}
window.onload = makeLike;
</script>
<div id="like">[Like button control]</div>
In a page, you can set the Width and Height properties in the markup for the control:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="LikeButton.Default" %>
<%@ Register src="LikeButton.ascx" tagname="LikeButton" tagprefix="uc1"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:LikeButton ID="LikeButton1" runat="server" Width="210" Height="80" />
</div>
</form>
</body>
</html>
This allows you to size the control so that, for example, it will fit nicely in a
sidebar on a MasterPage. if you want to get more sophisticated, you can use the
Facebook Javascript SDK.
That's all there is to it! You can download a working Visual Studio 2010 solution with the complete code for the UserControl and a sample ASPX page with one on it. Don't forget, you can test it locally but Facebook won't be able to see "localhost"!
Popularity (2360 Views)
 |
| Biography - Peter Bromberg |
Peter Bromberg is a C# MVP, MCP, and .NET expert who has worked in banking, financial and telephony for over 20 years. Pete focuses exclusively on the .NET Platform, and currently develops SOA and other .NET applications for a Fortune 500 clientele. Peter enjoys producing digital photo collage with Maya,playing jazz flute, the beach, and fine wines. You can view Peter's UnBlog and IttyUrl sites. 
|  |
|
|
Article Discussion: ASP.NET Facebook Like Button UserControl