How to add Twitter to your blog, without it hanging your site

Twitter logo

Update: for the latest version of this script, and complete control over how it looks, see Add Twitter to your blog (step-by-step)

 

Add tweets to your pages that won’t break when Twitter goes down!

 

You might be inclined to add your ‘Twitters‘ to your blog via JavaScript – the only problem is when Twitter’s traffic goes up, their servers slow down, and the net result is your web page is hanging because it’s waiting to load the Twitter feed.

Some server side caching could do the trick, but it’s an additional pain, so let’s not bother:

Here’s a fix that will allow you to keep Twitter on your sidebar using JavaScript and not worry about it hanging your blog.

As the JavaScript badge examples show you can use a JSON feed of your ‘tweets’ to plug in to your page. Once the JSON is loaded, it calls the callback method: ‘twitterCallback’.

We’re going to wait until the page has loaded before we pull in the Twitter feed – if Twitter is fast, the reader won’t notice any difference, but if Twitter is slow, the page won’t hang, and Twitter will load in it’s own time.

window.onload = function() {
  var url = 'http://www.twitter.com/t/status/user_timeline/rem?callback=twitterCallback&count=1';

  var script = document.createElement('script');
  script.setAttribute('src', url);
  document.body.appendChild(script);
}

Obviously change the URL to your own timeline – the user ID can be seen in your own personal Twitter RSS feed – or in the code for the JavaScript badge.

I prefer not to overwrite the .onload event, so I would use jQuery to add to the onload events and change

window.onload = function() {

…to:

jQuery(function() { ...

But you can use whatever library or ‘polite’ onload handler you want. However, if the Twitter code is the only JavaScript on your page – you can keep it as is.

16 Responses to “How to add Twitter to your blog, without it hanging your site”

  1. Excellent tip. I might just implement this myself to avoid the horrible Twitter flash interface (which I only used because of the hanging issue).

    I had even contemplated using an iFrame…

  2. [...] Add Twitter to your blog, without it hanging your site [...]

  3. This sounds perfect but I am not sure I quite understand how to implement it, any chance you could explain in a bit more detail? where do I put the code you posted? does it replace the code that twitter.com says to use? or do you have to put it somewhere else? (sorry for being a bit stupid!)

  4. @Jim – you should follow the directions Twitter outline on their web site, with the exception of including the external script via the <script> tag. That should be replaced with the above example.

    If you’re still not clear, let me know and I’ll write up a detailed post.

  5. heh sorry still not having much luck! :(

  6. sorry to be a pain in the ass but I was wondering if you could post a detailed post (if you have time) as twitter is slowing down my site (grr its a pain) and I would love it if I can could implement your idea

  7. I’ve been all over the twitter.com site and can’t find anything even remotely relating to putting anything on a blog – they seem to be pushing the phone and IM thing.

  8. [...] stats | Twittown Blog – The Unofficial … 60. The Obvious?: Twitter and the digital divide 61. How to add Twitter to your blog, without it hanging your site 62. cellity tweeter – THE mobile Twitter client / free download 63. InfoQ: A Twitter in a Teapot? [...]

  9. [...] there are some brilliant workaround out there, a very clever one by Remy Sharp. [...]

  10. Really useful article for a Twitter newbie like me. Others may find this link useful – to be able to create Twitter jaavscript badges as mentioned above:

    http://twitter.com/badges/html

  11. Thanks for this – it’ll be really useful in setting up on a corporate blog.

    Stumbled! :)

  12. [...] Hoe je trouwens je twitterfeed kunt implementeren in je website, zoals ik dat rechts heb, lees je hier. De echte twitteraar had trouwens waarschijnlijk al gezien dat dit niet het orginele icoontje is. [...]

  13. [...] Add Twitter to your blog, without it hanging your site [...]

  14. This doesn’t work in Opera on subsequent page visits (reload). Even the default recommended way (which hangs your site) doesn’t work.

    To fix the issue, add a random number to the end of the JSON request URL.

    In short:

    if (!window.opera){
    jsonURL;
    }
    else {
    var a = new Data();
    jsonURL + “&operaCacheBuster=” + a.getTime();
    }
    This will append the time in milliseconds (which is always going to be greater than the last time).

  15. Man You are a savior, this lil article saved Me and I know it has also for many more. Thanks for sharing & creating such a pleasant atmosphere. STRAIGHTALK

    Norman Flecha
    http:straightalk.biz

  16. Quesiton: How can I shut off the timestamp? Meaning I don’t want to display it.

    Thanks,
    ST

Leave a Reply
Not required

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