Most of the personal blogs these days have twitter feeds. One of the bottleneck while loading the page in the site is Twitter, since it takes time to load the tweets. There is a technique that I have used for my site which can be handy in loading the twitter feeds fast. Basically, I have used cookies to store my twitter updates and display the updates by reading the cookies. (Obviously, this won’t work if you have disabled cookies in your browser settings).

So let’s dive into the code. First I will show you the JavaScript functions I have used to set/read/delete cookie. Create a JavaScript file : “fasttwittter.js” or any name you want.

Note: I am specifying my cookie expiry in hours. If you want to do that in seconds then remove both the “60″s from the createCookie function and if you want to set it in minutes then remove only one “60″ and if you want to set it for days then multiply below value by 24. i.e seconds*24*60*60*1000.

function createCookie(name,value,hours) {
if (hours) {
var date = new Date();
date.setTime(date.getTime()+(hours*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

Now we are ready with our cookie related functions. And now the real trick: Twitter update uses a JavaScript file called “blogger.js”. We will have to download this script and modify it and use it from our site instead of using the one from Twitter. Hence go to following URL : http://twitter.com/javascripts/blogger.js and save this script on your system.

Now we have to modify this script to save the feeds into the cookie instead of displaying it on your site.

In the blogger.js, replace the last line i.e document.getElementById(‘twitter_update_list’).innerHTML … etc … with following line
createCookie(‘twittercook’,statusHTML.join(”),1); // 1 => Number of expiry hours in this example.

Now lets go back to the “fasttwitter.js” file, where we had written the JavaScript functions and lets add one more function over there.

function loadTweet() {
document.getElementById('twitter_update_list').innerHTML
= readCookie('twittercook');
// Twittercook is the name of the cookie I have specified. You can use any name you want
}

Above function will display “Twitter feeds” from the cookie instead of the site.
Now the call to the above function:

Note: I am using PHP to check if my cookie is set or not. You can even do that with JavaScript or other language if your site is not in PHP

<?php if(trim($_COOKIE['twittercook']) == "") { ?> //Checks if the cookie is set with the twitter feed, if not then fetch the latest tweets from twitter
<script type="text/javascript" src="[yoursite]/js/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/[yourusername].json?callback=twitterCallback2&amp;count=[count_of_tweets]"></script>
<?php } ?>
<script type="text/javascript">loadTweet()</script> //Function call to display the tweets
<?php } ?>


Now, my twitter won’t take ages to load. If you are someone who tweets every minute, then make sure you set the cookie expiry to minutes and not hours like in this example.