My favorites | Sign in
Logo
Project Home
  
Downloads
  
Wiki
  
Issues
  
Source
    
Search
for
Updated Oct 13, 2009 by lehrburger
Labels: Featured
JavascriptClientApiDocumentation  
Documentation of the bit.ly Javascript Client API

See also ApiDocumentation for the bit.ly REST API

Sections

Information

bit.ly provides a javascript client library that makes it easy for developers to make calls to the bit.ly REST API.

Authentication and Basic Instructions

The bit.ly javascript client library is available at: http://bit.ly/javascript-api.js?version=latest&login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07

To use the bit.ly javascript client library, you must pass your login and apiKey in the URL instead of the sample ones above. If you do not have an apiKey, sign up for a bitly account and go to your Account page to get your apiKey.

To include the bit.ly javascript client library on one of your pages, add this inside the <head> tag:

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07"></script>

When you include the bit.ly javascript client library, a new instance of the BitlyApiClient class is instantiated and assigned to the global variable BitlyClient

BitlyCB global namespace

Use the BitlyCB namespace to define callback methods for API calls. See the BitlyApiClient.call method below for an example of defining a callback in the BitlyCB namespace.

All calls made to the bit.ly REST API return data using JSONP + callback methods so that you can make calls to bit.ly and use data from bit.ly from an external domain.

BitlyApiClient class

Use an instance of the BitlyApiClient class to make calls to the bit.ly API using your login and apiKey.

Instance Methods

new

Creates a new instance of BitlyApiClient class. Generally, you should not ever need to create your own instance of the BitlyApiClient class. Instead, you should use the BitlyClient global instance of the BitlyApiClient class that is instantiated when you include the bit.ly javascript client library. Parameters

call

Low level method for calling bit.ly REST API. Parameters

Example: 

	BitlyCB.alertResponse = function(data) {
		var s = '';
		var first_result;
		// Results are keyed by longUrl, so we need to grab the first one.
		for	(var r in data.results) {
			first_result = data.results[r]; break;
		}
		for (var key in first_result) {
			s += key + ":" + first_result[key].toString() + "\n";
		}
		alert(s);
	}
	BitlyClient.call('shorten', {'longUrl': 'http://google.com'}, 'BitlyCB.alertResponse');

shorten

Shorten a long URL. Parameters

Examples:

  • http://bit.ly/app/demos/shorten.html 

    • 	BitlyCB.shortenResponse = function(data) {
		var s = '';
		var first_result;
		// Results are keyed by longUrl, so we need to grab the first one.
		for	(var r in data.results) {
			first_result = data.results[r]; break;
		}
		for (var key in first_result) {
			s += key + ":" + first_result[key].toString() + "\n";
		}
		alert(s);
	}
	BitlyClient.shorten('http://google.com', 'BitlyCB.shortenResponse');

expand

Expand a bit.ly URL. Parameters

Examples:

  • http://bit.ly/app/demos/expand.html 

    • 	BitlyCB.expandResponse = function(data) {
		var s = '';
		var first_result;
		// Results are keyed by longUrl, so we need to grab the first one.
		for	(var r in data.results) {
			first_result = data.results[r]; break;
		}
		for (var key in first_result) {
			s += key + ":" + first_result[key].toString() + "\n";
		}
		alert(s);
	}
	BitlyClient.expand('http://bit.ly/3j4ir4', 'BitlyCB.expandResponse');
	BitlyClient.expand('http://bit.ly/1YKMfY', 'BitlyCB.expandResponse');

info

Get info about a bit.ly URL. Parameters

Examples:

  • http://bit.ly/app/demos/info.html 

    • 	BitlyCB.infoResponse = function(data) {
		var s = '';
		var result;
		for	(var r in data.results) {
			result = data.results[r];
			for (var key in result) {
				s += key + ":" + result[key].toString() + "\n";
			}
		}
		alert(s);
	}
	BitlyClient.info('3j4ir4', 'BitlyCB.infoResponse');

stats

Get clicks and referrer data about a bit.ly URL. Parameters

