Ask JW: How to Bring in Your Twitter Feed With Javascript

For this week’s question and answer, we’ll discuss how to use Javascript/jQuery to utilize the Twitter API to bring in a list of tweets.

Hello Jeffrey. I’m hoping that you can help me figure out how to bring in my Twitter feed with Javascript. Thank you!

The Answer

The Final Script

    var siteName = 'nettuts';
    $.getJSON(
    	'http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + siteName,
    	function(data) {
    		$.each(data, function(i, tweets) {
				for(var num = 0; num < tweets.length; num++) {
					if(tweets[num].text !== undefined) {
						$('#container').append('<li>' + tweets[num].text + '</li>');
					}
				}
    		});
    	}
    );

Credits

The techniques used in this tutorial were referenced from a recent Nettuts+ tutorial: “Create a Fun Tweet Counter With jQuery”.


27

Comments

Jeffrey

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. I love jQuery, PHP, MYSQL, CSS, AJAX - pretty much anything.


  • Bryan says:
    May 23, 2009 at 9:58 am

    Great screen cast that will help anyone working to make a Twitter app.

  • Anrui says:
    May 23, 2009 at 10:18 am

    Nice screencast, JW! Simple and easy way to begin incorporating twitter onto any web page.

    I’ll venture a guess and say “RPP” stands for “Returned per page”. :)

  • TKawai says:
    May 23, 2009 at 10:22 am

    Awesome tutorial! I’ve been looking for something like this. But I was wondering, how do you go about making usernames, hashtags, and links to automatically get the anchor tags?

  • Muhammad Adnan says:
    May 23, 2009 at 10:24 am

    me the First , i will try thanks JW

  • Ricardo says:
    May 23, 2009 at 10:46 am

    Very cool! Thanks for the screencast. You’ve merged two subjects I’ve been very interested in.

  • Muhammad Adnan says:
    May 23, 2009 at 10:53 am

    can we use $.ajax method ?
    so when it return the results then we can use each function ..
    ???

  • Devin says:
    May 23, 2009 at 12:17 pm

    Another nice one here Jeff

  • Sean says:
    May 23, 2009 at 12:49 pm

    Hey Jeff!, cheers for the info, is there any easy way to find urls in the tweets and automatically wrap them in anchor tags? Or a way to automatically scroll through them with jQuery?

  • redwall_hp says:
    May 23, 2009 at 1:24 pm

    Using the Search API to avoid the rate limit? Smart.

    Some sort of cache would still be nice though.

  • Lou says:
    May 23, 2009 at 3:03 pm

    great tutorial.. thanks!

  • Jash Sayani says:
    May 23, 2009 at 3:17 pm

    Is there any way to DOWNLOAD the SCREENCASTS ?

    I am also waiting to download Diving into PHP… And preferable in better quality for downloads.

  • Tanax says:
    May 23, 2009 at 3:55 pm

    Cool tutorial!

    If I would guess, I would say that “RPP” stands for Results Per Page.

  • nanochrine says:
    May 23, 2009 at 4:58 pm

    There is a lot easier using tweet (an jquery plugin http://tweet.seaofclouds.com/)
    I use it and it’s a lot easier

  • Jeffrey says:
    May 23, 2009 at 5:11 pm

    @nonochrine – Well yeah – it’s a plugin…meaning it’s not your own code.

  • Jeffrey says:
    May 23, 2009 at 5:23 pm

    @Muhammad – Yes you can use the $.ajax method, but why would you want to? The $.getJSON is exactly what we need in this case.

  • Cerium says:
    May 24, 2009 at 1:47 am

    @Jeffrey : why use jQuery for doing this ? Simple Javascript will be lightweight than using a library :)

  • Yosy says:
    May 24, 2009 at 2:00 am

    Hi Jeffrey,
    Great Screencast,Can you do more screencasts about json?

    Yosy

  • shedh says:
    May 24, 2009 at 3:36 am

    nice, but still missing these screencast whats up with them?

    ain’t seen alot of them recently

  • Jelmer says:
    May 24, 2009 at 9:05 am

    Thanks a lot Jeffrey! Cool script, simple & effective!

    Jelmer

  • Jelmer says:
    May 25, 2009 at 11:44 am

    Oh, I forgot to ask, could you do a screencast (if it is possible) on selecting a specific word (or maybe a sentence) from a paragraph, ul, div, span or something? Or is that too easy to make? :) I still can’t figure it out.

  • Andrew says:
    May 28, 2009 at 9:22 pm

    Nice work.

    Interesting to note, If you post in Twitter then realize you made a typo, you delete and re post.

    When using this script you see both the deleted and replacement post in the list.

    delete must not mean delete.

  • Sharpie says:
    June 7, 2009 at 12:09 am

    How do I submit a question to JW? Because I would like to know the back-end (server side) information for setting up a file uploading system. Right now I can only have a 2MB max file size, and I would like to what all needs to be done to allow larger files and what setting would be recommended. I would like at least 250MB or even larger. I read a whole bunch of stuff online, but it doesn’t really help. Most of the sites I found using Google are sites that allow large uploads and not a tutorial on how to do it.

  • ashit says:
    June 13, 2009 at 9:39 am

    RPP = Results Per Page .

  • cmar says:
    June 19, 2009 at 5:41 am

    Thanks for the great tut. I took the code for my own site. Just made one slight change to be more jQuery like.

    You can use the $ function to build your , so you don’t have to concat the string together..

    $(‘#container’).append($(”).append(tweets[num].text));

  • Anya says:
    July 2, 2009 at 8:15 am

    Hi Jeff! Great tutorial! Thanks!

    My only problem is that when I do the twitter search (http://search.twitter.com/search?q=from:dateraters&rpp=5) only one of my tweets comes up and I have more. Anyone knows what might be the problem?

    THANKS!!!

  • GeradT says:
    July 19, 2009 at 2:13 pm

    Where is the tutorial on how to do this using PHP. I would be REALLY interested to learn that. Can you point me in the right direction? Thanks!

  • Eric Val says:
    July 31, 2009 at 10:50 pm

    RPP = Results Per Page.

    Anrui was close. If you take a look a the results page with the appended rpp string came back with 5 per page and there is a page scroller on the bottom.

    great tuts as usual JW.