My C# Corner

Do you like the social links bar on top of this article? Do you hate it? In today's internet blog, you almost never miss seeing a "Digg It", a "Kick it", a "Ridd It" a Furl it, burl it...or squirrel it... link or icon at the end of each article you read in someone's blog. Well, regardless of the opinions people might have about this phenomenon, if you are an ASP.NET programmer like me, your concern would probably be over how to construct the "social-butterfly" user control, rather than

The social bar you see on top of this article is nothing more than an ASP.NET User Control I've created for my blog. The requirements I set for it were to make it extensible in order to hold the increasing number of social networks icons popping up every day, yet customizable to accommodate those who don't want to turn their blog into a social icons party.

So let's get started. First I created a user control with two hyperlinks, one for the icon, and one for the text:

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

    < asp : HyperLink ID ="lnkImage" runat ="server" />

    < asp : HyperLink ID ="lnkText" runat ="server" />

Next I created the social links bar user control, to house multiple SocialLinks controls. The social links bar has a place holder to add multiple social links dynamically at run time:

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

<% @ Register Src ="SocialLink.ascx" TagName ="SocialLink" TagPrefix ="MyCSharpCorner" %>

< div id ="SocialLinksDiv">

    < asp : PlaceHolder runat ="server" ID ="SocialLinksContainer" />

</ div >

To dynamically allow adding a social link to the bar, I implemented the following code-behind in SocialLinks.ascx.cs file:

public void AddSocialLink(string strText, string strToolTip,

    string strSymboleImageUrl, string strNavigateUrl,

    string strMyLink, string strMyPageTitle)

{

    SocialLink socialLink =

       (SocialLink)LoadControl("SocialLink.ascx");

    socialLink.NavigateUrl = string.Format(strNavigateUrl,

       strMyLink, strMyPageTitle);

    socialLink.SymboleImageUrl = strSymboleImageUrl;

    socialLink.Text = strText;

    socialLink.ToolTip = strToolTip;

    SocialLinksContainer.Controls.Add(socialLink);

}

Next inside the web page, I dropped a SocialLinks user control as follows:

< MyCSharpCorner : SocialLinks ID ="SocialLinksTop" runat ="server" />

Now I’m ready to select which links to add to the bar control. If the page content is static, then you can call AddSocialLink during the Page Load event. If however the page content is bound at run time inside of, say a FormView, you might want to consider adding the SocialLink control dynamically. You can do this by calling AddSocialLink in the DataBound event of the FormView that loads the articles into your blog. In my case, my content is loaded from a database into a FormView, so I made the addition call inside of the DataBound event as follows:

protected void PostView_DataBound(object sender, EventArgs e)

{

    Post post = (Post)PostView.DataItem;

    string imagePath = http://www.mycsharpcorner.com/;

    SocialLinks socialLinksTop =

       (SocialLinks)PostView.FindControl("SocialLinksTop");

    socialLinksTop.AddSocialLink("Kick It",

       "Kick it on DotNetKicks.com", imagePath

       + "DotNetKicks.png",

        "http://www.dotnetkicks.com/kick/?url={0}&title={1}",

       Page.Request.Url.ToString(), Page.Title);   

}

In addition, the above method allows you to delay addition of the SocialLink until the content is loaded and the page title has been determined. This is essential if the page title is the same as the article title, and you want to pass that info to the Social network as part of the submission link.

Finally, I needed another feature to make the bar show icons only, text links only, or both. To implement this feature, I added the following code behind to the bar control:

public enum Mode { ImagesOnly, TextOnly, Both };

public Mode DisplayMode

{

    set

    {

        bool bImageVisible =

           (value == Mode.ImagesOnly || value == Mode.Both);

        bool bTextVisible =

           (value == Mode.TextOnly || value == Mode.Both);

        // loop over all the social links

        foreach (Control socialLink in

           SocialLinksContainer.Controls)

        {

            ((SocialLink)socialLink).ImageVisible =

               bImageVisible;

            ((SocialLink)socialLink).TextVisible =

               bTextVisible;

        }

    }

}

And in SocialLink.ascx.cs code behind, I implemented the following modifiers and accessors:

public bool ImageVisible

{

    set { lnkImage.Visible = value; }

    get { return lnkImage.Visible; }

}

public bool TextVisible

{

    set { lnkText.Visible = value; }

    get { return lnkText.Visible; }

}

With this in place, in order to show icons only for example, all I have left to do is to make the following call after all the links have been loaded:

socialLinksTop.DisplayMode = SocialLinks.Mode.ImagesOnly;

Here are some common social links with their submission links to use in your blog if needed (Please contribute to this article by adding any new social links you know of to the comments section at the end of this article):

public void LoadSocialLinksUrls()

{

    AddSocialLink("Email It", "Email This Article",

       ImagesDirPath + "mail.png",

       "mailto:?body=Hi, check out this article: {0}&subject={1}");

    AddSocialLink("Digg It", "Digg This Article",

       ImagesDirPath + "digg.png",

       "http://digg.com/submit?phase=2&url={0}&title={1}");

    AddSocialLink("Ridd It", "Ridd This Article",

       ImagesDirPath + "reddit.gif",

       "http://reddit.com/submit?url={0}&title={1}");

    AddSocialLink("Bookmark It", "Bookmark This Article",

       ImagesDirPath + "delicious.png",

       "http://del.icio.us/post?url={0}&title={1}");

    AddSocialLink("Technorati", "Add To Technorati",

        ImagesDirPath + "technorati.png",

         "http://technorati.com/faves?add={0}");

    AddSocialLink("Google It", "Add To Google",

        ImagesDirPath + "Google.png",

        "http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk={0}&title={1}");

    AddSocialLink("Yahoo! It", "Add To Yahoo!",

        ImagesDirPath + "yahoo.png",

        "http://myweb2.search.yahoo.com/myresults/bookmarklet?u={0}&t={1}");

    AddSocialLink("furl It", "Add To furl",

         ImagesDirPath + "furl.gif",

        "http://www.furl.net/storeIt.jsp?u={0}&t={1}");

}

Notice that you have to specify the location of the icons images directory by setting the ImagesDirPath private member, for example: http://www.mycsharpcorner.com/ .

That’s it. Now let your blog go out and socialize with the rest of the world! Oh, and don’t forget to Kick, Digg, Furl and  even Squirrel my article if you think it helped you, doing so will help more people read it after you. There are two social bars on top and bottom of this article. The top is with the "ImagesOnly" option, and bottom is with the "Both" Option (at least at the time I wrote this)

Source Code:

For giving this article a good Digg or Kick... I'll give you the source code to include in your blog, so here it is: