example.html at Bitly - Free PHP Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
        <title>Bitly Plugin Example</title>
        <!-- needed by preview plugin -->
        <link href="/bitly/css/styles.css" rel="stylesheet" type="text/css">
        <!-- change path to point to your jQuery location -->
        <script type="text/javascript" src="/js/jquery-1.3.1.js"></script>
        <script type="text/javascript" src="/bitly/jquery.bitly.js"></script>
        <script type="text/javascript">
        //<!--
        
        $.fn.bitly.defaults.url = '/bitly/bitly.php';
        function infoHandler(data) {
            var cth = new contentTypeHandler();
            var prw = $('#preview');
            cth.register('html', function(d) {
                var thumb = d.thumbnail.medium;
                prw.css('width', '256px')
                    .append('<h1>' + d.htmlTitle + '</h1>')
                    .append('<div>' + d.htmlMetaDescription + '</div>');
                if(thumb) {
                    var img = new Image();
                    $(img).error(function(){})
                        .attr('src', thumb)
                        .load( function() {
                            prw.append(this);
                        });
                }
            });
            cth.register('jpeg', function(d) {
                    prw.append('<img src="' + d.longUrl + '"/>');
                });
            cth.register('mpeg', function(d) {
                    for(var label in d.id3) {
                        prw.append('<div><span>' + label + ':</span> ' + d.id3[label] + '</div>');
                    }
                    if(d.contentLength) {
                        var size = Math.round( d.contentLegth / 1024);
                        prw.append('<div>Size: ' + size + ' Kb</div>');
                    }
                });
            for(var key in data) {
                cth.handle( data[key]);
            }
        }

        function contentTypeHandler() {
            this.contentTypeHandlers = new Array();
        }
        
        contentTypeHandler.prototype.register = function(type, func) {
            this.contentTypeHandlers[type] = func;
        }
        contentTypeHandler.prototype.handle = function(d) {
            var prw = $('#preview');
            var longUrl = d.longUrl.replace('http://', '');
        
            if( longUrl.length > 25) {
                longUrl = longUrl.substring(0, 25) + '&raquo;';
            }
            var ct = d.contentType.split('/')[1];
            if( typeof( this.contentTypeHandlers[ct]) != 'undefined') {
                this.contentTypeHandlers[ct](d);
            }
            prw.append('<div>Source: ' + longUrl + '</div>');
        };
        
        function updateCounter(msg) {
            if( typeof(msg) == 'string') {
                $('#counter').html(msg);
                return true;
            }
            $('#counter').html('Length: ' + $('#msg').val().length);
        }
        $(document).ready( function() {
            updateCounter();
            $('div.shortened a').addPreview(infoHandler, {'message':'Loading data...'});
            $('#msg').keyup( function() {
                updateCounter();
            });
            $('#shortenBtn').click( function() {
                updateCounter('shortening...');
                $('#msg').shortenUrl( function(data) {
                    updateCounter();
                });
            });
        });
        //-->
        </script>
    </head>
    <body>
        <h1>Bitly jQuery plugin usage example</h1>
        <div class="shortened">
            <p>Place mouse pointer over link to preview content.</p>
            <ul>
                <li><a href="http://bit.ly/18YSrx">http://bit.ly/18YSrx</a> (web page) </li>
                <li><a href="http://bit.ly/SdgN">http://bit.ly/SdgN</a> (MP3 file)</li>
                <li><a href="http://bit.ly/jVFH">http://bit.ly/jVFH</a> (image) </li>
                <li><a href="http://music.ruslanas.com/">http://music.ruslanas.com</a> (long URL) </li>
            </ul>
        </div>
        <form action="" method="post">
            <label for="msg">Message (paste text with any number 
            of web addresses starting with http:// and press Shorten):</label>
            <br/>
            <textarea id="msg" cols="50" rows="3">Press Shorten to shorten this long URL http://code.google.com/p/bitly/wiki/Installation</textarea>
            <br/>
            <input type="button" id="shortenBtn" value="Shorten"/>
            <span id="counter"></span>
        </form>
        <hr/>
        <a href="http://bitly.googlecode.com">http://bitly.googlecode.com</a>
    </body>
</html>