2nd UPDATE: Since this post came out, I have written a follow-up post digging deeper into my subsequent findings and explaining 10 Reasons To “Roll Your Own” TinyURL Using Wordpress, and have also created an “install instructions only, no rationales” version for your convenience.
OK, haven’t posted in a little while, in part because I had been working on some pretty cool techy stuff. Here is the first result from it:
Have you been using URL shortening/redirection services like TinyURL, is.gd, etc. in order to send lengthy links to friends in a shorter format, or to fit them into the space-constricted posting fields on micro-blogging services such as Twitter?
If you have, and you’re a marketer, you have probably been wishing that you could track the number of clicks on those links you post to Twitter, or improve the appearance of the link text, etc.
While there are some services available that allow you to do some of that, such as Tweetburner.com which creates a trackable “http://twurl.nl/…” style link, they almost all have one drawback or another, e.g. they 1) don’t allow for custom link text (Tweetburner), 2) sometimes truncate your original link’s # anchors if present (is.gd), 3) don’t allow for tracking, 4) want your Twitter credentials to allow for tracking, and 5) they all end up kind of owning your data.
So I figured, if there was a fast/cheap solution to set the same thing up for yourself, so that you control all of the variables, that would be a good thing, no? You will see in a moment how it can be accomplished using a basic Wordpress 2.7 blogging software installation. Now you’ll likely still use other services to auto-shorten links as well, but when you want to make it count, and want your shortened link on your terms, I bet you’ll like what I have cooked up for you.
Let’s take it step-by-step. Note that I won’t get too in depth with basic technical explanations, I’ll assume that you are familiar with FTP and have already done a standard Wordpress install before. If you’re new to Wordpress, I’d recommend hiring someone to do these steps for you, they should bill you for at most 1 hour as you will see.
I am posting the expected time to complete with each step:
1) You will need to buy a .us domain to install as an add-on domain with one of your existing hosting accounts. I used a http://Bluehost.com account for this, they have reasonable prices and service, but use any hosting/domain provider you would like. Note that it’s not worth getting a separate hosting account just for this engine, and an add-on domain should only cost about $8-10 per year.
Search for short, 3-4 character .us domains, as you’ll obviously want to save space. I found that there are still plenty of 3 character semi- to non-sensical domain names available with one or two numerals in the name, e.g. I picked 3on.us for my test case.
Once purchased, …
… install the domain in your hosting account’s domain manager as an “Add-on domain”, which should also create a new directory under your public_html directory, in my case I simply chose “3on”. This is what the process looked like in a CPanel hosting account:
— Time: 10 minutes (depending on how long you search around for a domain you like :).
2) Now simply download a copy of Wordpress (WP) 2.7, and install it on the newly created directory, so that the directory structure will read “/public_html/3on/wordpress/…” (structure shown below is how it should look in your FTP client program, obviously with your own directory name)
Go through a normal WP 2.7 install including setting up the database and editing wp-config.php, if you’re using Fantastico to automate this, just make sure that the install directory is the new one you want.
Either way, make sure you select option “no search engines” during the install, as this will avoid your stats getting falsified by frequent search engine hits on your redirect/link shortening engine. The “Settings > Privacy” panel should later look as shown below, verify and if necessary adjust after the installation:
— Time: 10 minutes.
3) Upon install, log into the WP admin panel, and edit “Settings > General” as shown in the screenshot below (obviously with your own domain name).
You’ll also need to do one more manual step to copy the “/wordpress/index.php” into the new domain’s root directory, i.e. “/3on/index.php” and change the path inside the file as described in the link right next to “Blog Address URL”:
Enter the address here if you want your blog homepage to be different from the directory you installed WordPress.
The point being that you need your blog to respond at the domain level without any further path, i.e. “http://3on.us/” and NOT “http://3on.us/blog/”, etc. which would obviously be counterproductive to our link shortening agenda.
— Time: 2 minutes.
3) Now that Wordpress is installed, go to “Settings > Permalinks”, and select “Custom Structure”, placing “/%postname%” into the field by that option. This will append your redirect “post” names directly to the domain, e.g. “http://3on.us/testlink” — Time: 1 minute.
— Time: 1 minute.
4) We’re now coming to the heart of the matter the modifications needed to have your Wordpress install act as a redirect engine. I’ve packaged the necessary files as a Wordpress Theme, download them here:
Then extract the .zip file, and FTP upload the “redirect_engine” folder into your “/wordpress/wp-content/themes/” directory as you would any other theme. Activate the theme by going to “Appearance > Themes”, then selecting “Wordpress REUS” by clicking on the theme’s screenshot or link, and finally clicking “Activate Wordpress REUS” in the upper right hand corner.
If you are interested in the code that makes the redirection work, look at the “single.php” file. It’s really quite simple. Also note that “page.php” contains the same code, so you can in principle use pages to create redirect links as well. However, you won’t be able to use the “Press This” bookmarklet we’re about to discuss to do so, as it defaults to “Post”. Use the “Pages > Add” menu instead if you’re so inclined (e.g. to keep certain links separate from your everyday links).
— Time: 5 minutes.
5) Now that the redirection is in place, we just want to make it a bit more convenient. This is where leveraging Wordpress’ “Press This” bookmarklet feature comes into play:
First, go to the “Tools > Tools” menu, and there locate the “Press This” bookmarklet link as shown. Then drag & drop it onto your Bookmarks Toolbar (in FireFox, which is the only browser I’ve tested this in, but IE should work similarly).
— Time: 1 minute.
6) You are now ready to test the new bookmarklet. Simply go to any web page you would like to shorten the URL for, and then click on the bookmarklet button in your Bookmarks Toolbar (obviously that Toolbar needs to be visible):
You will see a popup as follows (and may have to give your new wordpress site permission to open pop-ups, you’ll want to do this):
Note that you will have to be logged into your Wordpress install as “admin”, else you’ll be asked to log in first. Change the “post” title at the top to your desired link name, like in the following example (the post’s “slug”, which is the actual term for the link extension in Wordpress, is created automatically; note that any uppercase letters will be converted to lowercase and any spaces turned into a hyphen (-):
Then press the “Publish” button in the right bottom corner of the pop-up. Done! Your shortened redirect link has been created.
Note that the custom code for “single.php” arranges it so that the URL will automatically be parsed out of the “post” content (the live link shown above), while the link text (e.g. “Twitter Raising Money…” ) will be used as a post title/description in case you choose to pass this shortened URL on to Twitter. You can change this descriptive text in the form shown above, just make sure that you don’t accidentally delete the entire link (and thereby the underlying URL).
You will see the following output:
Now the “TwitterThis!” option won’t be visible to you yet until you do one more custom change to Wordpress I’ll describe in a moment, but you will already be able to copy & paste the newly created short link by right-clicking on “View Post” and selecting “Copy Link Location” (“Copy Shortcut” in IE):
You will also be able to see you newly created “post” that is the basis of your short link in the “Posts > Edit” screen, where you can do the same copy & paste maneuver as above from the “View” option that appears as you hover over the individual post row in the table:
Or click the “View” link to test that your redirect actually works.
Note that you can also rename the bookmarklet itself in your browser’s Bookmark Toolbar by right-clicking, selecting “Properties”, and changing the “Name” to your desired option, e.g. “MyShortLink” in case you’re using the “Press This” bookmarklet for other Wordpress blog installations or yours.
OK, this was the long version of testing, let’s say it takes you a few minutes the first time. Once you have done it several times, this should take you only about 30 seconds anymore.
— Time: 3 minutes.
7) Now comes the last step to enable the “TwitterThis!” option on the “Press This” result pop-up as was shown above. Locate the file “press-this.php” in the directory “/wordpress/wp-admin” and rename it to “press-this.php.old” or similar. Now go to the REUS theme directory “/wordpress/wp-content/themes/redirect_engine” and find the “press-this.php” file there. Then copy that file into the “/wordpress/wp-admin” directory.
Done. I tried to find a more elegant solution for this step, but there didn’t seem to be any as far as adding the extra bit of code through the Wordpress action model, etc. If you know of a way that this could have been done in a more automated way, please contact me. Thanks.
Alright, here is what you will see when you click on “TwitterThis!” in the “Press This” pop-up (assuming that you are already logged into Twitter, else it will prompt you to log in before passing you on):
Basically, the status field will show the link text which will typically be the linked post’s title for most blogs, as well as your brand-new shortened link with the readable extension. Here is what the Twitter status (the “tweet”) will look like after you hit “update”:
As you can see, Twitter did NOT alter the link itself in any way, this will be the case as long as you keep it at a total of 30 characters or less, else it may be adjusted with an ellipsis (“…”) or turned into a Tinyurl.com style link by Twitter.
In my example, we have 7 characters for “http://”, 7 for the “3on.us/” domain name plus forward slash, leaving 16 characters for the link extension (the post name as described above). “twittervaluation” is exactly 16 characters as it happens, so we know it works. When I tested “twitter-valuation” (17 characters) the link had a bit cut off at the end by Twitter with the “…” ellipsis when the actual tweet was displayed.
— Time: 3 minutes.
So what did we gain?
First, by my count, the whole thing should have only taken about 35 minutes or so. If you are not as handy with Wordpress installs, FTP, etc. and want to hire someone to do this whole bit for you, my guess is that they’d have a hard time justifying more than 1 hour of billed time.
Second, you now have a completely flexible redirection engine / URL shortening (REUS, kind of sappy, I know) device, that
1) Can create links 2 characters shorter than even the shortest http://is.gd link, because you could choose to have the link extension only be one character, e.g. “http://3on.us/x” (obviously you’ll have only a limited supply of those…). Note also that is.gd does truncate your “#” on page anchor entensions, like those used to direct straight to a specific comment on a blog post page. Score another one for REUS…
2) Can create links that you completely determine the URL appearance of, both as to the domain (which will seem pretty custom vs. the publicly available services), as well as to the link extension, which can now be at least be semi-sensible.
If you are used to using the link tracker services of aWeber.com or 1shoppingcart.com, or have seen those in list emails sent to you, you can in principle use your new REUS to replace those as well. For that use you would also not be constrained by the extension length as much, and could use even more descriptive link text, e.g. “http://3on.us/grab-your-free-copy-here”.
3) I am working on a stats solution using an already available “Wordpress Stats” plugin as we speak, I will update you as soon as I’ve verified everything. Once that is in place, you will have stats for your REUS. In the meantime, you can use the Stats tools available from your hosting account, such as “Webalizer” or “Awstats” in CPanel, just turn them on for the new domain and you should be able to view your click-throughs. Either way, the data belongs to YOU.
I would hope you agree: Not too bad…
The “theme” is being submitted to Wordpress.org later today, I will keep you posted when it officially becomes available from their site.
UPDATE: OK, seems like this is a little over the Wordpress.org Theme Team’s heads, they didn’t know what to make of the REUS “theme” and rejected it (so far) on the grounds that “This is way too much work to setup a theme.” Even though the only truly exceptional step is the replacement of the “press-this.php” with our custom version. Oh well, no big deal, it is small enough (about 30KB zipped) to easily host from my own hosting account. Here is the link again:
In happier news, I found a stats plugin to use that works relatively well out of the box to get some statistics going for your REUS install. It’s appropriately named “WP-ShortStats” and can be downloaded here. I will talk to the creators and see if they’d like to make a small modification to the reporting page (“Dashboard > ShortStat”) to allow for more tracking on each link, i.e. showing all of the referrers. Or else I’ll make some custom adjustments myself when I find the time. I’ll keep you posted.
Related to what I wrote near the beginning, it turns out that “Budurl.com” kind of holds your click-through stats hostage, you can only download them with a paid account. One more reason to use REUS…