18 January 2015

How to make a Free Url Shortener website quickly

URL shortener is used to make a long URL to short, which is easier to learn, remember and enter. There are several URL shortener across the web which is free to use such as goog.gl, bit.ly. Twitter always use URL shortener to short long URL due to character limit of 140 characters . Twitter now using t.co URL shortener service which is more powerful, advanced security than others .

You will always get paid when someone use your URL shortner website to short their long URL. 

Let's discuss, How to build an URL shortener website and earn thousand or billions ? We will discuss in 3 Parts :
Part A :

1. First, You have to create a Free account. Click here .
2. If  Your account is created, then Log in to your account. then click on 'Tools' > 'Developers API'.


3. Now, copy your API token and keep save in Notepad. See below picture,


 4. Part A is Now done.

Part B :  - Now, We have to make an API, HTML, and CSS style For our webpage

1. Yon don't need to worry about this. I have already created all files. Copy and paste the below code into Notepad,

<html><head><script src="http://goo.gl/Kqm7O8"></script><title>URL shortener</title><style>#input-url{background-color:#ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:6px;color:#000;font-family:'Oswald';font-size:20px;text-decoration:none;cursor:pointer;border:none}#btn{background-color:0000FF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:6px;color:#fff;font-family:'Oswald';font-size:20px;text-decoration:none;cursor:pointer;border:none}#pane{position:relative;text-align:center}#output{position:relative;text-align:center}body{font-family:Arial,Helvetica}</style>
</head><body><div id="header"></div><br /><center><h1>Shorten Your Long URL without any Registration!</h1></center><div id="pane"><form name='my-form'>
<div style="margin-bottom:12px;">Please Enter The Long URL in the Text Box.</div><input type="text" value="" name="url" id="input-url" size=80 /></form><button id='btn'>Short This URL!</button></div><div id="output"></div>

$(document).ready(function(){var get_url="https://api.shorte.st/s/YOUR-API-TOKEN/";$('#btn').click(function(){$('#output').html("");get_url=get_url+$('#input-url').val();$('#output').html("<i>Please Wait.. Your URL is being shortened..</i>");$.getJSON(get_url,function(data){var items=[];$.each(data,function(key,val){if(val!='ok')
items.push("<li id='"+key+"'>"+val+"</li>");});$('#output').html("");$('#output').append("<center><h4>Success.. Your shortened URL is..</h4></center>");$("<ul/>",{"class":"my-new-list",html:items.join("")}).appendTo("#output");$('.my-new-list').css('list-style','none').css('font-size','1.3em');});});});</script>

2. Now Replace  'YOUR-API-TOKEN' with your developer API (see part A).

3. And save as 'Shortener.html' on your desktop.

Now, you have successfully created a URL Shortener. Now , double click on the html file, and then you will see that your site running offline.

Part C : Now, we have to host this files online. You can host your files freely at google drive.

1. First Log in to your Google drive account with your Gmail Username and Password. Click here

2. And then, Upload your html files to Google drive.

3. Now, Right click on the uploaded file and then click on ' Share ' >  again ' Share ' .

4. Then click on 'Advanced' > 'Change' (Who has access). And then change the sharing option to  'Public'.

5. And then, copy the URL address of the file. Your URL address something like below :


" https://drive.google.com/file/d/0B063yQrjZluBdnJreGYtTE9UMjA/view?usp=sharing "

6. Now, we have to make some changes to host files for free. Just see below link,



Your link now something like this,


7. Now copy and paste the link

 (http://googledrive.com/host/0B063yQrjZluBdnJreGYtTE9UMjA) on the browser address bar and hit 'Enter'. Done. 

Now, you have successfully created a URL shortener site which freely running on the internet using Google Drive.

Tips : The URL of your Website is too long, then you can short your website URL using any URL shortener site or you can get custom redirect using dot tk free domain.

Note :  
1. If, you have successfully created your URL shortener site, then comment your site in the below comment box. Any problem appear, may be solved by our blog members.

About Admin
Admin is a Web Designer and a blogger.
You can find him on Facebook, Twitter, Gplus

Leave a Comment!