A while back, I wrote a blog post on how to pull in your last three twitter posts into your web page via jQuery and JSON. It's still today a very popular post.
A lot has happened since that post and I wanted to re-address it and show you an alternative way of pulling in your Twitter feed via jQuery and the new Templating plugin developed by Microsoft. On the right is a new Twitter widget I put together using the new jQuery templating plugin.
Microsoft's Templating Plugin
During MIX10, John Resig and Microsoft announced that Microsoft would be contributing code back to the jQuery Project. One of their first contributions was the Templating plugin. Microsoft created templates for jQuery so that JavaScript developers could use jQuery to easily display a set of data.
The source code for the plugin can be found in the jQuery-tmpl GitHub repository. The plugin requires jQuery 1.4.2 or higher.
Getting Setup
Before we start you'll need the following:
Create a html page, and include jQuery, the template plugin and the supporting_methods.js. Then include the style.css doc so that your code from the demo we do looks nice.
The HTML
Since each tweet will be listed as a list item in an unordered list the only required HTML we need is an empty ul:
<ul id="renderTweets"></ul>
In our demo though we want to make it a complete widget. We need some extra layout html to be able to provide a heading and a link to take you to more tweets. Here is the full html we'll use:
<div id="Tweets">
<h3>@RedWolves Tweets</h3>
<ul id="renderTweets"></ul>
<div id="more">
<a href="http://twitter.com/redwolves">More ></a>
</div>
</div>
Make sure you replace my twitter name, RedWolves, with yours.
Making the Ajax request
Now let's get the data from Twitter. We'll use a JSONP ajax call to get back the JSON data of the last three tweets from Twitter. To get the JSON data we will use the user timeline of the Twitter API.
$("document").ready(function(){
var url = "http://api.twitter.com/1/statuses/user_timeline.json?id=RedWolves&count=3&callback=?"
$.ajax({
dataType: 'jsonp',
url: url,
jsonpCallback: "renderTweets"
});
});
At the end of the Twitter API url that we declare we attach the user id of the user timeline we want to see, in this case mine, RedWolves, so make sure to update with the username you wish to see. We then declare the url and call the .ajax() method and provide it with the dataType 'jsonp' so that we can pull the data via cross-domain. We set the url and then tell it which function we will call after the data is loaded. After the data is loaded we will call the function 'renderTweets', defined below, which will run the data through the template.
Defining the Template
Now let's define the template that will display the data we get back from the Ajax request. We define the template in a script tag and we provide it with a type of "text/template" and a unique ID.
<script type="text/template" id="twitterTemplate">
<li>
<img src="${ user['profile_image_url'] }" />
${ text.linkify().atify() }
<span class="created_at">
${ relative_time(created_at) } via ${ source }
</span>
</li>
</script>
On each JSON item we will run it through the template and create an li element with the profile photo, tweet text, when it was created and what source the tweet came from (e.g. Twitter for iPhone, web, etc.).
We are using a couple of supporting methods to help us in formatting. .linkify which will make any link a hyper link, atify which will link up any @screenname to their twitter profile and relative_time which will turn the created time into Twitter style time. You can find these methods in the supporting_methods.js file.
Putting it all together
The last bit of jQuery code we need to do is to actually call the plugin and combine the template with the data and put it into the DOM. Here we will define the renderTweets callback function.
function renderTweets(data) {
$("#twitterTemplate")
.render(data)
.appendTo("#renderTweets");
}
What we do is select our template, call the template plugin method, .render, which takes in the data from the Ajax call and renders the results against the template, and then append the results to the desired element in the HTML, the ul with id of renderTweets.
The whole HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>twitter</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.tmpl.js"></script>
<script src="supporting_methods.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/template" id="twitterTemplate">
<li>
<img src="${ user['profile_image_url'] }" />
${ text.linkify().atify() }
<span class="created_at">
${ relative_time(created_at) } via ${ source }
</span>
</li>
</script>
<script type="text/javascript">
$("document").ready(function(){
var url = "http://api.twitter.com/1/statuses/user_timeline.json?id=RedWolves&count=3&callback=?"
$.ajax({
dataType: 'jsonp',
url: url,
jsonpCallback: "renderTweets"
});
});
function renderTweets(data) {
$("#twitterTemplate")
.render(data)
.appendTo("#renderTweets");
}
</script>
</head>
<body>
<div id="Tweets">
<h3>@RedWolves Tweets</h3>
<ul id="renderTweets"></ul>
<div id="more">
<a href="http://twitter.com/redwolves">More ></a>
</div>
</div>
</body>
</html>
Source Code Demo