How To: Build your own mobile URL shortener

My custom mobile URL shortener, running on iOS

There was a time when Tinyurl produced shortened URLs that were short enough to use, but with the rise of the 140-character limit shorter addresses have become very handy. Bit.ly works well for many purposes, but if you want something a bit more personal, here’s how to do it. My criteria when making a shortener were that it had to work automatically with my desktop Twitter client YoruFukurou, had to have a mobile interface for the iPhone / Android, and had to cost less than £15 per year – this method meets all three requirements.

If you already run Yourls and simply want to add a mobile web interface, skip to the final section of this guide – my code will work with any up to date Yourls installation.

What You Need

1. £30 (covers two years of hosting)
2. A short domain name – either unused and ready to purchase, or already registered.
3. A copy of the Yourls software (from here)
4. A copy of my Mobile Yourls software (from here)
5. A text editor
6. An hour or so

How to set up the shortener

1. Register a cheap web hosting package with MySQL and PHP. I used Vidahost, paying less than £30 for two years – google for a 10% discount code. This includes registration  of one domain name, but you can also use your own domains registered elsewhere – I used http://t0mr.eu, which I have registered elsewhere.
2. Either way, wait 24 hours for the DNS changes to propogate.
3. Log into CPanel using the credentials supplied to you by email when you set up the account. Click ‘MySql Databases’. Create a new database using the form, then create a new user with a password, then add that user to the database using the bottom section of the form. Note down the database name, user name and password.
4. Unpack the Yourls source code into a folder. Find ‘config-sample.php’ in the includes directory, move it to the ‘user’ directory and rename it to ‘config.php’.
5. Open config.php with a text editor. You’ll need to change the top three settings, replacing dbuser, dbpassword and yourls with the username, password and database name you just noted down.
6. Also edit the ‘Yourls Installation URL’ line, replacing http://site.com with your own URL
7. Edit the line define( ‘YOURLS_COOKIEKEY’, ‘qQ4KhL_pu|s@Zm7n#%:b^{A[vhm’ );, replacing the gibberish in the second set of quote marks with your own (mash the keyboard!)
8. The next section lists usernames and passwords. Delete the lines beginning ‘username‘ and ‘username2‘ and insert your own in the same format  – something like  ‘myname’ => ‘mypassword’
9. Save the file.
10. Upload the entire set of Yourls files to your web hosting using the FTP details sent by email when you registered. If using Vidahost, drop the whole lot into the folder called ‘public_html’.
11. Open a web browser and visit www.youraddresshere/admin/ to start the installation of Yourls. It’ll take only a few seconds.

With that completed, you have a complete URL shortening service running on your web server – to log in and add or edit URLS, visit the same www.youraddresshere/admin/ address. In order to shorten URLs via a client or mobile site, though, you’ll need to do a little more.

Connecting Yourls to YoruFukurou

1. To set up Yourls with YoruFukurou, open your Yourls admin page then click Tools. Copy and paste the ‘Secret Signature Token’. Now open YoruFukurou, choose Preferences then Advanced. Choose Custom from the URL Shortener option.
2. In the ‘API Endpoint’ box, enter the following, replacing the bold sections as appropriate: http://youraddresshere.com/yourls-api.php?signature=yoursignaturetokenhere&action=shorturl&format=simple&url=%@
3. Leave the response format as Plain Text. Click OK, and you’re done.

Adding a Mobile Web Interface

Yourls is great, but it lacks a simple web interface for mobile clients – so I made one. Here’s how to install it.

1. Open the Yourls admin page, click Tools, Copy and paste the ‘Secret Signature Token’.
2. Unpack mobile-yourls.zip (download link above) into a folder
3. Open mobile.php in a text editor. Edit the three configuration lines at the very top, adding your signature token (just copied), a password (which can be different to your main Yourls one, if you choose), and the path to yourls-api.php (which will normally be http://youraddresshere.com, but can be alterered if you run Yourls in a folder).
4. Upload the lot to the root folder (public_html) of your web server
5. Visit http://www.youraddresshere.com/mobile.php on your phone to shorten URLs. On any iOS device you can save this page to your home screen as a web app.

That’s it – happy shortening!