Howsthe.com? - Website Monitoring

The world of jQuery is kind of like the iPhone app store. Just like “there’s an app for that”, if you want to do something specific with jQuery, there’s probably a plugin for it. And just like the iPhone app store, the quality of the items you find can vary from utter garbage to brilliant masterpieces. The jQuery Twitter library known as jTwitter falls somewhere in the middle. It has some decent functionality, and can definitely prove useful if you aren’t able to make use of any of the more robust options out there (such as any of the server-side libraries or the API itself).

What it Does
jTwitter does one thing: it allows you to retrieve and display recent Twitter posts for a specified Twitter user. The demo provided is a good starting point, but it only goes as far as showing you the basics of querying for posts and displaying the results. I’m going to take this a step further and show you how you can extend this with additional Javascript to make the results somewhat more useful. To better follow along with this tutorial, I recommend downloading the full tutorial source.

The Goal of This Example
In short, the goal of this example is this:

Display the Twitter user account information along with the ten most recent Twitter posts. Within the posts, all URLs are hyperlinked, as are all Twitter usernames, back to their Twitter pages. The example uses my Twitter account, but as you will soon see, this aspect is very simple to change.

NOTE: The HTML and Javascript shown here does not cover the CSS being used to render the contents in a certain way and make it look pretty like above. This CSS is all included in the sample file, so if you would like to see exactly how it is doing this, you can review the CSS there.

The Basics
To use jTwitter, you need to include two things on your webpage – the jQuery library and the jTwitter plugin code. You can reference jQuery directly from any number of Content Delivery Networks (including those provided by Microsoft and Google), but jTwitter will have to be downloaded and hosted locally. So, inside your HTML tag, start with the following:

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

Once you have these in place, you can use the jTwitter plugin. The basic call to jTwitter is as follows:

$.jTwitter('charlesboyung', 10, function(data){ });

This call retrieves the 10 most recent posts for Twitter user “charlesboyung” and then provides a callback function with the results in the variable “data”. The results are stored using JSON notation, which provides easy access to the posts and their properties. The full specification of what is stored in the JSON object can be viewed in the plugin documentation. To change the user account that is being displayed, all that you need to do is change the string in this line of code. The plugin demo actually does this by providing a text box that you can use to enter a Twitter username and hit a button to see the results.

Displaying Twitter User Data
Within the callback function, you can use additional jQuery to access elements on the page and display the JSON Twitter data. First, I start by creating some local variables, primarily to reduce the amount of code used later:

var user = data[0].user;

var info = $('#info');
var posts = $('#posts');

Info and posts represent the two <div>’s in the HTML that will be used to render the data from the plugin. Here’s the HTML I used in my document to hold and display the Twitter content:

<h1>Recent Twitter Activity</h1>
<div id="info"></div>
<div id="posts">Getting your tweets...</div>

User is used to store the user data from the first entry in the JSON collection. Since all posts in a Twitter account come from one user, this data does not change, so you can always just use the data from the first post. Once the user object has been retrieved, I use that object to display some summary information about the Twitter account. To display this:

This code is used:

if (user.profile_image_url != '') {
    info.append('<img src="' + user.profile_image_url + '" />');
}

info.append('<div id="account">'
    + ' <h2>' + user.name + '</h2>'
    + ' <div id="followers">' + user.followers_count + ' Followers</div>'
    + ' <div id="summary">' + user.description + '</div>'
    + ' <a href="http://twitter.com/' + user.screen_name + '">Follow Me on Twitter</a>'
    + '</div>');

This just retrieves properties from the JSON object and appends to the contents of the “info” div. It is set up to only include the img tag if there is actually a profile picture associated with the account, so you don’t end up with a broken image. Since I know the Twitter username I am working with, I technically didn’t need to use user.screen_name, but it provides another example of using the JSON object.

Displaying Posts
The next step is to display the posts. I pretty much just copied the code from the demo to do this:

posts.empty();
$.each(data, function(i, post){
    posts.append(
        '<div class="post">'
        +' <div class="txt">'
        +  post.Text
        +' </div>'
        +'</div>'
    );
});

However, this only displays the posts as plain text, it doesn’t create any hyperlinks. To address this, I had to add another jQuery plugin and a few more lines of code. First, to get the URLs to come through as hyperlinks, I am making use of the jQuery text tools library created by James Carr. Once you add the reference to the library, like this:

<script type="text/javascript" src="jquery-text-tools.js"></script>

All you have to do is call the jQuery function link on the text you want the plugin to process. This was accomplished by adding the following line to the code above, just before the posts.append:

var postText = $.link(post.text);

The variable postText now contains the body of the individual post, with hyperlinks for all URLs. In addition to adding this line, I updated the posts.append call to use the postText variable instead of the post object’s Text propery.

The last step is to link Twitter usernames (@anything) to the respective Twitter pages. This is done with a somewhat confusing-looking call to the Javascript replace function. I added the following code right below the line declaring postText:

postText = postText.replace(/@\w+/g, function(username) {
    return '<a href="http://twitter.com/' + username.replace('@', '') + '">' + 
        username + '</a>';
});

Here’s an explanation of what this function is doing: the first parameter of the function call is a regular expression, stating that Javascript should find anything that starts with @ and then goes until a non-word character (or hyphen) is found. With regular expressions, word characters are any alphanumeric characters as well as underscores. Based on my completely unscientific testing (trying to create an account using all of the characters available on my standard keyboard), this covers everything that Twitter allows for usernames, so we’re good in that regard. The /g at the end of the regular expression tells the replace function to replace all instances found within the text, not just the first instance. Without this, at most one

The second parameter of the replace function can be two things: either the text to use as a replacement, or a function call. The function call can be set up with a parameter which represents the specific value being replaced (the result of the regular expression check). Since each instance of a Twitter username within a post may be different, we need to make use of this. The function then returns the value to use as the replacement for each found instance of the regular expression.

In this instance, the function returns a string of HTML that replaces the plain Twitter username with a link to the Twitter page for that user. It does a simple replacement to remove the ‘@’ character from the URL in the hyperlink, but the rest of the call is basic string concatenation. The complete code for this section now renders just like this:

Once you put this together with the user account information display, we now have accomplished our goal.

Next Steps
With the code that is now in place, you can display your Twitter posts on any web page you want. However, this is not the end of what you can do with this code. For example, you could make use of the in_reply_to_status_id field and link to the post that you may have replied to or just change the text color of replies to make them stand out. That’s just an example of the things that you can do with the data that jTwitter provides to you. Play around and see what interesting ideas you can come up with.