Posted 12.01.2009

Importing a Twitter feed using jQuery

I’m going to cheat slightly.

I’m going to start jQuery week off with implementing a Twitter feed (instead of a Vimeo feed). Twitter is the easiest, so we can build up to the harder stuff. Hopefully after you read this post, you won’t feel slighted, either.

Obviously

Obviously, you’ll need to go to jQuery.com and download the jQuery library.

Then, you’ll want to head over to Sea of Clouds and download their Twitter plugin. Their documentation is pretty straightforward. But, I’ll walk through the implementation process with you.

You’ll put the JavaScipt and CSS documents in their respective places (I keep all my javascript in a js folder and my CSS in a css folder).

In the head of your HTML document, you’ll want to link up all the files


<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>  
<
script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tweet.js" type="text/javascript" charset="utf-8"></script> 

Then, where you want the Twitter feed to appear, you’ll need to create some kind of hook. For example:


<div id="twitter_feed"></div

Next, you’ll initialize the Twitter plugin:


<script type='text/javascript'>
    $(
document).ready(function(){
        
$("#twitter_feed").tweet({
            username
"ahaywood",
            
join_text"auto",
            
avatar_size32,
            
count3,
            
auto_join_text_default"I said,",
            
auto_join_text_ed"I",
            
auto_join_text_ing"I were",
            
auto_join_text_reply"I replied to",
            
auto_join_text_url"I were checking out",
            
loading_text"loading tweets..."
        
});
    
});
</script> 

The hook you created, is what you will use to call the .tweet() function.

The cool thing about this plugin is you can also perform a Twitter Search feed. When you initialize the plugin, you would use the following code instead:


$("#twitter_feed").tweet({
    avatar_size
32,
    
count4,
    
query"amyhaywood.com",
    
loading_text"searching twitter..."
}); 

Now, everyone who mentioned amyhaywood.com in their Twitter would appear.

Lastly, you can pass an array into the username field. So, if you wanted more than one user’s tweets to appear, it would automatically sort them by time.


username["ahaywood""shaywood""dgirardier""awakeland3d""lecampbell"]

I told you this one was pretty easy. Next up? YouTube on Thursday.