How to Make Your Own URL Shortener with JavaScript in Blogger

Socialize It →

Tweet

0

Advertisements

In the past, we have already shown you how to create short URLs with Google shortener and how you can use bit.ly to generate short URLs automatically. However, neither Google shortener nor Bit.ly allows you to have your custom domain URL shortener.  Recently, one of our users asked us about how to make your own URL shortener in Blogger? A custom URL shortener will allow you to create your own branded domain to redirect to different external pages as per your needs. Today in this article, we will show you how to make your own URL shortener with JavaScript in Blogger.

How Custom URL Shortener Works?

We will be using a script to create our own URL shortening service. This script can also be termed as "Simple Redirects". Just like WordPress, you create links that will redirect you to external pages or domains. Unlike Blogger Custom Redirects, which does not allows you to redirect to other domains, they only redirects to internal pages of your blog.

Default URL: www.facebook.com/mybloggerlab
Custom Branded Short URL: www.mybloggerlab.com/go/fb

Take a look at the above links to understand how this script will work. If you will go to www.mybloggerlab.com/go/fb it will take you to the Facebook page of MyBloggerLab. Similarly you can create unlimited short URLs and Redirects using this script.

How to Make Your Own URL Shortener with JavaScript:

To install URL Shortener script in your Blogger site, please follow the below instructions correctly:

1. Go to Blogger >> Template >> Edit HTML.
2. Now in the template codes,  search for </head> tag and just above it paste the following JavaScript code:

<script language='javascript'>

//MyBloggerLab URL Shorener

//<![CDATA[
var key = window.location.href.split("go/")[1].replace("/","")
var urls={
    'fb':'https://www.facebook.com/mybloggerlab',
    'gplus':"https://plus.google.com/+mybloggerlab",
    'twitter':"https://twitter.com/mybloggerlab",
}
if(key){
    if(urls[key]){
        window.location.href=urls[key]
    }else{
        document.write("'"+key+"' not found :(");
    }
}
//]]>
</script>

Customization: 

Now to create short URLs you can simple make changes to the above code. For example, in the above code search for this:

'fb':'https://www.facebook.com/mybloggerlab',

In the above code fb is the keyword and https://www.facebook.com/mybloggerlab is the targeted website or webpage. If we translated the above code it means that when you'll visit www.mybloggerlab.com/go/fb  it will take you to https://www.facebook.com/mybloggerlab.

You can add more short URLs as well, for example if you want to create a short link for you Pinterest profile then the above code will look like this:

<script language='javascript'>
//MyBloggerLab URL Shorener
//<![CDATA[
var key = window.location.href.split("go/")[1].replace("/","")
var urls={
    'fb':'https://www.facebook.com/mybloggerlab',
    'gplus':"https://plus.google.com/+mybloggerlab",
    'twitter':"https://twitter.com/mybloggerlab",
    'pinterest':"https://twitter.com/mybloggerlab",
}
if(key){
    if(urls[key]){
        window.location.href=urls[key]
    }else{
        document.write("'"+key+"' not found :(");
    }
}
//]]>
</script>

3. After customizing the script as per your needs, press the "Save Template" button on the top of your screen.

We hope this tutorial has helped you in learning how to make your own URL shortener in Blogger. Let us know what are you thoughts in the comments below.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).