Public Link Feed: bitly + feedburner
TL;DR
To automatically display public Bitly links on a website, an intermediary service is recommended to resolve technical limitations associated with native APIs and cross-site scripting.
- Directly embedding Bitly links is challenging because the native APIs do not support JSONP, leading to potential cross-site scripting issues.
- The practical solution is routing the Bitly RSS feed through FeedBurner to access its stable JSONP API.
- The process involves using the JSONP type of request, which facilitates reliable client-side data loading on the website.
- Implementers should be aware that the system is susceptible to noticeable caching lag, particularly when retrieving updates from 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 https://bitly.com/u/santsys.json and https://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 (https://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 (https://www.santsys.com/)
Options:
feedUrl
- The URL to your feed on feedburner, for example
https://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' : 'https://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': 'https://feeds.feedburner.com/RecentBookmarksFromSantsysOnBitly'
};
$("#bitly-feed div.side").feedBurn(options);
}
catch (e) { }
});
})(jQuery);