Create Bit.ly Short URLs Using Jquery and Ajax.
Wall Script
Follow Me:
Wednesday, August 11, 2010

Create Bit.ly Short URLs Using Jquery and Ajax.

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.

Bitly Short URLs

Live Demo

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>

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
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


23 comments:

  1. Very good script with bit.ly api!!

    ReplyDelete
  2. good idea.. simple way to shorting url.. how about goo.gl??

    ReplyDelete
  3. Hi sree etta ,

    Thanks for this concept...


    Praveen Thappily

    ReplyDelete
  4. 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.

    ReplyDelete
  5. Yes, good observation, this technique isn't sicure, use php or another server language to shorten urls.

    ReplyDelete
  6. Good 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.
    BTW very useful tutorial again.

    ReplyDelete
  7. this is awesome...I thought it is an algorithm and will take long..this is awesome...interesting demo..good job

    ReplyDelete
  8. ones more...
    http://code.google.com/p/bitly-api/wiki/JavascriptClientApiDocumentation#Information
    hihihi, heuheuheu ;)) :D

    ReplyDelete
  9. Srinivas this is vinodh buddy ur collegemate thanks for this tutorials

    ReplyDelete
  10. You're a superstar, I've been trying to figure out how to do this for weeks.

    ReplyDelete
  11. Great tutorial! Help a lot to one of my projects. Thanks!

    ReplyDelete
  12. Thank you. thank you. thank you. I've been trying to make a similar script to work with goo.gl and becoming increasingly frustrated.

    ReplyDelete
  13. can you please explain the function call on success
    success:function(v)
    {}
    as in my code this function is not called even when urltest is true!!

    ReplyDelete
  14. I was searching on net for this but they were not working...Thanks Srinivas for this Great

    ReplyDelete
  15. Thanks Srinivas...I searched internet but could not find any working example...Kudos

    ReplyDelete
  16. Don'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

    ReplyDelete
  17. hi, i have a question, is it only for input, isnt it? how can i textarea

    ReplyDelete
  18. Fantastic! thank you. :)

    ReplyDelete
  19. I believe this uses oath which has been depreciated.

    ReplyDelete

Make in India