Stairwellblog

I swear on every new project I start, I’m always recreating the same old twitter sidebar widget. NEVER AGAIN! I finally sat down and made an extremely generic widget that with some css tweaking, should be able to fit into every project.

A few minor features it includes:

• Linkifying twitter text — adds links to #hash tags, @replys and standard links.
• TimeAgo function — The twitter API sends the time the tweet was created using a funky time format. This function returns it in a more pretty form such as “3 hours and 26 minutes ago.”
• Loading icon until tweets are received from the twitter API.
• Fade-in (and out) javascript effect.
• Gets users avatar

As far as the jQuery templating was concerned, the process is very easy to setup.

First, you take your markup that will be the template and add it between two script tags at the top/bottom of your page. For the “type” attribute of the script, set it to “text/html”. Next inside your template replace the content you want to be dynamic with the following syntax: {%= variableName %}. You’ll notice the opening and closing tags, the equal sign (which is used to write the variable to the screen), and the variable name. Also, make sure you remember the variable names, because we will be using them later when we load this template in our javascript. Also, note that any code you put between {% %} tags will be rendered as javascript.

I am unable to include script tags inside this post, but I’ll add in the html so you can see what it looks like:

1
{% if($i == 0){ %}

1
2
3
4
5
6
7
8
9
10
11
12
13
{% }else{ %}

<div class="tweetCntr mt30">

{% } %}

<div class="avatarCntr"><img class="avatar" src="{%= avatar %}" alt="avatar" /></div>

<div class="textCntr">

        

{%= text %}



<div class="extras">

            <span class="username">{%= user %}</span>

            <span class="time">{%= timeAgo %}</span></div>

</div>

</div>

In the beginning of the template  you will see I have some conditionals set up; those are just plain ole javascript conditionals. One last thing, the variable $i is a variable fromt he templating plugin that counts the number of iterations of this specific template. Typically we will send our templates an array of objects and this variable keeps count of which object we are on.

Pretty simple, right?

The next part to getting the templating going is to initialize it in our javascript. In the code below I have a function that gets called after the twitter API returns its data. The variable “data” holds all of the twitter data, so any properties within that object are ones assigned via the API.

Now the first thing we have to do is to create an array of objects that we will pass to the template we just made. In this case, I have a for loop set up that iterates over an array of objects that the twitter API sent me back. In the for loop, I create another object that holds the key-value pairs I will be sending into the template. The two function you see in there, linkify() and timeAgo(), are the functions I was speaking about in the introduction. After the loop completes, we will have an array of objects, and the keys to all of the objects correspond to the variable names we used in our template.

1
2
3
4
5
6
7
8
9
10
11
12
13
//this function gets used as a call back in the getTweets function call - after json callback

    startTwitter = function(data){



        var dataArr = [];



        for(a = 0; a < data.length; a++){

            dataArr.push({avatar: data[a]['user']['profile_image_url'], text: linkify(data[a].text), timeAgo: timeAgo(data[a]['created_at'], null, 4), user: data[a].user.screen_name});

        }



        $('#tweetMarkup').render(dataArr).appendTo('#tweetsCntr');



        twitterObj.loaderOff();

    }

Easy enough.

Next, we grab the jQuery object of our template – $(‘#tweetMarkup’) – and then call the .render() function while passing in our dataArr we created in the for loop. The render() function returns us our templates rendered into a big string, and the .appendTo() function adds the string into the DOM and prints it onto the page.

Well thats about it, I hope someone out there finds this little demo useful. I have attached a .zip file of the code so you can try it out. I also had some help writing the timeAgo and linkify functions, which is documented in the main.js file.

Demo Page Files (.zip)

Last 5 posts by Bryant

• SXSW 2010 - March 29th, 2010
• Abstracting the web, the iPad, and print media coming full circle. - February 15th, 2010
• Awesome Dev+Design Playground - January 28th, 2010
• 8 things Ushering in the "New School" of Web Development, Part 1 - December 29th, 2009
• A "new era" of web design...poster design - December 8th, 2009