in development, geek stuff, snippet javascript button

Hello everyone!

I took quite a long time to figure this simple thing out. It annoyed me so much that all I could get was a twitter button share with that I decided to publish my solution here.

The solution was partially done using the API example at (You can diff the texts to spot the differences 😉 )

See a demo in action

My solution is below:

    <title>Bitly Link Example</title>
      .showLink{background:#fffedf; border:1px dashed #d9d596; display:inline-block; padding:10px;}
      .shortme{background:#f1f1f1; border: 1px solid #ccc; padding:5px;}
      .shortme:hover{boder:2px; background:#e0e0e0;cursor:pointer;}
    <h1> button to short current page</h1>
    <p>Just click on the button below to get a shorten url of this page</p>

    <!-- Instead of button, a text link: <a href="#" class="shortme">Get short URL</a> -->
    <input id="btn" value="Get short URL" type="button" class="shortme"><br>

    <script type="text/javascript" charset="utf-8" 
    <script src=""></script>

        var shortThisLink = {
            shorten : function(e) {
                // this stops the click, which will later be handled in the response method
                // gets current location (URL)
                var url = window.location; 
                BitlyClient.shorten(url, 'shortThisLink.response');
            response : function(data) {
                var bitly_link = null;
                for (var r in data.results) {
                    bitly_link = data.results[r]['shortUrl']; 
                var myshorturl = bitly_link
                // prints short link on page
                // gives some style just to highlight the short link created
                document.getElementById("short").className += "showlink";
        jQuery('.shortme').bind('click', shortThisLink.shorten);
    <div id="short"></div>

Write a Comment