Check out my latest project: JSBin - live JavaScript pastebin

Twitter script upgrades & JSONP hacking

Given that recently Twitter has been going up and down like a yo-yo (and I'm sure they're working on it), I've upgraded the twitter script to support timeouts.

Twitter have also messed with the API...

I've upgraded the script to allow you to specify timeouts, and how the timeout is handled if the call actually succeeds.

Also, Twitter recently changed their API forcing authentication on calls with friends. As such, I've disabled the functionality until I find out WTF!?

I've also moved the code to be hosted with Google code so that versioning can be better tracked, or you can hot link to the latest version if you want.

http://code.google.com/p/twitterjs/

For those interested, I've got a nice little trick inside the script which allows me to run a JSONP call and cancel it at a predefined timeout.

Since I'm dynamically creating a function for the JSONP callback to succeed to, upon timeout (if the user chooses to) I change the original callback function to be empty. This way when the script finishes, either via the browser timeout, or actually succeeds, but too late for our liking, it doesn't execute.

Here's an example using Flickr's JSONP API:

var url = 'http://www.flickr.com/services/rest/?' + 
  'method=flickr.photos.search&format=json&api_key=' + apiKey +
  '&user_id=38257258@N00&tags=bikeadventures&per_page=10' + 
  '&jsoncallback=renderPictures';

// do the JSONP work:
var script = document.createElement('script');
script.setAttribute('src', url);

// where the magic happens:
// before we call the script - set the timer for 5 seconds
var timeoutTimer = setTimeout(function () {
  // on timeout, completely clear out the renderPictures function
  // but leave it available to be called when the JSONP finishes.
  renderPictures = function () {};
}, 5000);

// call
document.getElementsByTagName('head')[0].appendChild(script);

function renderPictures(data) {
  // cancel the timeout
  if (timeoutTimer) clearTimeout(timeoutTimer);

  // continue as normal...
}

One Response to “Twitter script upgrades & JSONP hacking”

  1. Hey Remy, I LOVE this idea. I was all excited to add Twitter updates to my page, and then disappointed to find out it was slowing my page down very regularly.

    I've used this to replace the default twitter script on CSS-Tricks. Today, at 5 seconds its almost never loading, and at 8 seconds it's doing alright.... Ideally I'd like to have a max of 3 seconds or so, we'll see if they ever get their API that fast. The last few weeks have been so bad, it's hard to see that ever happening.

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight