How To Stream Twitter Tweets on Your Website Using JavaScript

You might have seen Twitter feed boxes in the sidebars of websites such as www.cartoonbarry.com. Did you ever wonder how those self-updating widgets work? They're made possible by a data format called RSS (and ATOM and XML) and a little bit of JavaScript. I'm going to show you how to create one yourself so you can fully customize it to your liking. You can also do it purely in PHP server-side without JavaScript, but I'll show you why that might not be the best idea.

As they say in G.I. Joe, knowing is half the battle. So, first you have to find at which URL you can access the Tweets you are looking for in the format that you desire. If you go to http://search.twitter.com, search for #apple to find tweets about Apple, look for a little RSS icon that looks like this  and click on it, or simply visit this URL: http://search.twitter.com/search.atom?q=%23apple. Depending on your web browser you'll either see the raw XML or a formatted page of Tweets. In the latter case, press CTRL + U to view the raw XML.

So now that we have the raw XML, how can we use it to put a feed on our own website? There are three methods we could use:
1. All server-side: Within your site's PHP/ASP/JSP code, grab the XML data from Twitter and process it while the page is being generated and output HTML.
2. Partly server-side & Partly client-side: Use an AJAX call to a function on your server which in turn loads the XML data from Twitter, processes it, and returns HTML or an object representing the tweets to display.
3. All client-side: Entirely client-side, with JavaScript, generate an on-the-fly script element which grabs the XML data from Twitter and processes it using your JavaScript functions.

Method 1: All server side
Using this method, we get the XML data using a PHP call, then process it using an XML parser.

  <?php  /* PHP Code */
try{
 // get raw data as a string
 $xml_data = file_get_contents("http://search.twitter.com/search.atom?q=%23apple");
  
if(strlen($xml_data) < 25){
 // Not enough data
 throw new Exception("No tweets right now.");
 }
 
 $doc = new DOMDocument();
 $doc->preserveWhiteSpace = false;
 if( ! $doc->loadXML($xml_data) ){
 // Failed Loading XML Doc
 throw new Exception("No tweets right now."); 
 }
  
$array = array();
  
// Get Tweets
 $entries = $doc->getElementsByTagName("entry");
  
// display 5 tweets at max
 $max = 5;
 if($entries){
 foreach($entries as $node){
 // parse out different XML elements for each tweet
 
 $tags = $node->getElementsByTagName("name"); // Username who wrote the tweet
 $name = $tags->item(0)->nodeValue;
 $tags = $node->getElementsByTagName("title"); // Title is the raw tweet without any HTML anchor tags
 $title = $tags->item(0)->nodeValue;
 $tags = $node->getElementsByTagName("content"); // Content is the tweet with HTML anchor tags applied
 $content = $tags->item(0)->nodeValue;
 $tags = $node->getElementsByTagName("link");
 $link = $tags->item(0)->nodeValue; // a link to the tweet
 $tags = $node->getElementsByTagName("published");
 $date = $tags->item(0)->nodeValue;
 $date = date("d M Y",strtotime($date));
 
 echo "<p class='title'><span class='author'>$name</span>: $title <span class='date'>$date</span></p>";
 
 if(--$max <= 0){
 break;
 }
 
 }
 
 ?>
 
 <?
 } else {
 throw new Exception("No Tweets right now.");  
 }
 
 }catch(Exception $e){
 echo $e->getMessage();
 }
 ?>

This method is the easiest and works fine if you're just starting out. The problem is that every time the page loads, it has to get the data from Twitter on the server -- which will lock up the server and the browser until the data is obtained. That means your page will take more seconds to load for the user. Also, you have to refresh the page in order to see the new data.

Method 2: Part Server-side, Part Client-side
In this method we make the user browser more responsive by loading the tweets with an AJAX request to your server, so the speed of availability of Twitter's server will not affect the loading of the rest of your page content.
We'll use the same PHP code as above, and lets assume it is in a file called ajax_get_tweets.php. I'll also assume we're using the handy jQuery javascript library to handle AJAX requests.

  <!-- HTML Code -->  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    <div id="tweet_stream">  Loading #Apple tweets...  </div>  <script type="text/javascript">  jQuery(function(){  // Execute this code when the page is ready to work  // Submit an ajax request to our PHP page and load the HTML response in to div#tweet_stream   $("#tweet_stream").load("ajax_get_tweets.php");  });  </script>  

Using this method, getting the tweets will not delay the downloading of the rest of our page because it is performed parallel in another HTTP request. However, the tweets will not show up to search engines (this is probably a good thing). Another disadvantage: if your site has a lot of page views, your server will be constantly hitting Twitter for updates, which means more bandwidth strain on your server.

Method 3: All Client-side
Using this method completely takes the strain off of your webserver and in fact only requires HTML and JavaScript, but in particular only works with services that use what is called JavaScript callbacks to provide data (so it won't work with general RSS feeds). Usually if a service supports what is called JSON (wiki), it will support this method.

  <!-- HTML Code -->  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    <div id="tweet_stream">  Loading #Apple tweets...  </div>  <script type="text/javascript">  jQuery(function(){  // Execute this code when the page is ready to work
// Create a Script Tag
 var script=document.createElement('script');
 script.type='text/javascript';
 script.src= "http://search.twitter.com/search.json?&q=%23Apple&callback=processTheseTweets&_="+ new Date().getTime();
// Add the Script to the Body element, which will in turn load the script and run it.
 $("body").append(script);
});
  
function processTheseTweets(jsonData){
var shtml = '';
 var results = jsonData.results;
 if(results){
// if there are results (it should be an array), loop through it with a jQuery function
 $.each(results, function(index,value){
 shtml += "<p class='title'><span class='author'>" + value.from_user + "</span>: " +
 value.text + "<span class='date'>" + value.created_at + "</span></p>";
 });
  
// Load the HTML in the #tweet_stream div
 $("#tweet_stream").html( shtml );
 }
}
</script>

A lot has changed with this method. There is no PHP script to work with, and the URL to grab the Tweets has changed a little bit. Previous methods used:
http://search.twitter.com/search.atom?q=%23Apple
But now we have:
http://search.twitter.com/search.json?q=%23Apple&callback=processTheseTweets&_=" + new Date().getTime();
"json" is used instead of "atom" because, while atom is an XML data format, json is a JavaScript Object Notation format that JavaScript can handle easily. When we add &callback=processTheseTweets to the URL, Twitter prepends the data with "processTheseTweets(" and appends it with ")". This simple change causes the web browser to execute the function of name "processTheseTweets" with the JSON data between ( and ) as the only parameter. After all, we're loading and executing a SCRIPT tag. We add + new Date().getTime() to the end to prevent the browser from caching the response, ensuring we always get the most recent data.

Our function then loops through each element in the array, applies HTML tags, and finally loads the HTML into a DIV.

Use of Method 3 means all HTTP requests to Twitter will be done directly from the user's browser, and NOT your server. The downside? You're giving full control of your web page to Twitter since you are loading a script from them. You hope it will not be malicious (i.e. insert ads or other content, or process the user's cookies), but you cannot guarantee that ideal, which is why it is especially NOT recommended when loading scripts from unknown third parties.

Exercises for the Reader:

1. Change the code to load tweets To and From a specific Twitter user, instead of the hash tag #Apple as used in the examples above.
2. Modify method 2 or 3 to automatically get new tweets every 10 seconds.
3. Take a search query by user input and display the resulting tweets.
4. Use method 1 or 2 to display recent blog posts or YouTube videos from your favorite blog or YouTube channel.