Make your own URL shortener in Blogger (blogspot)

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 using only JavaScript in Blogger (blogspot).

 

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.org, 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.

Example,

Default URL: www.facebook.com/realshoaiyb Custom Branded Short URL: www.your-domain.com/go/fb or www.your-domain.blogspot.com/go/fb

Take a look at the above example links to understand how this script will work. If you will go to www.your-domain.com/go/fb it will take you to the Facebook page of sysa. 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:

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

<script language=’javascript’>

//SysaTech.tk URL Shortner

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

Interesting Article : How Kids Grow Physically And Emotionally By Playing Outdoors

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/realshoaiyb’,

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

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’>
//SysaTech.tk URL Shortner
//<![CDATA[
var key = window.location.href.split(“go/”)[1].replace(“/”,””)
var urls={
‘fb’:’https://www.facebook.com/realshoaiyb’,
‘ig’:’https://www.instagram.com/realshoaiyb’,
‘gplus’:”https://plus.google.com/+realshoaiyb”,
‘twitter’:”https://twitter.com/realshoaiyb”,
‘pinterest’:”https://pinterest.com/realshoaiyb”,
}
if(key){
if(urls[key]){
window.location.href=urls[key]
}else{
document.write(“‘”+key+”‘ not found :(“);
}
}
//]]>
</script>

 

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

Do you like sysa's articles? Follow on social!
Comments to: Create Your Own Url Shortener In BlogSpot Blog

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

Login

welcom
....

You can make anything by Reading and Writing.
Join Aranjra

Happy

Halloween

Read and Share spooky stories with Aranjra!

Get ₹99 Bonus
On Signup