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:'https://www.ancient-buddhist-texts.net/English-Texts/ET-index.htm'to
link:window.location.hrefwhich 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:
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: https://goo.gl/w2DXNm (that will resolve itself to https://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
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 https://www.nytimes.com uses https://www.nyti.ms for its short urls.
I did consider this solution, but the problem is it requires buying a new domain name, like https://www.a.bt and then pointing it at the ‘real’ domain https://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 https://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:
https://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:
https://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:
https://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/(.*) https://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.
You can see them at the bottom of each and every page on the site, but to check you might want to look here:
https://www.ancient-buddhist-texts.net/bt/index.htm
or here:
https://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.