I was looking for a solution for shortening urls for both blog and forums on my indie website Acid.vg. I know there are a lot of shortening services on the web, for both hosted and self-hosted. Both have pros and cons. But the real questions were: Do I really want to send my data to someone else? Do I really want to use more hosting and database space for a self hosted app? Do I really want to keep this app updated?
The answer to all those questions was: NO. Acid.vg is a pretty short domain name, not 4 chars long only like Twitter’s t.co, but short enough to keep his urls short with a little hack and the power of Apache’s mod_rewrite. This will still require a self hosted environment with .htaccess support and an installed cms that identifies its content by IDs (more details as you read).
Acid.vg have a blog cms (WordPress, installed in root / folder) and a forum cms (phpBB3, installed in /forum/ folder), the tutorial splits in two parts, covering both. The same procedure may be adapted for any other cms.
WordPress
On default settings WordPress access his contents (blog post, page, media) through their IDs like mysite.com/?p=ID. Even with seo friendly permalinks on, WordPress still allow to access posts by using ID, we will take advantage from this feature for our hack.
Acid.vg uses Twenty Twelve child theme, this tutorial will assume you are using Twenty Twelve (or a child) but the procedure may be similar with other themes too.
First of we have to decide where to put this shortened link, in my case I went for the entry-meta footer that is shown after each post. This is done by twentytwelve_entry_meta() function found in theme’s functions.php, you can edit it from here (losing changes in case of theme update) or you can copy it in your child theme’s functions.php. An hook filter here would be cooler, but look like its the only way if you want the shorter link to show here.
After copying the whole stuff, add this single line right before the function’s trailing bracket:
printf('<a class="shorter-url" rel="nofollow" href="http://mysite.com/s/%s">Shorter Url</a>.', get_the_ID() );
This function will add the shortened link as http://mysite.com/s/%s, where %s is the post’s ID value we got from WordPress function get_the_ID(). (eg: http://mysite.com/s/1)
Done? Not yet. This only told WordPress how to shorten links using post IDs but it didn’t tell your hosting server how to handle those shortened urls.
Now open your favourite FTP program and navigate to your site’s root, here you will most likely find an .htaccess file, if not create it using your favourite text editor. Add this code to your file. If the file was not empty, make sure to put this code at top.
# BEGIN ShortUrls
<IfModule mod_rewrite.c>
RewriteEngine On
#---TEXT GOES HERE---
</IfModule>
# END ShortUrls
(I will not bother you telling what all this stuff is about, a quick google search will tell you everything.)
Now, delete the entire line were I put TEXT GOES HERE, and paste this stuff inside
RewriteCond %{REQUEST_URI} ^/s/$
RewriteRule ^s/$ http://www.mysite.com/ [L]
RewriteCond %{REQUEST_URI} ^/s/([0-9]+)$
RewriteRule ^s/([0-9]+)$ http://www.mysite.com/?p=$1 [L]
Let’s see what this code does: Read the line in pairs, basically they tell you if RewriteCond condition is met mod_rewrite will rewrite the url using the specified RewriteRule
Line #1 and #2:
Since the shortened url make use of the posts IDs, if this ID is missing (RewriteCond searches for “mysite.com/s/”), we only redirect the browser to the main site.
Line #3 and #4:
If the url ends with a number (eg: mysite.com/s/34), take the numerical part ([0-9]+) after /s/ and point the browser to mysite.com/?p=ID (eg: mysite.com/?p=34).
Now we’re done.
Will the site loose his fancy SEO permalinks? Absolutely no! WordPress will then take care of loading the correct post and, if permalink are enabled, printing the correct (longer) permalink in the browser address bar.
But this method only shortens the links by 1 char compared to ?p=ID method! I know, mysite.com/?p=1 and mysite.com/s/1 are respectively 15 and 16 chars long. But this is the case only when wordpress is on root. When it is installed on /blog/ or, worse, /wordpress/ folder, the difference between mysite.com/s/1 and mysite.com/wordpress/?p=1 becomes obvious.
Read the phpBB3 part to better understand what I mean.
phpBB3
In my current setup PhpBB3 runs from a subfolder /forum/ and it shows post through a php page viewtopic.php?p=ID, making the full url very long mysite.com/forum/viewtopic.php?p=ID. Having this url short as mysite.com/f/ID would be awesome!
Like we did with WordPress we have to show those shortened ID somewhere in the forums. The best place to put this link is inside viewtopic_body.html, right before or after the topic title. In most themes you can find a line similar to this one
(Note: you don’t have to scan for the entire document, it is usually found in the first 5 lines)
<a href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a>
Next to this that you can paste something like:
<a class="shortlink" rel="nofollow" href="http://mysite.com/f/{S_TOPIC_ID}">Shorter Url</a>
This will make the post link much shorter, will not work on his own.
Get back to your .htaccess file and paste this code, right after the previous Rewrite codes.
RewriteCond %{REQUEST_URI} ^/f/$
RewriteRule ^f/$ http://www.mysite.com/forum/ [L]
RewriteCond %{REQUEST_URI} ^/f/([0-9]+)$
RewriteRule ^f/([0-9]+)$ http://www.mysite.com/forum/viewtopic.php?p=$1 [L]
Like previous codes
Line #1 and #2:
Will tell browsers to load the forum main page when the browser is trying to load a shortlink with no id.
Line #3 and #4:
Will send browsers to the correct link http://www.mysite.com/forum/viewtopic.php?p=ID.
Here you can see a big difference: mysite.com/forum/viewtopic.php?p=1 is 34 characters long, while mysite.com/f/1 is only 14, 20 characters less.
Do I have to use mysite.com/s/ and mysite.com/f/? No, you can use whatever you want like b/ or s-, just make sure your RewriteConds and RewriteRules use the correct regular expressions.