Posts Tagged ‘how url become short’

URL-sam.azgor.com

How to create Bit.ly short URLs using Jquery and Ajax. Many tutorials available on web about short URLs using server sidescript, this script works on client side. It is easy just 5 lines of code calling Bit.ly API.You have to modify the username and API key. Use it and make URLs shorts and neat.


Live Demo

Javascript Code
You have to create an account on bit.ly and modify the username and API key.

// <![CDATA[
javascript” src=”http://ajax.googleapis.com/
// ]]>
ajax/libs/jquery/1.4.2/jquery.min.js”>
<script type=”text/javascript”>
$(document).ready(function()
{//bit_url function
function bit_url(url)
{
var url=url;
var username=”username”; // bit.ly username
var key=”bit.ly API key”;
$.ajax({
url:”http://api.bit.ly/v3/shorten&#8221;,
data:{longUrl:url,apiKey:key,login:username},
dataType:”jsonp”,
success:function(v)
{
var bit_url=v.data.url;
$(“#result”).html(‘<a href=”‘+bit_url+'” target=”_blank”>’+bit_url+'</a>’);
}
});
}$(“#short”).click(function()
{
var url=$(“#url”).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var urltest=urlRegex.test(url);
if(urltest)
{
bit_url(url);
}
else
{
alert(“Bad URL”);
}
});});
</script>//HTML Code
<input type=”text” name=”url” id=”url“/>
<input type=”submit” id=”short” value=”Submit”/>
<div id=”result”></div>

This javascript code $(“#short”).click(function(){}short is the id name of the submit button. Using $(“#url”).val() calling input box value.

source taken from 9lessons