How to show your latest tweet in your home page?

Recently I’ve re-designed my home page veerasundar.com. I thought that adding my recent twitter status would spice up my home page little bit. I’ve seen this kind of status messages in many websites with the help of plug-ins. But I wanted use my JQuery knowledge. So, i started with the coding from scratch. My plan was really simple. I knew that JQuery has a AJAX function $.get(), which will do a HTTP GET request to a remote URL. I decided to use this function to make a call to Twitter API which will send me my recent tweet. But, the plan was obviously failed.

Access to restricted URI denied” code: 1012

Twitter has a API method statuses/user_timeline, with a parameter ‘count’. If we pass 1 to this ‘count’, the Twitter will return the recent status. For example, to get a user abcd’s recent tweet, the GET url will look like:

http://twitter.com/statuses/user_timeline/abcd.xml?count=1

But when I made a get request to this URL, Firefox returned me an error saying “Access to restricted URI denied” code: 1012″, which means that due to security reasons, it’s not possible to make a JS call to other domains. So, to resolve this problem, one solution would be making a call to a PHP program located in the same server, which will make a call to Twitter API and then will send us the twitter status. Thus, making a cross-domain JS call would be avoided.

PHP program to retrieve last twitter status:

Then I started with the PHP code which will act as a twitter status retriever for my page. Below is the code for my ‘twitter.php’.

<?php $twit = file_get_contents("http://twitter.com/statuses/user_timeline/abcd.xml?count=1"); echo $twit; ?>

So simple, isn’t it!? Next challenge is to get the XML content returned by Twitter server and to parse it to get the actual status message.

Parsing Twitter XML using JQuery

JQuery comes to rescue here. JQuery is a great library with in-built functions for parsing XML content. Below is the JQuery code to parse the Twitter XML response.

$.ajax({
			   type: "GET",
			   url: "twitter.php",
			   success: function(msg){
				$status ="";
				$tweets = "";
				$followers = "";
				 $(msg).find("text").each(function(){
					$status = "From Twitter: "+$(this).html();
				 });

				 $(msg).find("statuses_count").each(function(){
					$tweets = $(this).html();
				 });

				 $(msg).find("followers_count").each(function(){
					$followers = $(this).html();
				 });

			   }
			 });

So, that’s it. Now we have the twitter details in JavaScript variables $status, $tweets and $followers. Next we just need to replace this data in the web page.

Please let me know if this information is helpful to you. Please say in comments, if there is any better way to do this. And, thanks to Vinay Raikar for helping me in the initial stage.