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.
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!
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.
Nice feature!
I like the concept and how this is non intrusive, good job on this
Could you give me an example getting your tweet from JSON? I haven’t got any experience with jquery 🙁
Thanks in advance!
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
}
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
Very interesting!
Tell me if this is correct ?: tweet[name=’Cedric Dugas’][0].text
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.
Well the beauty of it is the integration simplicity
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.
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
Thanks for your reply Cedric.
I ll try and let you know if i get stuck somewhere.
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?
FTW?!
Quesadilla Recipe
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?