bit.ly URL Shortener using jQuery and Ajax

  • bit.ly URL Shortener using jQuery and Ajax, 5.0 out of 5 based on 1 rating


    bit.ly url shortener using jquery and ajaxHow 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

    Author: Srinivas Tamada

    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>
    

          


    Author: Srinivas Tamada
    Bit.ly: Create an account now

    Subscribe to Site Help Web Resources Feed

    Make a donation

    GD Star Rating
    loading…

    August 13th, 2010 | Blue | 2 Comments | Tags: , , ,

About The Author

Steve

Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.

2 Responses and Counting...

Leave a Reply

* Name, Email, and Comment are Required