Adding Facebook Share Functionality to an ASP.NET Website with a Master Page

Adding Facebook Share Functionality To An ASP.NET Web Site With A Master Page

Share 


This article assumes the reader has experience developing web sites using ASP.NET, specifically using Master Pages. It also assumes a familiarity with Facebook. All sample code is in C#. After reading this article, you should be able to integrate Facebook Share with an ASP.NET web site, whether or not it contains a Master Page. I've chosen to illustrate this using a Master Page because it's a little more involved, and once you can do it with a Master Page, you should be able to do it without one as well.

What is Facebook Share, and how does it work?
 
First, let's review what Facebook Share actually is. Adding a Share widget to a web page allows a user to click on an icon which launches a Facebook Share dialog. If the user has a Facebook account, they can then share the web page on their Facebook "wall" with their friends on Facebook, adding comments if they so choose. Their friends will have the opportunity to share with their friends, and so on. In this way, a web page's exposure can increase dramatically in a very short time.
According to the Facebook web site's documentation there are five steps you need to take in order to integrate Share with a web page:

• Step 1: Add a link to the Facebook Share application hosted by Facebook:
  <a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a>
  
  
• Step 2: Add a script tag that points to a Javascript component hosted by Facebook:
  <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
  
  
• Step 3: Add a meta tag containing the title of the page:
  <meta name="title" content="This is the Title" />
  
  
• Step 4: Add a meta tag containing a description of the page:
  <meta name="description" content="This is a short summary of the page." />
  
  
• Step 5: Add a link tag pointing to an image to be used as a logo:
  <link rel="image_src" href="http://www.murrayhilltech.com/images/LogoColorNoText.jpg" />
  
  

The Problem
 
All well and good, but we were talking about doing this while using a Master Page. See the problem yet? Well, if all the pages in our site use a common Master Page, which presumably contains the head tag, which in turn contains all the meta tags and link tags, how do we specify different tag values for different pages? Therein lies the problem. The solution lies in the code-behind file.

The Solution
 
I've chosen to place the code for Steps 1 and 2 in the actual web page as opposed to the Master Page, since that will allow us the flexibility to place the Share widget in varying locations on each page should we care to do so. However, I'm going to accomplish this by inserting an empty asp:Label component in the desired location in the aspx file, and assigning the appropriate value to it in the Page_Load event in the code-behind file. I'm going to use the same asp:Label component to hold the code for both Steps 1 and 2: // This code for the asp:Label component goes in the aspx file <asp:Label ID="labelSteps_1_2" runat="server" Text=""></asp:Label> // The code to populate the asp:Label component with the html and script code // for Steps 1 and 2 should go in the code-behind file labelSteps_1_2.Text = "<a name=\"fb_share\" type=\"button\"></a>" + "<script src=\"http://static.ak.fbcdn.net/connect.php/js/FB.Share\" " + "type=\"text/javascript\"></script>";
Next, we'll instantiate a couple of HtmlMeta objects to handle the meta tags in Steps 3 and 4, also in the Page_Load event:
HtmlMeta tag = new HtmlMeta(); tag.Name = "title"; tag.Content = "This is the Title"; Page.Header.Controls.Add(tag); HtmlMeta tag = new HtmlMeta(); tag.Name = "description"; tag.Content = "This is a short summary of the page."; Page.Header.Controls.Add(tag);
Finally, we'll add the logo in Step 5 in the same Page_Load event using an HtmlLink object:
HtmlLink link = new HtmlLink(); link.href="http://www.murrayhilltech.com/images/LogoColorNoText.jpg"; link.Attributes["rel"] = "image_src"; Page.Header.Controls.Add(link);
Creating these elements dynamically in the code-behind file allows us to add them to the head element of the Master Page without ever actually modifying the Master Page. You can use this same method for pages and/or sites that don't make use of Master Pages.

Putting It All Together
 
The complete listing for the code-behind file is shown below. The only other change we made was to add that asp:Label control to the aspx file. Here's the code behind file:

using System; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Net.Mail; namespace MHT_Web_Site { public partial class MyPage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { try { labelSteps_1_2.Text = "<a name=\"fb_share\" type=\"button\"></a>" + "<script " + "src=\"http://static.ak.fbcdn.net/connect.php/js/FB.Share\" " + "type=\"text/javascript\"></script>"; HtmlMeta tag = new HtmlMeta(); tag.Name = "title"; tag.Content = "This is the Title"; Page.Header.Controls.Add(tag); HtmlMeta tag = new HtmlMeta(); tag.Name = "description"; tag.Content = "This is a short summary of the page."; Page.Header.Controls.Add(tag); HtmlLink link = new HtmlLink(); link.href="http://www.murrayhilltech.com/images/LogoColorNoText.jpg"; link.Attributes["rel"] = "image_src"; Page.Header.Controls.Add(link); } catch (Exception ex) { // Handle the exception } } } }

I hope that this article helps you get started integrating Facebook with ASP.NET web sites. For more information, check Facebook's web site. The documentation there is not organized very well, but it's there if you dig for it.

Dave Verschleiser
Murray Hill Technologies