boazsender · August 10, 2010 07:38
diff --git a/index.html b/index.html
 <!DOCTYPE html> 
 <html>
  <head> 
    <title>Dead Simple Twitter Search API jQuery Feed</title> 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="jQuery.twitterFeed.js"></script>
    <link href="jQuery.twitterFeed.css" media="screen" rel="stylesheet" type="text/css" /> 
  </head> 
  <body> 
    <h1>Twitter Posts:</h1>
    <div class="twitter-posts"><h3>Loading Tweets From The Cloud With AJAX HTML5...</h3></div>
  </body> 
 </html>
diff --git a/jQuery.twitterFeed.css b/jQuery.twitterFeed.css
 .twitter-posts li       {margin-bottom: 10px; font-size: 12px; clear: both; list-style-type:none;}
 .twitter-posts li img   {float:left; margin:0px 10px 10px 0px;border:1px solid #c2c2c2; -moz-box-shadow: 0px 0px 4px #c2c2c2;  -webkit-box-shadow: 0px 0px 4px #c2c2c2; box-shadow: 0px 0px 4px #c2c2c2;}
diff --git a/jQuery.twitterFeed.js b/jQuery.twitterFeed.js
 $(function(){
  // Get the JSON of your twitter search, it helps to format these over at search.twitter.com
  $.getJSON('http://search.twitter.com/search.json?q=%40bocoup&callback=?', function(tweets){ 
    var $tweets = $('<ul>')          // The variable we'll store our tweets in

    for(var i = 0; i < 5; i++){      // Lets get five tweets. Change this to for(var i in tweets.results) get all available results

      var tweet = tweets.results[i], // A variable representing each tweet (for cleanliness sake)
        $tweet = $('<li>');	     // The variable we'll temporarily store each tweet in
    	
        // Make the avatare, and append it to the $tweet
        $('<a/>', {
          href: 'http://twitter.com/' + tweet.from_user,
          html: '<img src="' + tweet.profile_image_url + '"/>'
        }).appendTo($tweet);
    		
        // Make the tweet text, and append it to the $tweet
        $('<span>', {
          className: 'content',
          html: '<strong><a href="http://twitter.com/' + tweet.from_user + '">@' + tweet.from_user + '</a>: ' + tweet.text + '</strong>'
        }).appendTo($tweet);
    		
        // Append the $tweet to the $tweets
        $tweet.appendTo($tweets);
    }
    
    // Clear out the loading text
    $('.twitter-posts').html('')
    
    // Append the $tweets to the DOM
    $tweets.appendTo('.twitter-posts')

  });
 });
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dead Simple Twitter Search API jQuery Feed</title>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="jQuery.twitterFeed.js"></script>
	<link href="jQuery.twitterFeed.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<h1>Twitter Posts:</h1>
	<div class="twitter-posts"><h3>Loading Tweets From The Cloud With AJAX HTML5...</h3></div>
	</body>
	</html>
	.twitter-posts li {margin-bottom: 10px; font-size: 12px; clear: both; list-style-type:none;}
	.twitter-posts li img {float:left; margin:0px 10px 10px 0px;border:1px solid #c2c2c2; -moz-box-shadow: 0px 0px 4px #c2c2c2; -webkit-box-shadow: 0px 0px 4px #c2c2c2; box-shadow: 0px 0px 4px #c2c2c2;}
	$(function(){
	// Get the JSON of your twitter search, it helps to format these over at search.twitter.com
	$.getJSON('http://search.twitter.com/search.json?q=%40bocoup&callback=?', function(tweets){
	var $tweets = $('<ul>') // The variable we'll store our tweets in

	for(var i = 0; i < 5; i++){ // Lets get five tweets. Change this to for(var i in tweets.results) get all available results

	var tweet = tweets.results[i], // A variable representing each tweet (for cleanliness sake)
	$tweet = $('<li>'); // The variable we'll temporarily store each tweet in

	// Make the avatare, and append it to the $tweet
	$('<a/>', {
	href: 'http://twitter.com/' + tweet.from_user,
	html: '<img src="' + tweet.profile_image_url + '"/>'
	}).appendTo($tweet);

	// Make the tweet text, and append it to the $tweet
	$('<span>', {
	className: 'content',
	html: '<strong><a href="http://twitter.com/' + tweet.from_user + '">@' + tweet.from_user + '</a>: ' + tweet.text + '</strong>'
	}).appendTo($tweet);

	// Append the $tweet to the $tweets
	$tweet.appendTo($tweets);
	}

	// Clear out the loading text
	$('.twitter-posts').html('')

	// Append the $tweets to the DOM
	$tweets.appendTo('.twitter-posts')

	});
	});