Public Link Feed: bitly + feedburner

I’ve been wanting a quick and simple way to get my public links from bitly to my site… something automatic that I wouldn’t have to mess with. 

I’ve done some searching, but couldn’t find anything that worked how I wanted it.

Bitly’s APIs offer a lot of basic options, but they are mostly around authenticated processes for users to login and see their content but there are not many ways for me to stream my content.

Bitly offers some basic methods such as http://bitly.com/u/santsys.json and http://bitly.com/u/santsys.rss to see my feed in JSON and RSS formats. The only problem is this causes a lot of JavaScript cross-site scripting issues if you want to integrate the information on your site. Especially because they don’t seem to support any JSONP functionality.

So the quick and dirty workaround I found was to load up the RSS feed into feedburner (http://feedburner.google.com) and use their JSONP API to load the data on my site.

There are some interesting lag times due to caching within feedburner. At the time of writing this, FeedBurner updates every 30 minutes. I have noticed it often takes much longer for the actual page feed to update. Possibly there are some other systems out there that might update more frequently?

Here is the basic code, and some simple usage samples (also in use on this blog, on the right side of the page titled “Links”).

/*
	Feedburner jQuery Feed
	Version 1.0
	By: Josh Santomieri (http://www.santsys.com/)

	Options:
		feedUrl 
			- The URL to your feed on feedburner, for example
			  http://feeds.feedburner.com/RecentBookmarksFromSantsysOnBitly.
		numLinks 
			- The number of links you want to be displayed.
		feedBurnerUrl 
			- The url for the feedburner API, currently
			  https://ajax.googleapis.com/ajax/services/feed/load.
		removeBitlyPlus 
			- If your feed pulls from Bitly, there will be '+' at the end of
			  the shortened URLs; set this to true to remove them.
		userIP 
			- If you want to set the user ip to send to feedburner, go for it.
			"Google is less likely to mistake requests for abuse when they include userip"

	Most of the documentation on the feedburner/Google APIs can be found here, 
	https://developers.google.com/feed/v1/jsondevguide
*/

(function ($) {
	jQuery.fn.feedBurn = function (options) {
		try {

			var settings = $.extend({
				'feedUrl' : 'http://feeds.feedburner.com/RecentBookmarksFromSantsysOnBitly',
				'numLinks': 10,
				'feedBurnerUrl': 'https://ajax.googleapis.com/ajax/services/feed/load',
				'removeBitlyPlus': true,
				'userIP' : ''
			}, options);

			var _feedUrl = settings.feedBurnerUrl;
			_feedUrl += '?q=' + settings.feedUrl;
			_feedUrl += '&v=1.0';
			_feedUrl += '&num=' + settings.numLinks;
			if (settings.userIP != null && settings.userIP != '') {
				_feedUrl += '&userip=' + settings.userIP;
			}
			_feedUrl += '&callback=?';
			var container = this;

			$.ajax({
				url: _feedUrl,
				type: 'GET',
				dataType: 'jsonp',
				crossDomain: true,
				cache: false,
				jsonpCallback: 'parseFeed',
				success: function(json) {
					if (json == null) {
						container.text('Invalid response from server.');
					} else if (json.responseData == null) {
						container.text('Status Code: ' + json.responseStatus + '; Status: ' + json.responseDetails);
					}
					else {
						var links = json.responseData.feed.entries;
						var html = '';

						for (var i = 0; i < links.length; i++) {
							var link = links[i];
							var linkHref = link.link;

							// Bitly adds a '+' to the end of the links so they open in a Bitly UI
							if (settings.removeBitlyPlus) {
								if (linkHref.charAt(linkHref.length - 1) == '+') {
									linkHref = linkHref.substring(0, linkHref.length - 1);
								}
							}

							html += '<div class="feed-history">';
							html += '<div class="feed-link">';
							html += '<a href="' + linkHref + '" title="' + link.title + '">' + link.title + '</a>';
							html += '</div>';
							html += '</div>';
						}

						container.html(html);
					}
				}
			});
		}
		catch (e) { container.text(e); }
	};
})(jQuery);

And here is some sample usage code.

(function ($) {
	$(document).ready(function () {
		try {
			var options = {
				'numLinks': 6,
				'feedUrl': 'http://feeds.feedburner.com/RecentBookmarksFromSantsysOnBitly'
			};
			$("#bitly-feed div.side").feedBurn(options);
		}
		catch (e) { }
	});
})(jQuery);