Display your tweets in real time, a basic twitter API use.

by Cedric Dugas on August 2, 2009

Recently I began optimizing social networking on Position Absolute, which lead me to the Twitter API. I wanted to display tweets in the top corner of the site. However I did not want to display my last tweet, but display my tweeting in real time.

Real time ?

This way I do not alienate frequent users with tweets pop-up. When you click on the appearing tweet box, it redirects you to my Twitter account.This is only a small JavaScript plug-in, so it unfortunately resorts to intervals, after 10 seconds it does an API call, after it happens every 30 seconds. By this time if I tweet something, it will appear to everyone on the site.

This may not seem much, but over time I think it may pay off.

One thing you must remember is that you can only call a maximum of 150 times per hour per person (a twitter limitation). For this reason, and for convenience, an interval of 30 seconds is necessary, more than that was a tad aggressive and this way you will never go over the limit. Also the demo is not linked to any Twitter account and faking the actual result.The downloadable version, however, is the same version used on this site.

View demo

Now how it works

Receiving your last tweet is really quite simple you call a JavaScript from Twitter like this:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/PosAbsolute.json?callback=twitterCallback2&count=1"></script>

Hop, you got a callback, which is in fact a JavaScript function with a JSON of your last tweet as parameter. Of course you only receive one tweet because of the &count=1. Now you want to call the Twitter API at a frequent interval, the response will automatically call the function twitterCallback2() each time:

setInterval("createJSONtweet('fdsfsd')",15000)
function createJSONtweet(){		 	
 var getTweet = document.createElement("script");
 getTweet.src="http://twitter.com/statuses/user_timeline/PosAbsolute.json?callback=twitterCallback2& count=1";
 document.getElementById('twitter_script').appendChild(getTweet)
}
// You get this JSON from calling Twitter
twitterCallback2([
	{"text":"Just testing my new script that will show in real time my tweet on Pa, article to comes!",
	"in_reply_to_user_id":null,
	"user":
		{"description":"A front-end developer in the javascript heaven and the IE6 hell.",
		"utc_offset":-18000,
		"profile_text_color":"000000",
		"screen_name":"PosAbsolute",
		"profile_background_image_url":"http://s3.amazonaws.com/twitter_production/profile_background_images/7614536/bg_site.jpg",
		"favourites_count":0,
		"profile_link_color":"4d5aff",
		"profile_background_tile":false,
		"followers_count":58,
		"url":"http://www.position-absolute.com",
		"name":"Cedric Dugas",
		"statuses_count":71,
		"created_at":"Mon Apr 06 00:40:12 +0000 2009",
		"profile_background_color":"313131",
		"protected":false,
		"friends_count":17,
		"verified":false,
		"profile_sidebar_fill_color":"dbdbdb",
		"time_zone":"Quito",
		"following":null,
		"profile_sidebar_border_color":"ffffff",
		"location":"Montreal, Canada"},
"favorited":false}]);
...

Getting your tweet from JSON is quite simple, tweet[0].text. As you can see, you can also get all sorts of cool informations.

The rest is a bit of jQuery and some CSS ( CSS included in js for convenience).

Add the last jQuery version and jquery.tweetInterval.js to your website, change the Twitter account, tweetInterval(“twitterName”), and you got your tweets pop-up working automatically on your website.

Download the source code View demo

Tested on:
Firefox 3+
Internet Exploder 7
Safari 4
Limited support on IE6 (You will need to do some CSS tweak)



If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!


Ads

Get professional testking 70-236 training to become expert in web development. Using testking 70-663 study guides and testking NS0-153 web tutorials learn about all the basics of web development.



17 comments

Nice feature!

by Mike on August 3, 2009 at 3:40 pm. Reply #

I like the concept and how this is non intrusive, good job on this

by Marcus on August 3, 2009 at 9:24 pm. Reply #

Display your tweets in real time, a basic twitter API use…

Using javascript and a bit of jquery you will have a nice looking real time tweet popup in your top corner website.

