How to Display Justin Bieber Tweets with Asynchronous Recursion
Tutorial Details
- Topic: Justin Bieber News (or JavaScript)
- Estimated Difficulty: Intermediate
- Format: 20 Minute Screencast
Bottom line: Justin Bieber = traffic. I fully intend to use this to my advantage, and none of you can do anything about it. The purpose of today’s video tutorial is to demonstrate how to use a scary set of words, “asynchronous recursion” to continuously display updated tweets about the great Biebster. And then finally, we’ll hijack these tweets to make them look as if they’re referring to Nettuts+ instead.
The Full Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Biebster</title>
</head>
<body>
<h2> Latest Biebster Tweets </h2>
<ul id="tweets"> </ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
(function() {
var UpdatePanel = {
init : function(options) {
this.options = $.extend({
interval : 5000,
number : 3,
hijackTweet : false
}, options);
this.updater();
},
updater : function() {
(function updateBox() {
this.timer = setTimeout(function() {
updateIt();
updateBox();
}, UpdatePanel.options.interval);
})();
// get the ball rolling
updateIt();
function updateIt() {
$.ajax({
type : 'GET',
url : UpdatePanel.options.url,
dataType : 'jsonp',
error : function() {},
success : function(results) {
var theTweets = '',
elem = UpdatePanel.options.elem.empty();
$.each(results.results, function(index, tweet) {
if ( UpdatePanel.options.hijackTweet ) {
tweet.text = tweet.text.replace(/(Justin )?Bieber/ig, 'Nettuts');
}
if ( index === UpdatePanel.options.number ) {
return false;
}
else {
theTweets += '<li>' + tweet.text + '</li>';
}
});
elem.append(theTweets);
}
});
}
},
clearUpdater : function() {
clearTimeout(this.timer);
}
};
window.UpdatePanel = UpdatePanel;
})();
UpdatePanel.init({
interval : 5000,
number : 5,
url : "http://search.twitter.com/search.json?q=bieber",
elem : $('#tweets'),
hijackTweet : true
});
</script>
</body>
</html>
Conclusion
Thanks for watching; I hope you enjoyed it! Stay tuned to Nettuts+ for more news and gossip on Justin Bieber!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
All In One Banner–jQuery R ... only $8.00 
Simplicity - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
It’s funny how Justin Bieber provokes violence and hatred in comments.
Another way to make the code even just a little shorter, for those who may be interested, is to utilize jQuery’s “jsonp” dataType. For example, you could remove this line:
this.options.url += ‘&callback=?’;
And change:
$.ajax({
type : ‘GET’,
url : UpdatePanel.options.url,
dataType : ‘json’,
Ack, accidental submission! Change the previously listed ajax to:
And change:
$.ajax({
type : ‘GET’,
url : UpdatePanel.options.url,
dataType : ‘jsonp’, // jsonp instead of json
The
dataType: 'jsonp'will actually ‘add an extra “?callback=?” to the end of your URL to specify the callback.’ (from the jQuery API docs).I’m sure you were just being explicit about it for new-comers, but for those who want to be as lazy as I like to be, not a bad alternative.
Cheers,
Brian
Ahh – good tip, Brian. Thanks!
Nice tip
First time to know
Don’t listen to all the stupid immature commenter’s who can’t take a joke Jeff; This was yet another quality tutorial.
When Justin sees this, she’ll be so pissed
Just what I needed for my new Justin Bieber fan site project.
Thanks Jeffrey!
Great tutorial, Jeff. I’m not sure how Bieber tweets are going to attract viewers, but eh, still amusing. I did, however, notice one small error in the above code, at line 52:
var elem = UpdatePanel.options.elem.empty();
//Should be
var elem = UpdatePanel.options.elem;
elem.empty();
The code is right in the screencast, it just must have happened during repasting. Anyway, great concept with the tweets. I think it would great if you dissected jQuery’s ‘ajax’ method next (just sayin’ :) ).
Actually, I changed that after the fact. It saves one line of code. :)
Great :P Love it!
Did it get you more traffic to use Bieber in this tutorial?
Wading through all the idiots whinging about Justin Bieber, there are very few people actually commenting on the code.
I would say that within an object such as UpdatePanel you should avoid referring to itself by variable name and instead use the this keyword.
Makes it easier to update and maintain.
You can easily set the context of the object methods with $.proxy, call or apply. Also the ajax method even has a context property to allow easy binding of this within it’s callback functions.
That background photo disturbed my will to watch the whole video, so i will figure it out myself how the code works great :)
Please at least don’t put it on a background.
emmm What about Lady GAGA initiative to drive more traffic in ?!
I lol’d
Changed the code so the new tweets load from the top and neatly scrolls down.
Check it out: http://coley.co/demo/bieber.html
Looks good, Stephen!
To understand the code aspect of this tutorial, I think I must purchase a membedrship.
Nice tutorial
Useful tutorial, as usual, thank you!
I’ve been changing slightly the base code, here is the the result app: http://www.myastrodata.com/dev/tweets.html
awesome, I need all the traffic I can get
Probably Justin Bieber wasn’t already born when i’m started to navigate on internet :))
What happened to the video? Copyright infringement?
Just checked; it’s still there.
As always brilliant job Jeffrey, I really enjoyed it.
I’m a little bit surprised with so many Bieber comments. Do you guys get a joke? What’s the problem with you: No sense of humor, no girlfriend or both?
Thanx Jeffrey, i think i’ll finally learn ajax thanks to this tutorial,
Peace
Here is a quick addition to the code – able to search results.
http://tweetingwithtwitter.com/home.php
You are pulling all tweets from twitter and just show 3 of them?
so why don’t you just pull only 3 latest tweets?
like
http://search.twitter.com/search.json?q=bieber&rpp=3
hope i am not wrong (:
No, you’re right. The only reason is to give the downloaders the option of setting how many to display. :) But sure, that’s a small update that could made to the init call.
Dear God,
Please, send Eazy-E back to us and we will bring you Justin Beaver.
Signed – The Whole World.
Maybe I should do this on my blog. LOL!! Id think Nettuts has enough traffic already. Nice tutorial though.
Nice tutorial Jeffrey, i’ve just added a simple form to change the parameters for the query, and styled a bit =)
http://labs.fabryz.com/twitter-asynch-recursion/
very nice thanks….
it’s sad how marketing works nowadays. It’s changed so much that pathetic, talentless hacks like Bieber can succeed. As long as corporate fatheads make money they could care less. I refuse to promote anything of the sort on my own sites.
lol
Are you going to write a book on JavaScript? I think I’d buy a copy!
Who the heck is Justin Beinber?
go to youtube.com and type that name, then thumb up when you see something like ” if you’re here to see the page view, thumb up”
I could be wrong, but it looks like there’s one error in your code.
The UpdatePanel.updater method has the anonymous self executing function at the beginning which starts like:
this.timer = …
“this” will reference the window, and not the UpdatePanel object. So your clearTimeout call later, if used, wouldn’t do anything.
Otherwise nice tutorial.
Hi, this is a great tutorial and very topical, love the Twitter integration. Have a read and download of this and see what you think: http://blog.twostepmedia.co.uk/live-twitter-trends-on-a-website/
Thanks Nettuts, keep writing!
sweet, interesting blog post! i find out so how to do justin bieber follow u of twitter
its right here
http://www.planetnana.co.il/punka1/justin-follow.htm
This is so awesome. Finally i can offer my clients full Bieber-Integration!