jQuery Increment Plugin

The latest version of the jQuery Increment plugin (v. 0.6) now supports use of the mousewheel plugin by Brandon Aaron to increment/decrement numeric input values. Ensure scripts are loaded in the proper order (jquery » mousewheel » increment).

Try it out: jQuery Increment Demo

Download Increment Now

See the original Increment blog post.

I’ve been thinking about posting this for a while now. Then came the announcement on Sunday, from URL shortening service tr.im, that they are shutting down, effective immediately. It brought to light the issues with relying on the cloud.

Admittedly, this is not as devastating an announcement as your trusted e-mail, or even photo hosting, service going under. However, social media sites — primarily Twitter — have made URL shorteners almost a necessity, and some users have developed quite a bit of “social capital” in the form of links built and shared using a particular service.

Although tr.im promises to keep existing links active through the end of the year, there is currently no way to create new short URLs, nor is there any way to view information or statistics on any existing tr.im links. Poof, they’re gone. No warning, no recourse.

UPDATE: Tr.im has restored their service. However, this unpredictability only reinforces the call to control your site and your brand.

Okay, so what can you do about it?
Make your own URL shortener.

As you’ll soon see, it’s easy, it’s fun, and puts the you in short URLs.

Requirements

• Web Server — preferably one you host yourself, with control over basic site settings
• Web Development Language — using PHP here, but this code can be adapted to ASP.NET, ColdFusion, etc.
• Database — MySQL featured, but SQL Server, PostgreSQL, etc. would work
• Ideally, you’ll want a short domain to set this up on.
  www.joesautoglassandspareparts.com kinda defeats the purpose ;)

Examples

Each of the following are short URLs to content on other sites:
http://sean-o.com/babysafe

http://sean-o.com/getwindows7

http://sean-o.com/playtime

Getting Started

As mentioned above, we’ll be using PHP 5.2.x & MySQL 4/5 for this tutorial — as these open-source technologies should be available to most of you.

The first thing you’ll need is a source for your short URLs. Easiest way to do that is with a MySQL database (or new table on your existing site’s database). Here’s the structure I used:

Sean O's Short URL Tutorial: Table Structure

You only really need the first three columns, the rest are for statistics & future use (userID). Add/remove fields as you see fit — perhaps you may want a field for notes?

The Script

We’ll only need one script to accomplish the short URL resolution. Create a file called shortURL.php at the root of your site. (or you may choose a custom name & path)

To begin, the first thing to do is grab the short URL — the segment after the base URL.
e.g. http://sean-o.com/playtime
A little regex (regular expressions) goes a long way here to parse the short URL and strip extraneous characters.

$expectedURL = trim($_SERVER['URL']);
$split = preg_split("{:80\/}",$expectedURL);
$shortURL = $split[1];
// security: strip all but alphanumerics & dashes
$shortURL = preg_replace("/[^a-z0-9-]+/i", "", $shortURL);

Next, we’ll check this string to see if it matches a short URL in our database.

$isShortURL = false;
$result = getLongURL($shortURL);
if ($result) { $isShortURL = true; }
$longURL = $result['longURL'];

Finally, we check to see if our $isShortURL flag is set. If a matching short URL was found, we’ll redirect to it. If not, we’ll display our standard 404.

if ($isShortURL)
{
	redirectTo($longURL, $shortURL);
} else {
	show404();  // no shortURL found, display standard 404 page
}

The Functions

The primary function — get the long URL associated with the passed short URL, if it exists.

function getLongURL($s)
{
	// define these variables for your system
	$host = ""; $user = ""; $pass = ""; $db = "";
	$mysqli = new mysqli($host, $user, $pass, $db);
	// you may just want to fall thru to 404 here if connection error
	if (mysqli_connect_errno()) { die("Unable to connect !"); }
	$query = "SELECT * FROM urls WHERE shorturl = '$s';";
	if ($result = $mysqli->query($query)) {
	    if ($result->num_rows > 0) {
		while($row = $result->fetch_assoc()) {
			return($row);
		}
	    } else {
	    	return false;
	    }
	} else {
		return false;
	}
	$mysqli->close();
}

Perform the URL redirection.

function redirectTo($longURL)
{
	// change this to your domain
	header("Referer: http://www.your-domain-here.com");
	// use a 301 redirect to your destination
	header("Location: $longURL", TRUE, 301);
	exit;
}

Finally, display your standard 404 page here.

function show404()
{
	// display/include your standard 404 page here
	echo "404 Page Not Found.";
	exit;
}

Wire It Up

Okay, so we have the script… now what? Well, the “special sauce” here is the 404 redirect. What we’re simply doing is replacing (or augmenting) your site’s 404 page with one that checks a database for a URL shortcut. If one is listed that matches, redirect to it. If not, display your standard (or not so standard) 404 error message.

You’ll need to modify your site’s existing 404 error page, or (recommended) create a new one. If creating a new one, make sure your site is set to point to this file. For IIS (5/6): Go to your web site, Properties, Custom Errors, 404, Edit Properties… For Apache, edit your .htaccess file thusly: ErrorDocument 404 /shortURL.php. (replace with your custom path as appropriate)

Now, Run With It (Additional, Optional Steps)

If you’ll be using this with any regularity, you’ll probably want to create an admin panel page to quickly add & manage your URLs (I’m simply using a MySQL GUI — the great HeidiSQL). Consider whether you want to use custom short URL names, or just generate a random 4-5 character string (or both!). If you’re a statistics nut, you might want to capture more than just the user’s IP and/or build a stats page.

If you’re looking to “monetize” (ahem, see above), you may want to frame the linked site under a toolbar with your site’s branding, a la the “Digg Bar”. I highly recommend against this, however, as many users consider this practice an annoyance.

If your domain name is longer than, say, 8 characters, consider purchasing a second domain for exclusive short URL serving. Two-letter country-based domains such as .ly and .to are popular. Flickr’s recent purchase of http://flic.kr was especially clever.

Conclusion

So there you have it. Your very own, shiny new, URL shortening service… in under 50 lines of code!

Be sure to test. I suggest trying the following: a short URL you’ve created, a known working URL on your site (make sure you didn’t break anything!), and a known incorrect URL (test the standard 404). Also, be mindful of the security implications. Make sure following best practices with regards to MySQL security, and be sure to sanitize all URLs. Ensure your server is running the latest versions of software with the latest patches.

Disclaimer: This article is just to get you started. The code presented here is most certainly “quick & dirty”, and can surely be optimized. This code may or may not work for you, and I cannot be held responsible for any damage that may occur to your site as a result of implementing this.

If you end up implementing this on your site, I’d love to see it. Post an example here in the comments, or follow me on twitter and hit up @seanodotcom. If you’ve ported this code to other languages/databases, drop me a line.

Thanks for reading,
SEAN O

Advantages

• You’re in complete control
• You can specify random short URLs or custom ones, using related keyword(s)
• You can collect virtually any statistics you wish
• Excellent for site branding — your URL appears on every link!

Disadvantages

• You’re responsible for maintaining uptime — as your site goes, so goes the service
• You need to build any related services — stats tracking, APIs, user registration, etc.
• Your site’s subdirectory names will override custom short URLs of the same name
• Every 404 on your site will incur a database hit — be sure to keep your main site links fresh (Thanks 5Min)
• Utility varies inversely with the length of the primary domain name

Alternatives

• Simply use another service — bit.ly, cli.gs, etc. (but that’s no fun, and you’re again vulnerable)
• Creative use of htaccess or IIS Rewrite

p.s. the short URL for this post is http://sean-o.com/short-URL