by CSS Brigit | Display your tweets in real time, a basic twitter API use on August 4, 2009 at 4:37 am. Reply #

[...] Check out original source [...]

by Display your tweets in real time, a basic twitter API use | CSS Luxury on August 4, 2009 at 5:29 am. Reply #

Could you give me an example getting your tweet from JSON? I haven’t got any experience with jquery :(

Thanks in advance!

by Carla on August 6, 2009 at 10:54 am. Reply #

If you want to use this script as is, you just need to add the 2 js file in your head

jQuery is not needed for this, when you call twitter you will get a function in callback with your tweet in json, retreiving it from the parameter is rougly the same as XML : tweet[0].text , will give you your last tweet. you do:

twitterCallback2(lasttweet){
var textLastTweet = lasttweet[0].text
}

by Cedric Dugas on August 6, 2009 at 11:07 am. Reply #

Sorry, but I get the following error, each time I try: lastTweet[0].text -> undefined

Copy my code:
setInterval(“twitterCallback2(‘”+lastTweet+”‘)”,30000)
setTimeout(“twitterCallback2(‘”+lastTweet+”‘)”,10000)

twitterCallback2 = function(lastTweet) {

var updateTweet = lastTweet[0].text // Tweet text
(…)

Thank you for the help and excuse me for my inexperience

by Carla on August 7, 2009 at 4:00 am. Reply #

Very interesting!

Tell me if this is correct ?: tweet[name='Cedric Dugas'][0].text

by Steve on August 13, 2009 at 5:02 am. Reply #

Why not mix the idea with a little server script to pull and cache the latest twitter post? Then just have your script hit your site.

by Lee Saferite on August 28, 2009 at 9:58 am. Reply #

Well the beauty of it is the integration simplicity

by Cedric Dugas on August 28, 2009 at 10:20 am. Reply #

Hello, really nice feature!

I just wanted to ask you that can i apply it for really time application also apart from twitters new post? Suppose i am showing recent visitors on profile page.The most recent visitor would be “1 min ago”.If suddenly new user comes so i just want to append that user with the message “about a min ago” without refresh like you have done here.

Can this feature support this kind of module as well? if no then could you please suggest me some link so i can look in to it.

Thanks.

by Neha on December 29, 2009 at 4:53 am. Reply #

Off the subject, Hanks how in the world is a guy in Trenton have a bag of trash left on his lawn front page news? He went and put it at the door of the County Mananger’s ofcife, so what. BTW- As usual, based on one of Mr. Willis’ quotes, a subtle racism charge was made. That was complete garbage in my opinion, and surely there was something, anything going on in our city, county, state, or country that would have warranted coverage other than this idiot wasting time to get a bag of trash picked up that he admitted wasn’t tied. This crap shouldn’t even have been in the paper, much less on the front page. I don’t know if that was your call or not, but that was filler in the local section at best.

by Manolis on August 21, 2014 at 9:31 am. Reply #

Yea you could, that would be the same idea, store the user you get the first time and look periodically if there is a new user and compare

by Cedric Dugas on December 29, 2009 at 12:06 pm. Reply #

Thanks for your reply Cedric.

I ll try and let you know if i get stuck somewhere.

by Neha on December 29, 2009 at 11:43 pm. Reply #

I tried this, it seem to work fine in firefox, but in safari/chrome the script does not seem to get latest api resonse after a while, if any activity is done on the page, then it starts getting new data. looks like the api response is cached, firefox is fine. Any Idea?

by Rak on March 21, 2010 at 4:30 pm. Reply #

FTW?!

Quesadilla Recipe

by Leanna Patton on December 23, 2010 at 5:02 pm. Reply #

Where does the jQuery and jquery.tweetInterval.js need to be located? Root directory on the server? Is it possible to point the script where jQuery and jquery.tweetInterval.js are located like on a separate server so I can use this with Blogger? Am I making this too difficult?

by John on March 2, 2011 at 9:24 pm. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.