ASP.NET Facebook Like Button UserControl

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"!

By Peter Bromberg   Popularity  (4333 Views)