Ajax Twitter feed with Scriptaculous
This example shows you how to integrate your Twitter on your website. It uses some custom javascript code, and it also uses the scriptaculous library to use a sliding effect. In this example it will show the 5 latest entries from your Twitter account.
You can see a video of how this works, shown in the demovideo of the template “Personal Homepage”.
We will start with the html file, in this case: index.html. You need to add the following code in the head section:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" /> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script><script type="text/javascript" src="js/ajax.js"></script> |
And then, somewhere in the body tag, you need to add this code (this is the code for showing the Twitter feed).
<body> <div id="twitter" class="list"> <h1>Twitter</h1> <img id="spinner-twitter" alt="spinner" src="#" width="16" height="16" /> <div id="list-twitter" style="display: none;"></div> </div> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/SveinErik.json?callback=twitterCallback2&count=5"></script> </body> |
As you can see in the last line, you can see the name “SveinErik”, that is my Twitter username, so you need to put your own username there. The last thing, the magic, is found in the Ajax.js file (also included in the .zip file), this is where the actual javascript code for both getting the feed from Twitter, and also a function for showing how long ago each status update was written (like 2 days ago etc).
function relative_time(time_value) { var values = time_value.split(" "); time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3]; var parsed_date = Date.parse(time_value); var relative_to = (arguments.length > 1) ? arguments[1] : new Date(); var delta = parseInt((relative_to.getTime() - parsed_date) / 1000); delta = delta + (relative_to.getTimezoneOffset() * 60); if (delta < 60) { return 'less than a minute ago'; } else if (delta < 120) {return 'about a minute ago'; } else if (delta < (60 * 60)) { return (parseInt(delta / 60)).toString() + ' minutes ago'; } else if (delta < (120 * 60)) { return 'about an hour ago'; } else if (delta < (24 * 60 * 60)) { return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago'; } else if (delta < (48 * 60 * 60)) { return '1 day ago';} else { return (parseInt(delta / 86400)).toString() + ' days ago'; } } function twitterCallback2(twitters) { var statusHTML = ""; for (var i = 0; i < twitters.length; i++) { statusHTML += '<li>' + twitters[i].text + ' <small>(' + relative_time(twitters[i].created_at) +')</small></li>'; } $('list-twitter').innerHTML = '<ul>' + statusHTML + '</ul>'; $('spinner-twitter').hide(); $('list-twitter').slideDown({ duration: 2 }); } |
You can download the .zip file, containing a fully working example. This is the same code as used in the template “Personal Homepage”, which also include similiar ajax effects to grab the feed from both Twitter, Delicious and Flickr. It is available for only $9 in the shop.
Good luck!
