Embedding a Twitter Feed Using jQuery
I’m in the process of updating my company’s website (it needs it, too) and decided it would be appropriate to include my Twitter posts in the home page. It was surprisingly easy to do using jQuery’s getJSON method to retrieve the JSON feed exposed as part of Twitter’s API.
Basically, to retrieve my tweets into a region on a web page, I need two things: an HTML element with an ID tag that will get referenced as the point at which the tweets will be inserted, and this jQuery code:
$(function() {
var html = "<ul>";
var tweeturl = "http://twitter.com/status/user_timeline/Phil_Wheeler.json?count=10&callback=?";
$.getJSON(tweeturl, function(d) {
$.each(d, function(i, item) {
html += "<li>" + item.text + "</li>";
});
html += "</ul>";
$('#twitter-feed').append(html);
});
});
There are basically two key lines here:
var tweeturl = "http://twitter.com/status/user_timeline/Phil_Wheeler.json?count=5&callback=?";
…and:
$('#twitter-feed').append(html)
The first line is responsible for picking up the data. You can likely work this out for yourself: each user’s Twitter feed can be read from http://twitter.com/status/user_timeline/.json. If you want, you can look at this feed by replacing
.json
with
.xml
. The rest of the URL defines how many results you want to retrieve (count=5) and sets the method name for the callback (jQuery handles this automatically).
jQuery’s getJSON command calls the Twitter URL we’ve requested and executes the proceeding function on success, which in our case is just a quick iteration through the five returned tweets and throws each one into a list item. You can add more code to format URLs, retweets, @ user ids and so on.
The second line is responsible for dropping the HTML we create onto the page. I’ve referred to an element (a div tag) with the ID “twitter-feed”, but you can obviously populate whatever is most appropriate for your situation.
And that’s about it. Very quick. Very easy.
var html = “<ul>”;
var tweeturl = “http://twitter.com/status/user_timeline/Phil_Wheeler.json?count=10&callback=?”;
$.getJSON(tweeturl, function(d) {
$.each(d, function(i, item) {
html += “<li>” + item.text + “</li>”;
});
html += “</ul>”;
$(‘#twitter-feed’).append(html)
});
});
Wow. The formatting got really screwed up for this post. Sorry, readers!
This is fantastic. Super simple in both implementation and features. Exactly what I was looking for.
Huge Thanks
Not at all! You’re more than welcome.
hi Phil,
this looks like a great post to include a twitter feed, but it doesn’t work for me..
should it work if i do simply “copy-past” the code? or are there little mistakes in it?
i do understand the big picture but i ‘m no experienced programmer..
greetings lijn
it works! many thanks for sharing your knowledge!
Good stuff. Glad you got some mileage from it.
I don’t completely understand how to use this. Does the code above get added to the in javascript tags?
It’s not working for me…
First-off, let me apologise for the formatting. Think I’ve sorted it out now.
Basically, to use this code you want to have an element on your page with an ID of “twitter-feed”. Line 13 is then responsible for appending the imported tweets into that element.
E.g.
From there, just replace the user name in the URL.
E.g.
The rest of the code you can just lift straight from my example. This code doesn’t format any short URLs (e.g. Bit.ly), @ replies or hashtags, but that should be a simple matter to update using RegEx or even just a basic switch statement.
Hi,
Thanks for sharing this!
Though I wonder why the width of the li-tag gets a calculated width? Because this seems to break the line, sometimes..
Greetings!
you can use this function in order to change the created_at time format
// Time function from the Twitter Blog JS file
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
but what about when i need to show my own database updates in real time like twitter ? any suggestions