Dharma Records

A record of Ānandajoti’s publication work.

Menu
  • Notices
  • Talks
  • Texts
  • Audio
  • Video
  • Photos
  • Ecology
  • Culture
  • Archives
  • About
Menu

Making short urls using javascript and a .htaccess file

Posted on February 20, 2016March 4, 2020 by Ānandajoti

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.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: 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
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.

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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

QR code

SHORTLINK

RSS Feeds

  • All Posts
  • Texts
  • Photos

Donations

there are many expenses involved in the making of this website. Even a small donation really helps to maintain and expand the site.

or Bank Transfer to:
Mr. Ng Choon Aun, Public Bank Berhad (Malaysia), Acc. No. 6352323912, Swift: PBBEMYKL

Recent Posts

  • Final Set of Photos from Bali: The Collections
  • Third Set of Photos from Bali: The Other Ancient Temples
  • Second Set of Photos from Bali: The Monumental Sites
  • First Set of Photos from Bali: The Iconic Temples
  • Third Volume of the Jātaka Verses and their Word Commentaries
  • Guide to the Reliefs at Prambanan Published
  • Second Volume of the Jātaka Verses and their Word Commentaries
  • First Volume of the Jātaka Verses and their Word Commentaries
  • Contributions to Buddhist Studies
  • Programmes to Input Diacritics with Two Different Methods

Top 10 Tags

  • Books
  • Buddha
  • Dhamma
  • Ethics
  • India
  • Monks
  • Poetry
  • Temples
  • Texts
  • Wisdom

Recent Posts

  • Final Set of Photos from Bali: The Collections
  • Third Set of Photos from Bali: The Other Ancient Temples
  • Second Set of Photos from Bali: The Monumental Sites
  • First Set of Photos from Bali: The Iconic Temples
  • Third Volume of the Jātaka Verses and their Word Commentaries
  • Guide to the Reliefs at Prambanan Published
  • Second Volume of the Jātaka Verses and their Word Commentaries
  • First Volume of the Jātaka Verses and their Word Commentaries
  • Contributions to Buddhist Studies
  • Programmes to Input Diacritics with Two Different Methods

Other Posts

  • Contributions to Buddhist Studies
  • Mike Cross digs up Asvaghosa’s Gold
  • A Guide to the Parsing of Pali
  • The 84 Statues of Guan Yin on Photo Dharma
  • The Great Compassion Mantra Of Avalokitesvara
  • BWV 031: Overcoming Defilements with their Opposites
  • Bhante Anandajoti: The Buddha makes Peace, not War
  • HOME: The Statistics
  • Kuthodaw Pagoda, Mandalay
  • BWV 029: Four Great Things
  • The Life of Nyanavimala Thera

Related Posts

  • Programmes to Input Diacritics with Two Different Methods
  • Complete List of Documents on Ancient Buddhist Texts
  • Navigation System on Ancient Buddhist Texts Updated
  • Gaṇḍavyūha Book released as PDF
  • New Design and Upgrade of Photo Dharma Website
  • Creating New Tags in Html5
  • Facebook Profile to Page Conversion, My Experience
  • Dharma Records Blog at New Address
  • Bhikkhu Sumedha: His Teachings and Paintings
  • New Website: Buddhasāsana
© 2023 Dharma Records | Powered by Minimalist Blog WordPress Theme