Making short urls using javascript and a .htaccess file

Origin of the Problem

Update (March 2016): Although the code described here did work, I found that Facebook and Twitter sometimes didn’t recognise it, perhaps because it wasn’t a normal service, so eventually I replaced my own code with this jquery plugin jQuery URL Shorten Plugin Using Bit.ly. I would have to recommend this way of proceeding for anyone interested now.

In their code itself, to make it work across pages without writing links for each page I changed (e.g.):

link:'http://www.ancient-buddhist-texts.net/English-Texts/ET-index.htm' 

to

link:window.location.href

which finds and sets the current page before sending it for shortening.

A few years ago I was asked to introduce “share” buttons to my Ancient Buddhist Texts website, which I did using Shareaholic, which is what you see on my sites, and indeed on many sites round the net. They look like this:

Share Buttons

The problem with using this solution is simple: they add an awful lot of weight to a page, making it much slower to download, this is because of shareaholic’s coding in the background, which makes, for instance, a 7kb page like the Original Texts index, into a page of an astonishing 229kb. That is a big, big overload. And it occurs on every page.

Also it is clear that despite having over 15,000 unique visitors a month for many years now, not many people are using the buttons, as can be seen from the numbers which are recorded on the icons. So I have now removed the share buttons completely, except for the top-level front pages, and this should lead to substantially faster loading.

In their stead I have written code that gives short urls for each of the pages on the site, which makes sharing easy, even on social networks like Twitter which limit character input. You just copy the url and paste it into wherever you want to share it.

Some Considerations

The rest of this post talks about the considerations I made when preparing the code, and the example code for anyone wishing to follow a similar path.

The concept of short urls should be familiar to most people; they generally have a format like this: http://goo.gl/w2DXNm (that will resolve itself to http://www.ancient-buddhist-texts.net/Buddhist-Texts/BT-index.htm) when it is clicked on, and as you can see it very much shortens the url from 65 characters to just 20.

The problem with these sorts of urls though is that they are open to abuse. For one thing it is not possible to see what website they are pointing at, let alone the page. To my mind it would be easy to solve that problem by simply inserting a title attribute with the address attached, so when you hovered over the link you could see the address. Like so:

Link with Title Attribute
Link with Title Attribute

You would think this is easy enough for google’s engineers to code, eh? But they do not, or find they cannot; and as far as I know nor do any of the other services available.

So one problem is: we want to see the address of the website we are going to, to make sure it is not a phishing site, or a scam or something else unwanted.

One way to do this is to buy a new domain name that is much shorter than the normal one, so that, for example, the New York Times, whose normal address is http://www.nytimes.com uses http://www.nyti.ms for its short urls.

I did consider this solution, but the problem is it requires buying a new domain name, like http://www.a.bt and then pointing it at the ‘real’ domain http://www.ancient-buddhist-texts.net. However, I can hardly justify the expense. For those who wish to though, and have enough traffic on their site, that is one thing that might be worth considering.

The Solution

So the address, for me, remains http://www.ancient-buddhist-texts.net, which is fairly long, but when the structure of the site is taken into consideration it becomes much longer, so that a typical address might look like this:
http://www.ancient-buddhist-texts.net/Buddhist-Texts/C3-Comparative-Dhammapada/CD-01-Yamaka.htm.

As a developer this is very useful, as I can see the site (I have multiple sites), the section (the site has multiple sections), the folder and the file. But as a user what is needed, if you ask me, is just to know the site itself:
http://www.ancient-buddhist-texts.net and the page it is pointing to:
CD-01-Yamaka.htm.
What lies in the middle is hardly needed, at least not in a short url.

With the implementation of the short urls there is now a link given at the bottom of each page, which looks like this:
http://www.ancient-buddhist-texts.net/bt/c3/CD-01-Yamaka.htm.
That reduces the page address from 95 characters to 60, a considerable saving, and is much neater to look at also.

When someone clicks on that link it goes to my server, which is an apache server, and there is a .htaccess file which reads the address and uses a directive to redirect the link to the right page (for a good guide to htaccess click here). In this case the coding in the .htaccess file looks like this:

RedirectMatch /bt/c3/(.*) http://www.ancient-buddhist-texts.net/Buddhist-Texts/C3-Comparative-Dhammapada/$1

This basically tells the server than any link coming in that has this in it “/bt/c3/” in it should be redirected to “/Buddhist-Texts/C3-Comparative-Dhammapada/”. The regular expression tells it to take anything after that part (.*) and insert it at the end of the redirect link $1.

The second thing to explain is the coding to get the page address into a short link. As I don’t want to hard code the address on every page of nearly 4,000 pages, I use javascript to find the address and insert it at the bottom of each page.

First of all we need to find the page address and take it into a variable, like so:

var shurl = window.location.href

We then can manipulate that code so that it is transformed into the short code; we can do this with a replace command:

var shurl = shurl.replace("/Buddhist-Texts/C3-Comparative-Dhammapada/", "/bt/c3/");

To insert in on the page requires having a div id, and then updating it to match the transformed url. I use a division like this:

<div id="shurl"></div>

which is inserted via my footer.js, and then lower down in the same script it updates the innerHTML, with this code:

document.getElementById("shurl").innerHTML = shurl;

You can use css to code the style as you see fit.

For myself I also wanted to add more information and to make it into a link also, so the code on my site it more complex:

document.getElementById("shurl").innerHTML = "<b>short url:</b><br><a href=" + shurl + ">" + shurl + "</a>";

With suitable styling that gives a link which looks like this.

Shurl-Division

You can see them at the bottom of each and every page on the site, but to check you might want to look here:

http://www.ancient-buddhist-texts.net/bt/index.htm

or here:

http://www.ancient-buddhist-texts.net/bt/c3/CD-01-Yamaka.htm

I hope this short discussion will help others looking for a suitable solution to this problem.

 




Possibly Related Posts:


Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>