Jenzabar JICS URL Shortener

By February 16, 2013 asp.net, code

In my current position at PBA, I’m required to manage our internal web application which is a product developed by Jenzabar called JICS (Jenzabar Internet Campus Solution). The product will create very long and cumbersome URLs which makes it difficult to advertise a specific page within the product in places such as printed materials or in conversation.  

For example one location in the product containing files for students to download might be something like http://my.jicsinstall.com/folder/my_other_folder/a_sub_folder/page_name/sub_page/pagetitle.jnz?portlet=name_of_module.  As you can imagine, this long URL is really impractical when trying to drive students to a specific location on printed signs, digital signs or flyers.

A very simple way to combat this issue is to leverage a URL shortening service such as bit.ly or goo.gl. At PBA, we wanted to have a branded URL shortening service to help validate the links as “official” PBA links. I felt faculty, staff and students would trust a link such as pba.edu/myproject more so than a link like bit.ly/AfgIIg. 

For our internal service, I put together an application written with .NET MVC which allows validated users (people with PBA credentials) to create their own short links.  This application allows them to either create a randomized link or assign their own text as the “short code”.  While not nearly as fast as Google’s or bit.ly’s service, it gets the job done.  (For this article however, I’ll be showing how to make use of bit.ly’s service.)

The next item to address was to make it very easy for anyone using the JICS product to generate a short URL directly within the JICS application. In order to accomplish this, I created a very simple custom asp.net user control (.ascx) which could be included in “safe” areas of the product without impacting the JICS application as a whole.

The user control consists of some basic HTML markup:

<span ID="spanGetLink" runat="server" Visible="false"> 
    <asp:Image ID="imgShrink" runat="server" /> <a href="javascript:void(0);" id="getlink">Get a Short Link</a>
    <span id="loading" style="display:none;"><asp:Image runat="server" ID="imgBusy" /> Shrinking</span>   
    <span id="newlink"></span>           
</span>

 

The user control code behind does some checks to make sure the user is logged in and then will register a JavaScript file, resolve image urls, and generate some additional jQuery to position the link on the page if the “ElementIdToPrepend” property of the control is filled in:

ClientScriptManager cs = Page.ClientScript;

if (!cs.IsClientScriptIncludeRegistered("GetShortLinkJS"))
{
	cs.RegisterClientScriptInclude("GetShortLinkJS", ResolveUrl(@"GetShortLink.js"));                       
}

imgShrink.ImageUrl = ResolveUrl(@"arrow.png");
imgBusy.ImageUrl = ResolveUrl(@"busy.gif");

//If a value has been supplied on the user control, prepend the GetShortLink to the indicated element.
if (ElementIdToPrepend != null && ElementIdToPrepend != "")
{
	if (!cs.IsClientScriptBlockRegistered("GetShortLinkPrependElement"))
	{
		string prependJquery = "$(document).ready(function(){";
		prependJquery += "$('#" + spanGetLink.ClientID + "').prependTo('#" + ElementIdToPrepend.Trim() + "')";
		prependJquery += "});";

		cs.RegisterClientScriptBlock(this.GetType(), "GetShortLinkPrependElement", prependJquery, true);
	}                        
}

 

The real work happens with the jQuery in the referenced JavaScript file.  The jQuery allows the user to get a short link of the current page’s URL while on that page.

$(document).ready(function () {
    //Set your bit.ly login and api key information
    var your_login = "YOUR LOGIN NAME HERE";
    var your_apikey = "YOUR API KEY HERE";

    //This function calls the SSL version of the bitly. If you need the non-SSL version, go here: http://dev.bitly.com
    function get_short_url(long_url, login, api_key, func) {
        $.getJSON(
            "https://api-ssl.bitly.com/v3/shorten?callback=?",
            {
                "format": "json",
                "apiKey": api_key,
                "login": login,
                "longUrl": long_url
            },
            function (response) { func(response.data.url); });
    }

    $("#getlink").click(function () {
        $('#getlink').hide(); 
        $('#loading').show(); 
        get_short_url($(location).attr("href"), your_login, your_apikey, function (short_url) {
        $('#newlink').html(short_url);
        $('#loading').hide();
        });
    });
});

 

When the user clicks on the generated link, the bit.ly API service is called and the link is replaced with a short URL the user can use as they wish.

For example if a user was on a page such as

http://my.jicsinstall.com/folder/my_other_folder/a_sub_folder/page_name/sub_page/pagetitle.jnz?portlet=name_of_module

a short URL like bit.ly/GpQww would be generated.

 

It’s a very simple concept but goes a long way in helping out our users.