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
  • Bryan says:

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

  • Anrui says:

    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:

    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?

  • me the First , i will try thanks JW

  • Ricardo says:

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

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

  • Devin says:

    Another nice one here Jeff

  • Sean says:

    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:

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

    Some sort of cache would still be nice though.

  • Lou says:

    great tutorial.. thanks!

  • Jash Sayani says:

    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:

    Cool tutorial!

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

  • nanochrine says:

    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:

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

  • Jeffrey says:

    @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:

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

  • Yosy says:

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

    Yosy

  • shedh says:

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

    ain’t seen alot of them recently

  • Jelmer says:

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

    Jelmer

  • Jelmer says:

    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:

    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:

    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:

    RPP = Results Per Page .

  • cmar says:

    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:

    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:

    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:

    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.