Working with Twitter's Search API, JSON and JavaScript 15 August 2010

These tutorials are intended for the web developer who has a good understanding of CSS and HTML, but is a JavaScript novice.

The tutorials will show you how to directly query Twitter's Search API and programatically access any API response, updating the webpage appropriately, using JavaScript.

To start, create an HTML document ('index.html') and documents for your JavaScript and CSS ('script.js' and 'style.css'), all within the same directory.

The tutorial uses the jQuery JavaScript library, which is hosted by google, so instead you can include the file in your HTML document head like so:


<!DOCTYPE HTML>
<html>
<head>
<title>Twiter, APIs and JavaScript</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script src="script.js"></script>
<link  href="style.css" type="text/css" media="screen">

</head>

<body>
</body>
</html>

Twitter's Search API is well documented over at http://dev.twitter.com/doc/get/search. The documentation is thorough and includes example API requests.

Referring to the documentation you'll see all API requests are made to "http://search.twitter.com/search". Anything the API sends back in response to your request can be in one of two formats: JSON or ATOM.

To indicate your what format you want, attach '.fromat to the end of the URL. We want returned data to be formatted in JSON, for reasons I'll explain later. So our request URL now looks like this:

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

Any API requests require one parameter, q, which is the search query. If you're interested in the latest tweets by Amnesty International, your query would look like this: 

http://search.twitter.com/search.json?q=from%3Aamnesty

// %3A is the entity representation of a colon.

Understanding JSON

Before we query Twitter's Search API, we should know a little about JSON and how we can programatically access it in order to integrate it into our webpage.

JSON is a lightweight data interchange format which can be used to exchange data between programs. It is very readable, by computers and humans. Below is a JSON representation of a single tweet (with some fields removed):


{
    "profile_image_url": "http://a2.twimg.com/profile_images/689786686/ai-avatar_normal.jpg",
    "created_at": "Fri, 13 Aug 2010 15:00:05 +0000",
    "from_user": "amnesty",
    "text": "Huge summer #sale happening in our store now! Support #HumanRights while you shop.  And get Free Shipping & and stickers! http://ow.ly/2pd5B",
    "id": 21070646798,
    "from_user_id": 142293
}

The 6 lines wrapped with the curly brackets represent a JSON object. Each line within the object consists of a name/value pair.

When developing interesting websites with JavaScript, JSON is the perfect format for data exchange, because a JSON object maps perfectly to a JavaScript object.

In JavaScript, an object is a container of properties. A property consists of a name and a value. Sounds familiar, doesn't it?

If we can work with JavaScript objects, we can work with JSON. So, in the next part of this tutorial, we'll create an array of JavaScript objects, and learn how we access individual name/value pairs from it, appending what we want to DOM elements in our webpage.

AHOY THERE!

We're an Agile web development duo operating from a tiny dinghy currently moored off France. We build accessible, standards driven web solutions using the power of the Ruby on Rails web development framework and efficiency of agile processes... more»

RECENT PROJECTS

RECENT POSTS