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.
Live DemoJavascript 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.
Image source taken from deviantart.com
Twitter API: Up and Running
Very good script with bit.ly api!!
ReplyDeletegood idea.. simple way to shorting url.. how about goo.gl??
ReplyDeletecool jQuery :)
ReplyDeleteHi sree etta ,
ReplyDeleteThanks for this concept...
Praveen Thappily
This is a bad idea from a security perspective. While you can certainly generate short URLs this way, if it's on a public site anybody who has access to the site will be able to access the code and use the username and API key.
ReplyDeleteYes, good observation, this technique isn't sicure, use php or another server language to shorten urls.
ReplyDeleteGood use of Jquery here but, Its like sharing your Usename and Password. Try to put these in a php script and use a little bit of Ajax.
ReplyDeleteBTW very useful tutorial again.
this is awesome...I thought it is an algorithm and will take long..this is awesome...interesting demo..good job
ReplyDeletemaster style...ck ck ck
ReplyDeleteones more...
ReplyDeletehttp://code.google.com/p/bitly-api/wiki/JavascriptClientApiDocumentation#Information
hihihi, heuheuheu ;)) :D
Srinivas this is vinodh buddy ur collegemate thanks for this tutorials
ReplyDeleteYou're a superstar, I've been trying to figure out how to do this for weeks.
ReplyDeleteGreat tutorial! Help a lot to one of my projects. Thanks!
ReplyDeleteThank you. thank you. thank you. I've been trying to make a similar script to work with goo.gl and becoming increasingly frustrated.
ReplyDeletecan you please explain the function call on success
ReplyDeletesuccess:function(v)
{}
as in my code this function is not called even when urltest is true!!
I was searching on net for this but they were not working...Thanks Srinivas for this Great
ReplyDeleteThanks Srinivas...I searched internet but could not find any working example...Kudos
ReplyDeleteDon't you think its really bad to use this and create URL from JQUERY for security purpose ?? because user can easily see your API Key
ReplyDeleteGood One
ReplyDeletehi, i have a question, is it only for input, isnt it? how can i textarea
ReplyDeleteFantastic! thank you. :)
ReplyDeleteI believe this uses oath which has been depreciated.
ReplyDelete