jQuery plugin for Twitter
Updated [08 July 2009]:
v1.5 released - View Demo or Download
I've made a couple of improvements to the plugin. The ones worth mentioning:
- You can add alternative content to the container element (that you pass to the plugin). This will be replaced by your tweets when the plugin is executed by jQuery. If JavaScript is disabled or the plugin fails, your visitors will still see your alternative content - a good idea therefore would be to include a link to your twitter profile.
- All styles are now added to the container elements via a new ".twitted" class (view CSS). If you're upgrading from the old plugin version, you'll need to transfer your old styles across into the new syntax.
- 3 new customisation options: slideDuration (if slideIn is true, this will change the duration of the slide effect), showProfileLink (set to false if you want to hide the link), showTimestamp (set to false if you want to remove the timestamp from tweets - the timestamp is then added as a title on the individual tweet list items).
- Fixed the jQuery slide effect "jump" bug (hat-tip: Dan G. Switzer, II)
If you have any feedback or bug reports, please leave a comment below.
I started writing a new post today containing various tips, tricks and best practices for the jQuery JavaScript Library that I've picked up over the past few months, but instead ended up developing my first jQuery plugin.
Introducing jQuery plugin for Twitter v1.0 - View Demo
A simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page.
To begin, download the source files (.zip) and familiarise yourself with the necessary JavaScript and CSS files that need to be included in your page:
<link rel="stylesheet" href="jquery.twitter.css" type="text/css" /> <script src="jquery.twitter.js" type="text/javascript"></script>
Next, add a div element with id "twitter" to your page, wherever you want the feed to appear:
<div id="twitter"></div>
Lastly attach the plugin to that div with the following jQuery code (the customisation options are pretty much self-explanatory I think):
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "jquery",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true
});
});
It's obviously a little more involved, but that should be enough to get you up and running!
The most recent version of this plugin will always be the one available for download on this post.
Please let me know if you decide to use it, or have any feedback.
Using a Plugin Development Pattern (by Karl Swedberg) as a starting point, the plugin is based on Twitter's HTML Badge Customizer.
- leave a comment
152 Comments
Very cool, jQuery ftw.
Hey, that’s really cool! Well done bud :)
Excellent work! I will try to make something similar for muti when I have some spare time.
Hey, question… Is there a way to add multiple twitter users into one stream sorted by post date??? That would be something of huge value.
Not sure if this went through lasttime but does this support multiple users in the same stream sorted by post date?
@TJ: It would be better to do that on the server-side. There are a couple of PHP classes available. Otherwise you could aggregate the individual RSS feeds? I’m sure something must exist already to do that in most instances?
@coda: I’ve checked everywhere, and only tool I’ve found was using Monitter. I wish I knew their API better. I’m trying to combine feeds from everyone at work, and not having to hack the heck out of a yahoo pipe :)
if you have any thoughts, that would be awesome, thanks.
@TJ: It sounds like you’ve exhausted your options ;) I’ve never tried Yahoo pipes, personally I would stick to a custom solution and look for an aggreagator script that fits my setup.
No love for Safari unfortunately.
@Oskar: can you elaborate please? I’m using Safari 3.1 on Vista and there don’t appear to be any problems.
Apparently I’m going to need to write a prototype version of this too. :)
I’m still not sure why some choose one version over the other, I guess in my case I’m just use to prototype/script.aculo.us.
Also, awesome theme!
dope!
nice work
I’m getting a username/password prompt from the twitter API in IE 7 & 8. Everything works fine in FF.
@Gary: I can’t why think that would be a browser issue, and I’ve never had it happen either. Was it a once off occurance?
Nice but don’t work on Firefox!
@Andrea: Can you give me more info? Which version of Firefox? What didn’t work exactly? thanks.
sorry now run! Adblock plus blocked it!
@coda, apparently jQuery’s onSuccess event (or whatever it uses) fires even if the tweets are not being downloaded which constitutes in the container expanding by 10 pixels and staying like that.
@Oskar: thanks, I’ll take a look at fixing that!
Getting Twitterific with jQuery…
I was researching dynamic site update options for a project at work and stumbled upon Damien du Toit’s blog. Damien has developed a plugin for jQuery that allows you to pull in data from Twitter. Naturally I had to try it out for myself, so it……
I blogged about this and am using it on my site now.
Thank you!
http://www.findzen.net/blog/2008/11/05/getting-twitterific-with-jquery/
what’s the license like? I’m developing a web app and am looking for something to display it nicely. Can I include your codes in my app?
@Justin: nice one!
@kedai: It is licenced under Creative Commons Attribution-Noncommercial 3.0 Unported, so yes you may include it in your app if you include an attribution. Thanks!
Wow, I love this one. thanks a lot buddy.
All hail, jQuery! :)
Nice one! will definately give it a try
Hi!
What’s the advantage compared to twitter’s own JSON implementation? Performance?
Thx.
@TJ: check out Building a Twitter widget, part 2: displaying the public timeline at the Netvibes Developers blog
@Franc: I’m not sure if there is much difference. Infact I should look at using jQuery’s $.getJSON method instead of $.getScript, which will solve Oskar’s issue above.
Hey, very nice! I will use it in my site. Tk’s!
非常好看的风格
very nice!
Nice one man thanks
Oh wow this looks quite cool.
@coda: thanks for the update… I’ll check it out
Oh wow! Steezy script.
I’m using Juitter, wich has a live update mode that’s really nice… you should take a look on it to have more ideas… cheers
Excelent Plugin, clean and fast. I’m looking for something like that. It’s solved my problems. I’ll folow the project progress.
cool plugin. Thx
This is an awesome script. Tx!
I’ve had success pulling the latest twitter onto my page and it works perfect.
What I’ve tried to do though is plant more than 1 feed onto the page. Not aggregated like mentioned above, but say, have with different feeds in each.
Is this possible?
When I tried
$j("#twitter").getTwitter({
userName: "user1",
numTweets: 1
});
$j("#twitter2").getTwitter({
userName: "user2",
numTweets: 1
});
It would just fill the first div with the 2nd users contents.
Any ideas?
A great script thatnk. Works very well. Only problem is it conflicts with my Mootools scripts. Any pointers … is this a known conflict issue?
Great stuff, and thanks so much.
I’d like to be able to hide the Twitter updates if the latest Tweet is more than a day old. We use Twitter primarily for emergency announcements. How would I do that?
@Bobby: Thanks for the feedback. Unfortunately I don’t know why that’s happening. I tried it myself with the same result. Did you find a solution?
@Gary: the plugin is wrapped by jQuery so that it shouldn’t conflict with other scripts I think. I wouldn’t recommend using multiple frameworks anyway. Shouldn’t be difficult to port it to Mootools.
@Frank: This plugin probably isn’t the best solution then. But my guess is you’d have to host the blogger.js file locally (or rather integrate it with the plugin) and make the necessary edits to get the result you want. That’s an interesting use for Twitter so if I ever get a chance I might look into it, or maybe someone else reading this will offer to help.
HI great one, but seems that it sometimes just doesn’t show up the posts, as it still loading them, but I have a filling this may be due to the JSON connection to twitter? Any help on this? Has anyone some similar experiences ?
This is a really cool plugin. I also really like how your blog looks. Well done!
Does this auto update the twitter feed if a new tweet is posted while on the page?
Very nice plug in. I posted a link for all my designer friends on Facebook.
+1 on an auto-refresh option
Great, thanks for the tut.
Very nice plug in. I end up using it on my site.
well … i’d like to filter all the replies out of my list …..
so that i have my own tweets, without senseless replies (for visitors on my website) to friends of mine.
sth like “if the tweet starts with an @ don’t display it” …?
could you help me?
@stephan: Someone has done this before, although I can’t find a reference for it now. I believe they edited the blogger.js file (http://twitter.com/javascripts/blogger.js) and then hosted it locally. The required edit will check for replies and filter them out like you describe. I haven’t looked at the blogger.js code myself so wouldn’t know where to start.
Really nice, I’ve been looking for something like this for ages!! Just downloading it now, will let you know how I get on!
Is there any way of displaying more than one feed from a different user on each page?
Thanks for this.
Regarding stephan’s question, I just coded that up for myself here: http://github.com/henrik/henrik.nyh.se/blob/0971e2b54b67955aae9039c50d7f1800afee164a/js/jquery.twitter.js
Used here: http://github.com/henrik/henrik.nyh.se/commit/0971e2b54b67955aae9039c50d7f1800afee164a#diff-4
Basically you pass rejectRepliesOutOf in addition to numTweets, so it can get a larger number of tweets, weed out replies, then pick the desired number. This is a little roundabout, but I was told there isn’t a better way to do it.
I was actually hoping that you release something like this one of these days. So glad the day has come! Thanks a lot!!
Hi. Is it possible to insert twitter post on twitter space about this code or like this? How can I implement that?
thank you!very good plugin!
Dang! Now that has to be the easiest jQ plug-in I have ever used! Worked right off the bat and have had problems with it.
Nice job!
I can’t get this to work…When i run the demo with my username it works fine but as soon as i embed in my page it’s just empty.
This is my header:
Collin Henderson
and the div looks like this:
DOes anyone know how I only display @replies or # tags?
thanks
[...] jQuery plugin for TwitterA simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page. [...]
网站好漂亮啊．．．．beautiful
:grin: nice plugin,thx!
You should take a look on Juitter to have more ideas… it has a really nice live update mode…
Light weight non-bloat plugin works great. Looked an several other jquery twitter plugins and decided on yours. Thanks for keeping it simple.
[...] * Most excellent Twitter plug-in is available from @code_za’s blog. [...]
Good plugin works great. For myself i has slightly modified profile link element and added there an rss feed icon
var profileLinkHTML = "http://twitter.com/"+o.userName+" ";
@Mike: Juitter is a nice alternative
@Larry: thanks
@tfk: thanks. I think some of your HTML was chopped off in your comment?
@coda:
yes, you are right. You could look at my slight modifications here http://www.4shared.com/file/116922083/caf29066/twit2.html ,but all modifications there is because i needed russian version/
There are also some modification of blogger.js, because in russian language needed some noun variation for different numbers. So i modified it and added to jquery.twitter.js
I added to profile link feed icon which directs to 'http://twitter.com/statuses/user_timeline/'+o.userName+'.rss', so users can subscribe to rss directly from page where plugin is located.
@TJ did you find anything like this?
Is there any way to display the author or user name of each feed post?
@Josephine: This plugin is designed to support a single Twitter feed only, so adding names isn’t necessary.
@jtrbeer, @TJ: Take a look at Juitter which appears to support multiple Twitter accounts.
Is there a method for getting searches on a hashtag vs. just a single-users tweets?
Is there a way to have this plugin show results on a search for a hashtag vs. a single users’ tweets?
@jasonturcotte: Afraid not, unless I change the way the plugin talks to Twitter.. which might be worth investigating at some stage.
Could the plugin run in a blog or site, i’d love to make a page using this sort of thing on our new ning site
I just integrated this into a tooltip widget and it worked great!
Page was being set up with multiple profiles with links to Twitter.com.Now instead of going off site simply Hovering over these links now produces a very sharp looking tooltip of that persons tweets
This extension might make a good addon for your plugin
This works great. One question though – when urls are posted in my tweets I can’t get them to do a line break (the .twitter width is set to 220px) and the urls are overflowing in IE 6 & 7. Is there any way to get long urls to do a line break?
@Charley: you could try setting “overflow” on your list items to “hidden”, although I think this would require setting a width and height too, and isn’t a very elegant solution. Take a look at Injecting Word Breaks with JavaScript for some ideas. Or simply use a URL shortener. ;)
Thanks for the tip coda – the long url lines break in Firefox automatically. However in IE 6 & 7 that’s not the case.
I set overflow to hidden yesterday as a temporary solution.
@coda. Thanks for the great plugin!
Question. I’m using the basic html widget that twitter provides on my wordpress blog and I want to remove the timestamp. How did you achieve this? I tried playing with your jquery a bit but it’s a bit over my head.
Any help you could provide in removing the time stamp would be greatly appreciated!
Thanks!
[...] jQuery plugin for Twitter [...]
@blackabee: glad you like it!
If you look at the below generated markup, you’ll see that the timestamp of each tweet is wrapped by an anchor element. I use jQuery to find the first child anchor element of the list item, remove it, and then append it to the list item as a title attribute.
<li> <span>tweet goes here</span> <a href="tweet permalink">about xx hours ago</a> </li>
And here’s the jQuery code:
// remove timestamp and move to title of list item
if (!o.showTimestamp) {
tl.find("li").each(function() {
var timestampHTML = $(this).children("a");
var timestamp = timestampHTML.html();
timestampHTML.remove();
$(this).attr("title", timestamp);
});
}
Hope that helps you! You could also try simply hiding the anchor element with some fancy CSS.
awesome! i have been looking for something like this!
can i have just one tweet at a time and have it transition to the next after a set time?
can it not show my twitter username?
can i customize font and color?
awesome plugin, aboout a month and a half i couldnt find something as easy and customizable as this. today i happen to stumble on this. i am happy with glee.
i am having an issue with it scrolling through updates.
i only want one tweet to show at a time for 5-10 secs.
after that i want the previous tweet to slide in.
i wanted to show my last 5 previous tweets total in 25-50 secs.
grazie, I used it!
hi!
I wanted to use it – locally everything works fine but not after transferring on the webserver. what did I do wrong??
thank you very much for your help! :)
I get api login box when I use opera. How can I fix it?
TwitterOnTheRun is an automated self-sustaining TWITTER program that follows Tweeters who are interested in what you are interested in on TWITTER. You tell the program which Tweeters are already talking about what you are about, and it follows for you just like the specified Tweeter follows. When you follow Tweeters who have common interests with you on TWITTER, they are highly likely to follow you back. Then you can get your message out to all of them with one simple tweet or more tweets, if you choose!
Haha, see what I did there, “John Beasley”? You spamming idiot…
Hello, Would be using this on a writers new website at http://www.chetanbhagat.com.
Secondly I decided to use it after trying a dozen ideas created by other developers. Yours is the fastest to implement and works great.
[...] Sample | Tutorial Share and [...]
[...] Sample | Tutorial Share and [...]
Hey Coda,
I went ahead and implemented this on my site today, http://www.designsync.biz/about.html for an example of a page where it’s at. It seems that on browsing to the page for the first time, the script does not load, on refresh it does.
Got any suggestions, this is in Firefox 3.0.13.
Doesn’t seem to be an issue in IE 8.
Hi, Id like to say thanks first off for a great script. I have modified it to randomly load a feed using an array of usernames, and for some reason, I am getting a password/username prompt every 5-7 times. It is happening in FF3.5/IE8/Chrome
Hi, I’ve added this awesome script to my site. However I seem to be having the same problem as Tommy Johnsen. The script does not always load, until I refresh. Any idea how to fix this?
Thanks!
Great script, thanks. If you add the following code you can make the tweets with links and the timeline entries open in a new window:
tl.find('a').attr('target','_blank');
Hi there, great script! Wondering if anyone has had success using the cycle plug-in so tweets automatically cycle through? We only want to show one tweet at a time, then fade into another one.
Thanks!
This is in use on the new liberal.org.au site now, see Tony’s Tweets on the right.
Great plugin. I have used it and I will include a link back here.
cheers
Thanks for the script, it’s awesome!
I,ve been playing with it since couple weeks and just realised that if I set the number of tweets to 5 for example and 4 of my last 5 tweets are ReTweets, the plugin only display one … is there a way to aslso display the RT or to display my last 5 real posts…
if you have any idea :)
Martin
this is nice! But I need a single line tweet, and I don’t know how to delete the upper space over the tweet…
thanks!
Hey,
I really like what you have done, and would like to include it on our, currently in development, company website.
I see that you have CC by NC and was wondering if it is okay to use it on a company website?
Thanks,
Ian
THANKS MAN!
Thanks for posting this script. I am using it on post.scriptum.ru. Could you share a suggestion on how to access a given range to tweets, not just the last N?
Thanks.
Sir,
I use your Twitter plugin on my site, please have a look, I put it on top left.
Is there any way to give it something like a refresh button ? because I found that sometimes it fails to load :(
btw, nice plugin u have Sir !
thank you
Hi! I’d love to use your plugin on my site to allow readers to post what they think happened by I can only get it to show my character’s own tweets. Have I missed someone that I can get it to pick up tweets that are e.g. @Polly_Melibee ?
Many thanks
Anna
I’m having the same issue as Martin: Retweets are not showing up.
Hey, first of all : great stuff
i have an issue; I want the title when i hover over a tweet like this:
15 dagen geleden instead of 15 days ago, thats Dutch.
How can i change that ?
Thanks!
Hi all, Nice plugin. How to show profile photo? Help me
Hi
Very nice, but how do you get the script to open tweets in a new window?
Also like BATAA it would be very nice to also show profile pics in tweet lines.
Cheers
@ CZP, me too, same problem.
Anyway thanks for this plugin.
I like the plugin, it is great!
Is it possible to show a twitterlist from a user with this plugin?
This is a great little code. I’m trying to implement it on a site I’m working on but I was wondering if there is a way to change the “relative” timestamp (i.e. “about 12 hours ago”) to a M, D, Y, T timestamp.
Thanks for a handy plugin.
Wondering if there’s some way to change the ‘timing’ of tweets. i.e, currently it only displays tweets ‘younger’ than 3 hours.
A rewteet toggle (as an option to display retweets) would also be massively handy.
Thanks again.
Coda.
Nice Job.
Is there anyway the tweets/links of the twitter messages can open in new pages?
Thanks.
Dan.
Great job Damien! Shall be incorporating this into my portfolio site that shall be coming out in the next couple of weeks.
Only query at the moment is that my feed only seems to be showing tweets from 3 hours ago, is there a method of implement how often the feed updates?
[...] jQuery Twitter by Damien du Toit – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
Brilliant, great job with this excellent piece of coding!!!! :o)
[...] jQuery Plug-in for Twitter this is a simple, unobtrusive and customizable client-side method for easily embedding a Twitter feed on a Web page. from Coda, you know it’s going to be smooth. View demo here. [...]
Been scouting around and so far this seems like one of the easiest jquery solutions. Very simple to install and control as well. Would have been really great to be able to include more than 1 twitter feed.
I hope to use this plugin on a multi author wordpress website where each author’s page needs to have his twitter feed in the sidebar so I can just use a custom field on each authors page and thereby pull his/her feed. Nice!
Thanks for this handy gem!
[...] http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter Mascara de campo em JS com jQuery. [...]
Thanks for the plugin, a snap to use! I’m implementing on my porfolio site
This isn’t working in IE8. Can’t figure out why. Even the demo on your site just blanks out the feed area.
[...] jQuery Plug-in for Twitter This is a simple, unobtrusive and customizable client-side method for easily embedding a Twitter feed on a Web page. From Coda, you know it’s going to be smooth. View demo here. [...]
Hi, thanks for the plugin!
Is there a way to do a callback once the tweets have been loaded?
[...] jQuery plugin for Twitter [...]
Hello,
Great plugin. However, I ran into an issue that so far hasn’t been addressed above. While developing a site, I noticed that the twitter feeds stopped loading and the “Loading tweets…” text froze. Looking up the activity in Safari I found the following error message:
twitterCallback2({“request”:”/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=2″,”error”:”Rate limit exceeded. Clients may not make more than 75 requests per hour.”})
How would I go about modifying the script to account for this error? I’d like to either hide the twitter box when this occurs (ideal) or, at the very least, give the user a visual cue that the feeds maxed out (replace text – “tweets are maxed out”
Thanks,
Mike
Love this plugin but i cant get it to work on my iphone in safari? any ideas? im pretty sure i have set it right as your demo page also doesnt work in iphone safari… any ideas? or has anyone come across this before?
Oddly enough if you turn the slide off it runs in iphone safari… but with the slide on it just seems to break
Did something break all of a sudden? Today, my plugin is no longer working. It gets past the loading gif, then just displays a blank list with no content. I see your demo isn’t working either. any ideas?
Hello, I have been using your plugin on a site for the past month or so — but this morning have noticed that the feed has stopped populating. I wonder if I have the same issue as Mike B from July 6, 2010.
Is there any way around this? Is it 75 “per client” meaning if the site is referenced 75 times total, by anyone or spiders, it will stop working?
I just found this: http://blog.tweetdeck.com/what-does-rate-limit-exceeded So I guess there’s now way around it, huh. I guess I would agree that if it’s not working, I would want to hide it.
[...] jQuery plugin for Twitter [...]
Still having problem in safari and mobile safari. The error i get is along these lines, it doesn’t happen all the time…
Javascript error on line 1
http://twitter.com/st…nt=4&… ReferenceError:Can’t find variable: twitterCallback2
Amy ideas?
Regarding the error of multiple feeds on a single page, I believe the issue is that you’re using “#twitter_update_list” as the ID for the containing the tweets. Obviously you cannot make more than one list with that ID.
I made the following changes:
// add twitter list to container element
var twitterListHTML = "";
c.append(twitterListHTML);
var tl = $("#" + c.attr("id") + "-list");
But this still doesn’t work — I guess “#twitter_update_list” is actually tied to the blogger.js file from Twitter itself. Is there a way to decouple these scripts? I tried pasting the blogger.js file at the point of the .getScript and applying a similar change:
document.getElementById(c.attr("id") + "-list").innerHTML = statusHTML.join('');
This time the error is that “twitterCallback2″ is an undefined function.
Ideas?
Looks like this method broke! Not entirely your fault, looks like Twitter isn’t supporting that JSON call anymore:
http://twitter.com/statuses/user_timeline/ashtonkutcher.json?callback=twitterCallback2&count=2
But not only that, if you go to anyone’s Twitter page there is a link to their RSS feed at the bottom of the right sidebar. That link 404’s as well. Twitter needs to get their sh#t together!
But other plugins seem to be working just fine so there must be a way!
Forgot to mention Twitter’s own widget code isn’t even working:
https://twitter.com/goodies/widgets
*slaps forehead*
great!!! but don’t work on IExplorer 7
Thanks for the awesome code Damien :)
[...] jQuery Plug-in for Twitter This is a simple, unobtrusive and customizable client-side method for easily embedding a Twitter feed on a Web page. From Coda, you know it’s going to be smooth. View demo here. [...]
Great little plug in…I’m new to java script and this was super easy to implement. Thanks for this…
Thanx
[...] 3.Jquery plugin [...]
To fix IE word-wrap issue with long url’s that are being pulled in from Twitter, place this code after the pre-loader is removed and before the removing the timestamp in jquery.twitter.js:
$(‘#twitter_update_list li span a’).css(‘word-wrap’,'break-word’);
Hope that fixes it all.
Thank You,
Is really Helpful
Thank You
[...] jQuery plugin for Twitter [...]
My application was working fine, then I received a “Can’t follow _________” error message after a bit of time. Does anyone know what causes this error message? Did I ping the accounts too often or something?
Leave a Comment
Your e-mail address is required, but will not be published.
26 October 2008
Chris M03:26 am
Nice one!