How to create Bit.ly short URLs using Jquery and Ajax. Many tutorials available on web about short URLs using server side script, 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.
Javascript Code
You have to create an account on bit.ly and modify the username and API key.
This javascript code $("#short").click(function(){}- short is the id name of the submit button. Using $("#url").val() calling input box value.
Javascript Code
You have to create an account on bit.ly and modify the username and API key.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<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",
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>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<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",
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.
Post a Comment