Adding Twitter to your site with jQuery Part 1

For this example I will use my own tweets, feel free to follow me @jaredharbour.

What is Twitter?

In recent years, social media has become a huge part of peoples lives. Sites like MySpace, Facebook and LinkedIn (which I sometimes refer to as ‘The Big Three’) allow people from all over the world connect and share their lives and ideas instantly. Recently Twitter has become the next big addition to the global conversation. Twitter is unique among the others in that its only function is to accept and display 140 character “micro-blogs”. Let me get one thing out of the way before we continue, micro-blogging doesn’t mean every message has to be about taking out the trash and mowing the lawn. There are 5 million+ Twitter users in the world today, and that number will only get bigger. Now lets get into some code.

The Twitter API

The Twitter API attempts to conform to the principals of Representational State Transfer or REST. I’ll leave it to you to read up on what that means, simply put it means that with the Twitter API you simply need to change the extension to get your results in a different format.

http://search.twitter.com/search.format

Since we just want to print out a list of tweets, we will start by using the search function. The search function will return its results in two formats, XML and JSON. We will use JSON because in my experience it’s faster and easier to use than XML.

http://search.twitter.com/search.json

For a more in depth look at the search function take a look at the Twitter documentation. Now lets get to the jQuery part. We get to use one of my favorite methods jQuery gives us, jquery.getJSON. This handy function will return the JSON via a GET HTTP request, just what the doctor ordered.

$.getJSON(
    'http://search.twitter.com/search.json?callback=?&rpp=25&q=from:jaredharbour',
    function(data) {
        // our code to handle the data here
    }
);

That’s not all though, we need to get at our data. jQuery makes it easy with the each function. This will let us loop through the JSON object with ease. In this case, “tweets” becomes our array of data. Then we need to check a few things to make sure we are in the section of the object we want. This logic isn’t perfect, but it will work for all the major browsers. The first and second if statements are to check if there are tweets to look at. I needed them both because it seems IE was unhappy with accessing the first element, because in some cases there isn’t one. The third if statement makes sure that what we’re looking at is in fact a tweet, and not some random piece of data.

$.each(data, function(i, tweets){
	if (tweets.length != undefined){
		if (tweets[0] != undefined){
			if (tweets[0].created_at != undefined){

			}
		}
	}
});

Now we just need to print out some data. Just a simple for loop and a document.write and we’re all set.

for(var i = 0; i < tweets.length; i++){
    document.write("
"+tweets[i].text+"
"); }

That’s all there is to it! In the next post I will get into formatting the tweets to add more functionality. Here are some of the topics I will cover later in the series.

  • Hyperlinking hash tags and users
  • Formatting tweet time and date
  • Linking to the Twitter app

Have a question? Looking for something specific? Leave a comment and I’ll get back to you!

7 Comments

  1. […] Read more: Adding Twitter to your site with jQuery Part 1 […]



  2. Ryan on July 29, 2009 at 11:24 am

    Good stuff!
    I’m looking forward to the next part because I have this setup for demo purposes but I’m having issues formatting the time and date.



    • Jared on August 6, 2009 at 1:22 pm

      Glad you liked it :)

      I’m currently working on Part 2, should be done in a couple days.



  3. Lew A on August 9, 2009 at 12:58 pm

    Do you know if this has the same API restrictions as other methods? Specifically the number of queries in one hour.

    Thanks,
    Lew



    • Jared on August 11, 2009 at 7:01 am

      Yes this does have those same restrictions. Twitter recently increased the limit from 100 to 150 API calls per hour, and that’s also from the same IP address.

      So for example, if you were to set up a twitter search to auto refresh, as long as you set it to update once every 30 seconds you would still be within the 150 maximum calls allowed.



  4. DeathfireD on August 14, 2009 at 2:34 pm

    Where’s part 2 Jared? When can we expect it?



    • Jared on August 22, 2009 at 11:25 pm

      Part 2 is finally done, enjoy :)