Examples:

  • http://bit.ly/app/demos/stats.html 

    • 	BitlyCB.statsResponse = function(data) {
		var s = '';
		var result = data.results;
		for (var key in result) {
			s += key + ":" + result[key].toString() + "\n";
		}
		alert(s);
	}
	BitlyClient.stats('3j4ir4', 'BitlyCB.statsResponse');

addPageLoadEvent

Perform a function once the DOM is done rendering. You would use this if you want to safely manipulate the DOM, eg, append stats to all bit.ly link elements. Parameters

Example: 

	BitlyClient.addPageLoadEvent(function(){
		alert("Page is loaded. It's now safe to manipulate the DOM.");
	});

extractBitlyHash

Utility method for ensuring you have a bit.ly hash, given a bit.ly URL or hash. Parameters

Example: 

	alert(BitlyClient.extractBitlyHash("http://bit.ly/3j4ir4"));

createElement

Utility method for creating a DOM node to insert into the page. Parameters

Example: 

	var a = BitlyClient.createElement('a', {'href': 'http://bit.ly', 'text': 'http://bit.ly'});
	document.body.appendChild(a);

setAttribute

Utility method for setting an attribute on a DOM node. Parameters

Example: 

	var a = BitlyClient.createElement('a', {'text': 'http://bit.ly'});
	a.setAttribute('href', 'http://bit.ly');
	document.body.appendChild(a);

loadModules

Load one of the bit.ly javascript client library modules. These modules provide very easy ways to do common tasks, like append stats to each bit.ly URL on a page or insert a traffic / referrers data table. Parameters

Example: 

	BitlyCB.modulesReady = function() {
		BitlyClient.addStatsToBitlyLinks(); // method defined in BitlyClient stats module
	}
	BitlyClient.loadModules(['stats'], 'BitlyCB.modulesReady');

Bitly Client Modules

BitlyClient Modules provide a convenient methods for executing common tasks. Modules are loaded dynamically, so you only have to load those that you want to use.

stats module

The stats module adds the following Instance Methods to BitlyClient.

addStatsToBitlyLinks

Append the number of clicks to every bit.ly link on a page. You can use CSS to show / hide the data as you want. The HTML appended to each bit.ly link element looks like this: 

	<span class="bitly_stats" classname="bitly_stats">
		<span class="bitly_left_bracket" classname="bitly_left_bracket"> [ </span>
		<a target="_blank" href="http://bit.ly/info/31IqMl" class="bitly_stats_info_link" classname="bitly_stats_info_link">
			<span class="bitly_user_clicks" classname="bitly_user_clicks"></span>
			<span class="bitly_clicks" classname="bitly_clicks">493 clicks</span>
		</a>
		<span class="bitly_right_bracket" classname="bitly_right_bracket"> ] </span>
	</span>

Parameters

None

Example: 

	BitlyCB.modulesReady = function() {
		BitlyClient.addStatsToBitlyLinks(); // method defined in BitlyClient stats module
	}
	BitlyClient.loadModules(['stats'], 'BitlyCB.modulesReady');

appendStatsTable

Given url, insert a table showing referring URLs and the number of clicks on each referrer. You can specify as an argument either a bit.ly url or a long url, such as the url of the page currently being viewed (document.URL).

Parameters

Examples: 

	function modulesReady() {
		var l = "http://google.com"; // document.URL
		BitlyClient.appendStatsTable({"longUrl": l}, "result");
	}
	BitlyClient.loadModules(['stats'], 'modulesReady');

Discussion

Please visit our Google Group for discussion of projects and technical issues.

http://groups.google.com/group/bitly-api


Comment by BjoernGT, Jul 15, 2009

Does the Javascript client also take care of the rate limit of 5 concurrent connections? That would be very helpful.

Comment by trung.ngvan, Jul 16, 2009

Is this working as expected? The code here and the code from the link are different.

Comment by sudarmuthu, Aug 01, 2009

Is it possible to get the urls created using JavaScript? API to be listed in the account?


Sign in to add a comment
Hosted by Google Code