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

The Solution

I've chosen to place the code for Steps 1 and 2 on 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, as well as in the Page_Load event.

HtmlMeta tag = new HtmlMeta();
tag.Name = "title";
tag.Content = "This is the Title";
Page.Header.Controls.Add(tag);

HtmlMeta tag2 = new HtmlMeta();
tag2.Name = "description";
tag2.Content = "This is a short summary of the page.";
Page.Header.Controls.Add(tag2);

// Adding 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 the 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 titleTag = new HtmlMeta();
                titleTag.Name = "title";
                titleTag.Content = "This is the Title";
                Page.Header.Controls.Add(titleTag);

                HtmlMeta descriptionTag = new HtmlMeta();
                descriptionTag.Name = "description";
                descriptionTag.Content = "This is a short summary of the page.";
                Page.Header.Controls.Add(descriptionTag);

                HtmlLink logoLink = new HtmlLink();
                logoLink.Href = "http://www.murrayhilltech.com/images/LogoColorNoText.jpg";
                logoLink.Attributes["rel"] = "image_src";
                Page.Header.Controls.Add(logoLink);
            }
            catch (Exception ex)
            {
                // Handle the exception
            }
        }
    }
}

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