Display your Tweets using jQuery + JSON = Easy!

Posted by Ben Winn in Uncategorized on June 14th, 2010

Good Day folks,

Here I have a nice tutorial that will allow you to display your very own Twitter statuses on your own website/blog in the most easiest way possible, yet there are tons of ways of doing this and either require additional plug-ins or additions files… Well scrap those and this one block of code will shorten down your file like you always wanted to do, and I will say this that the code is the one I use on this very website as you see right at the top of the website.

I coded this script to give myself a much easier life and hopefully it will do the same for you!

So let’s get down to it, now you will need the most recent version of jQuery either 1.3.2 or 1.4.2 both will work for this script and it’s been tested on both versions so don’t worry about that… You can download jQuery from www.jquery.com or you can simply use Google’s CDN version of jQuery, as some people prefer this way as you won’t have to manually upgrade your jQuery file here’s the both URL’s for 1.3.2 and 1.4.2:

jQuery 1.4.2

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

jQuery 1.3.2

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

And here’s how to simply add them to your website:

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

Obviously just change the url to jQuery 1.3.2 or 1.4.2 at your choice and make sure to add that inbetween the <head></head> not after! — Just like this example below…

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Your_Website</title>

<!-- include jQuery library (framework) -->

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

</head>

And there you go that’s out of the way, but when using scripts that require the jQuery framework you must always include the framework before you include your own script like this for example:

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Your_Website</title>

<!-- include jQuery library (framework) -->

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

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

</head>

As you can see above, I’ve included jQuery first before my Twitter script, simply why is because if I include the Twitter script before jQuery it will spit out errors as it needs the jQuery framework to work correctly many web developers will tell you this always include the framework before anything else!

Okay, so now that we’ve cleared that out of the air let’s get started on the Twitter script — And the script not fancy just a another boring code but works wonders

Create a file and name it “jquery.tweets.js” (without the double quotes)

And inside this file we’ll start by writing the first function that will get the data we need from the Twitter API server.

Add this to “jquery.tweets.js”
[js]
function twitter()
{
var twitter_username = "your_twitter_username"; // Change this to your Twitter Username!
var twitter_json_file = "http://twitter.com/statuses/user_timeline/"+twitter_username+".json";
$.getJSON(twitter_json_file + "?count=5&callback=?", null, function(data) {
$.each(data, function(i, item) {
$("ul.twitter").append("<li><a href=’http://twitter.com/"+twitter_username+"/statuses/"+item.id+"/’>"+item.text+"</a>
- "+time_ago(item.created_at)+" via "+item.source+"</li>");
});
});
};
[/js]

Above is simple as it gets with using the Twitter API, what we do first is make a function and name it Twitter and then define to variables “twitter_username” and “twitter_json_file” both of these would be used later on in the script as you can see above “twitter_json_file” is used in the $.getJSON(); function this allows jQuery to parse JSON data into simplified data that can appended to any DOM element such as unordered list or just a DIV element the choice is yours on that one!

After that we tell Twitter how many statuses we want so I’ve put 5 now you could always change this to a higher number or lower number such as for lowest 1 or highest 20 again the choice is yours as everyone wouldn’t want 20 tweets filling their entire website or would they?!

After that it’s self explanatory we use $.each() to parse each item that the JSON file sends back to our script not only that we define a object name “item” that can be used to get data from the returned JSON file this just makes our life much easier.

And last make sure to change $(“ul.twitter”) to whatever element your using in your html document such as $(“div#yourdiv”) I won’t explain this as it’s just entry level stuff and really easy to do so I don’t think you’ll struggle with this part.

Okay, now that’s out of the way we make our second script that will get the time the status was created and parse into minutes ago e.g. real time.

Also add this after the above function to “jquery.tweets.js”:
[js]
function time_ago(time)
{
var values = time.split(" ");
time = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parser = Date.parse(time);
var realtime = (arguments.length > 1) ? arguments[1] : New Date();
var parseTime = parseInt((realtime.getTime() – parser) / 1000);
parseTime = parseTime + (realtime.getTimezoneOffset() * 60);

return rt;

};
[/js]

Now if we wanted to simply make our function load upon when the DOM Document has fully loaded we’ll add this to the very bottom of our JS file.

Add this as the very last bit!
[js]
$(document).ready(function() {
twitter();
});
[/js]

And that’s it for using the Twitter API with jQuery framework and outputting it on a simple HTML document, although if you want to see it for yourself then click here

I should really of explained the code better but explaining every little is time consuming not only that but not much point in telling honestly, this is a tutorial not a full fledged guide this is a starting point on using the Twitter API for your website. But however, if you do get problems or doesn’t work then be sure to let me know by commenting below!

Thank’s for reading have a good day!!!

Tags:

Comments Off

Comments are closed.