How To Create A Branded URL Shortener Using Javascript Easily

We use link shorteners to make a link easy to remember and share. If you use your own branded shortener to redirect users to external links then it can boost your SEO and it will be easier for you and your visitors to share your links (including internal).
You Can Easily Use The Shortener Script In Blogger, Weebly and All Other Platforms

Again, you can also use a timer but we will use the timer when we will show, you how to create a URL Redirector (which will be shown in our next article. So, stay connect for that).

So, in this article, we will create an URL Shortener for our site. But before we start coding, we need to understand how URL Shorteners work.

Understanding How Custom URL Shorteners Work:

Generally, In a URL Shortener, we define a URL as a variable which can be done from the database or without database (here we will do it without database). Then we use the variable after our main custom domain as a URL Parameter and detect that parameter using Javascript when a visitor visits the link with that parameter. Then according to the Parameter, we program our script to redirect them to the link in that variable.

Here is a simple example of how your URL will be:
Default URL: www.facebook.com/ZealTyro
Custom Shorten URL: www.zealtyro.com?go/fb

So, Let’s Get Started…

Coding The URL Shortener Using Javascript:

To use Javascript in HTML, we have to use ‘script‘ tag and place all Javascript codes in this tag as shown below:

<script language='javascript'>

//Javascript Codes Here

</script>

So, all the codes we use will be inside this. Now Follow the steps below…

Step 1 – Getting URL Parameters

Now we are going to use  URL parameters, so we need to use this line to get URL params:

var key = window.location.href.split("go/")[1].replace("/","")

This will split the URL and get the params for us and pass the key name.

Step 2 – Setting Variables For Redirection

Then, we have to set the variables, we will define the key and the source as shown below:

var urls={
    //Your URLs Here
    'fb':'https://www.facebook.com/ZealTyro',
    'youtube':"https://www.youtube.com/ZealTyro",
    'twitter':"https://twitter.com/ZealTyro",

}

You Have To Add Your URLs In This Format:” ‘key’:’link address’, ” as shown in the examples. The ‘key‘ is the variable name and in the ‘link address‘ paste the destination link.
This will define the URL where the user has to be redirected when a key from these passed from the URL Parameters. That means, if your URL is ‘www.example.com?/go/fb‘ then it will redirect you to ‘www.facebook.com/example‘

Step 3 – Redirecting According To URL Params

After setting up all the variables, we will need to redirect the user. So, we want to redirect the user only if the parameters match with those variables we set in step 2. If the key doesn’t match with any of those then we will show then a text that the URL doesn’t exist. To do so, We are going to use the ‘if‘ function and ‘Document‘ to print the error text:

if(key){
  if(urls[key]){
     window.location.href=urls[key]
  }else{
     document.write("'"+key+"' not found :(");
  }
}

That’s all we need to code. Our final codes will be like this:

<script language='javascript'>

//URL Shortener Script By ZealTyro

var key = window.location.href.split("go/")[1].replace("/","")

var urls={
    'fb':'https://www.facebook.com/ZealTyro',
    'youtube':"https://www.youtube.com/ZealTyro",
    'twitter':"https://twitter.com/ZealTyro",
}

if(key){
  if(urls[key]){
     window.location.href=urls[key] 
  }else{
     document.write("'"+key+"' not found :(");
  } 
}

</script>

Customizing The Script For Using In Blogger:

If you want to redirect the user form a page like: ‘example.com/p/redirect?go/fb’ or ‘example.blogspot.com/p/redirect?go/fb’, then simply create a page and past the codes.

But if you want to use this script in the root theme/template of Blogger or some other platforms to redirect from the main domain, not from any page/post, then you will need to do a little Customization as shown below:

First of all, Go to ‘Blogger‘ then, ‘Template‘ and click on ‘Edit HTML‘. Then press CTRL + F and search for ‘</head>‘. Now paste the whole code before the ‘</head>‘ and then follow these steps:

• After the ‘<script>‘ tag add this line ‘ //<![CDATA[ ‘
• Before ‘</script>‘ tag add this line ‘ //]]> ‘

So it will be like this:

<script language='javascript'>
//<![CDATA[  
var key = window.location.href.split("go/")[1].replace("/","")

var urls={
    'fb':'https://www.facebook.com/ZealTyro',
    'youtube':"https://www.youtube.com/ZealTyro",
    'twitter':"https://twitter.com/ZealTyro",
}

if(key){
  if(urls[key]){
     window.location.href=urls[key] 
  }else{
     document.write("'"+key+"' not found :(");
  } 
}
//]]>
</script>

Using The Shortened Links:

After your custom domain name (e.g. www.zealtyro.com) add ‘?‘, then ‘go/‘ (or something else if you changed the code) and add the key name (e.g. fb). So, the format is: ‘domain.com?go/keyname‘ (e.g. www.example.com?go/fb)
Simply, use the format and add the links where you want. That’s all you need to do.

CONGRATULATIONS!

We Have Successfully Coded Our First URL Shortener…
Thanks For Allowing Us To Help You 🙂
If you are confused or want to know something, then let us know in the comment box, we will reach you as soon as possible. Don’t Forget To Subscribe our Newsletter, YouTube Channel, and Like Our Facebook Page To Keep Updated With Awesome Things. Follow us on Twitter to stay updated with the latest news & changes.