7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. Web Development

Create a Fun Tweet Counter With jQuery

Read Time: 8 mins

In this tutorial, we will look at using jQuery to call Twitter’s API and then use the results to create a widget for a blog or personal website that shows what hours during the day we tweet at the most.

The Twitter API is HTTP based, and can return results either as XML or JSON. As jQuery has a JSON
parser built-in, and tends to be lighter weight than XML, we’ll use that.


Since our widget will need to show the hourly usage visually, we’ll use a charting jQuery plugin called
to generate a graph of tweeting hours.

Final Product

When all is done, our widget should look like this.

Widget Final Preview

To make this happen, we’ll need to write some Javascript which performs the following:

  • Construct a URL to call the Twitter API
  • Parse the results as JSON
  • Enumerate through results, fetching the items we need
  • Use the items to create a set of data for the chart
  • Render the chart
  • Perform any final UI finishing touches

Lastly, once we have the code working, we’ll turn it into a jQuery plugin for
easy future use.

Step 1: Determining the Twitter API URL

Twitter API URLTwitter API URLTwitter API URL

There are quite a few extensive tutorials on the internet regarding jQuery and AJAX.
If you’re not familiar with AJAX however, the concept is simple. Javascript will open
up an HTTP connection and fetch the results of a URL. When the download is complete,
a function can be called (callback).

Before we can use AJAX, we need to construct the API URL that we’ll be calling.
Twitter has an extensive API which you can reference
(Twitter API Documentation),
but for this widget, we’ll only be performing a basic search.

The base URL for the search method is:

Query String Parameters

We can pass the parameters just like we would a regular JavaScript method, but we pass them
as query string values. The parameters we are interested in are:

  • "q" which is what we are searching for
  • "rpp" which lets us specify how many results we’d like
    returned (for this widget we'll do 50).

Also, since we’re going to be using AJAX to download
data from another domain (twitter.com), we’ll need to use JSONP which allows us to forgo the security
concerns within the browser. JQuery automatically will handle this for us, we just need to
attach "callback=(function name)" to our URL. Since we’ll be using an anonymous function,
this value will be "?".

Our final URL for the Twitter API

Step 2: Executing the API Call

JSON result in FireBugJSON result in FireBugJSON result in FireBug


Now that we know where we’re going to make the call, we can write some Javascript to actually
perform it. JQuery includes a method that will handle the entire AJAX call for us,
and parse the JSON results, returning objects. That method is $.getJSON(). It takes two parameters, one for the URL,
and one for the callback function.

Step 3: Enumertaing Results

The results coming back from Twitter resemble the following structure.

Notice that the objects which contain the data we want are child objects of a child object.
For our widget we’ll attempt to find the "results" collection object by looking for two
things: the item which has a length (it’s an array) and the item which has children
items that have the property "created_at". Once we find
this parent item, we can loop through it to assemble our data.

Step 4: Building Our Data Set to Display

Widget Final Preview

Recall that we will be creating a widget that shows a chart of our hourly tweets.
In order to create the chart, we’ll need to assemble that data in an array. We can do this by
turning the "created_at" property into a Date() object then extracting the hour (0-24).
We’ll keep an array called "usageData" which we will increment to keep track of how many tweets per hour.
We’ll use a for loop to go through each item, and simply add to the usageData array
when that hour is found.

This should fill usageData with values like...

Step 5: Rendering the UI

If you haven’t yet downloaded Sparklines plugin, go ahead and do that now, and then drop
the script file reference on to your page.

Before we call the chart code, we need to create a container tag for it to exist in. Somewhere
on your page, add a div with class “twitterUsage”. We’ll access this from jQuery in the code to
create our chart.

Sparklines is very simple to use. We simply need to call the sparkline() method off of any
jQuery wrapped set to create a new chart inside of that element. After we’ve created our chart,
we’ll add a short summary line describing what the chart data represents (tweets per hour).

Our whole head section should now look like this.

Run the code, and you should get something that resembles the following.

Step 6: Adding Design

For this widget, I’d like to see the chart overlaying the Twitter logo,
so I’ll set that as the background-image on the div. I’ll also throw a bit of
font and color styling on the description text as well. (Note: The twitter logo
background file is available in the source files. It is 120px wide if you prefer
to create it yourself.)

Lastly, we can adjust the sparklines() method to include some styling options:

Step 7. Converting Our Widget to a Plugin

The last thing we need to do is convert our working widget into a plugin.
Because our widget is not too complex, this will be as simple as copying our code
to an external file, defining $ as jQuery, and adding our code an extension method
to the jQuery object. (Note also the slight change to .insertAfter)

Create a new javascript file called "jquery.twittergraph.js".
Paste the following into the file (or type out the changes yourself if you prefer).

We can now call our widget with:

The complete code for our HTML page is as follows.

Widget Final Preview

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.