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
278 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?
Hi there! Love the plugin thanks, but the number of Tweets being displayed keeps bouncing up and down! A want to display three, so I had it set to three, but only two were being displayed, so I had to knock it up to four, and it displayed three, but then after a while it actually displayed four, and so I put it back down to three, and it fixed, and then it displayed only one, and so now I have it set to five! Arrggghh! Please help! Mucho awesome sauce. Thanks! My Website My Email
Great pugin…. is it possible to retreive the # of followers ?
Great Script!! I am using this script on one of my websites. It works fine mostly but some times I get this error:
Message: Object expected
Line: 1
Char: 1
Code: 0
URI: http://twitter.com/statuses/user_timeline/tavleen_singh.json?callback=twitterCallback2&count=2&_=1284799490609
Please help.
Thanks,
Natasha
Is there any way to bring the avatar in? I’m working on a project and it’s due by end of day! :(
hey !
Very usefull plugin. Thank you !
But in my case, the retweet doesnt appear on my website! Do you have an idea on what could be the problem?
thank you
For all those who’re having trouble with the plugin not displaying RT’s, you need to change line 62 and 63 to look like this:
$.getScript(“http://api.twitter.com/javascripts/blogger.js”);
$.getScript(“http://api.twitter.com/1/statuses/user_timeline.json?screen_name=”+o.userName+”&count=”+o.numTweets+”&include_rts=true&callback=twitterCallback2″, function() {
This uses the new Twitter API, and includes an additional parameter (include_rts) to tell it to show RTs.
The rest of the plugin code can stay as is.
Hope that helps!
Matt
Love this script, and will likely integrate it into my sidebar very soon. However, I’d like to set this up so I can show a live feed for a #HashTag instead of the @UserName. Any chance this can be an option, or if you know of another place to look?
Great stuff. Thanks a million!
i think it’s not working….
Thanks a lot for this!
The script will often fail in Safari/Chrome because the blogger.js file hasn’t finished loading before it is used on the next line. The following error will be thrown:
Uncaught ReferenceError: twitterCallback2 is not defined
I fixed this by moving the code lines 63-102 into the callback function() of the getScript function on line 62.
Thanks for all the comments.
I’m incorporating all of your feedback and bug fixes into a new version which I will release soon.
I am also having the problem with this otherwise excellent plugin, whereby long tweet links are not being word wrapped in IE. I tried adding Igor’s suggested fix (August 19) at line 66 of jquery.twitter.js, but it prevented the script from running at all. I then tried adding the ‘word wrap: break word;’ into the .css file at the ‘.twitted ul#twitter_update_list li span a’ selector, but that did not correct the problem. Any idea what I can do to fix this?
This plug-in is very well, but it only displays the personal tweets and not RT.
Y is there a way to fix this?
Using this plugin on my site (thanks!) and it doesn’t work in Chrome 7.0. Hit your demo page in Chrome and same result. Any ideas on a fix?
@Ryan: I just tested (Chrome 7.0.517.44/Win 7) and it worked fine, so not sure what’s going wrong.
Is there any way to translate the timestamp? I need it in portuguese!
How would one move the Timestamp to before the tweet rather than having it after?
Thanks!
great and easy going stuff ! … thx 4 sharing! up to now I was using the “seaofcloud” script … right now I have to think it over ^^
It’s very cool.. thanks for the plugin. :)
Hello everyone.
Like most, I also have a problem showing the retweets, but I found a solution to this problem.
Open the .js file,
REPLACE:
$.getScript("http://twitter.com/javascripts/blogger.js");
$.getScript("http://api.twitter.com/1/statuses/user_timeline/"+o.userName+".json?callback=twitterCallback2&&count="+o.numTweets, function() {
WITH:
$.getScript("http://twitter.com/javascripts/blogger.js");
$.getScript("http://api.twitter.com/1/statuses/user_timeline/"+o.userName+".json?callback=twitterCallback2&include_rts=true&count="+o.numTweets, function() {
It worked for me, hope it works for you too.
This is v cool! Thanks for sharing.
One problem!:
I tried what Matt suggested above to fix RT’s and it didn’t work:
$.getScript(“http://api.twitter.com/javascripts/blogger.js”);
$.getScript(“http://api.twitter.com/1/statuses/user_timeline.json?screen_name=”+o.userName+”&count=”+o.numTweets+”&include_rts=true&callback=twitterCallback2″, function() {
Any ideas?
Thanks,
Great website, great plugin!
Hey Damien,
Are you noticing that tweets are not loading at the moment? I’ve been using this on a few different sites, and those are currently just loading….forever.
Whatcha think?
For those wanting to have it auto refresh, here you go!
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "username",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
slideDuration: 750,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true,
showTimestamp: true
});
});
var auto_refresh = setInterval(
function ()
{
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "username",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
slideDuration: 750,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true,
showTimestamp: true
});
});
}, 10000); //Refresh every 10 seconds
Have been looking at doing site optimization and bettering the web design on my website for a long time, so this post has been very helpful. Easy read as well, so thanks!
[...] plugin jQuery Twitter nos permite insertar los últimos tweets de un usuario determinado mediante una simple llamada, y [...]
I am having a problem when i get my status updates, on the time stamp when you click to go to the status it sends me to a random users page, I created a new tweet and it sent me to a totally different persons status update and the url that it posts is this
http://twitter.com/#!/andwellington/statuses/15350631015383040
when its suppose to go here
http://twitter.com/#!/andwellington/status/15350631015383041
[...] dosyaları aşağıdaki download linkinde bulabilirsiniz. İsterseniz eklentinin son güncel halini buradan indirebilirsiniz.Projenize eklentiyi bu şekilde ekleyin <link rel="stylesheet" [...]
hi,
Excellent, how can i change the timestamp language?
This is nice thank you so much, oh you should scroll your body instead of fixed looks more natural and compliments your background image with the inset lines nice!
@Luis, glad you like it. Re: background – I prefer the way the content scrolls separately, as this adds depth and feels slicker to me.
Hey Megamatman
You need to have the code like this:
$.getScript("http://api.twitter.com/1/statuses/user_timeline/"+o.userName+".json?callback=twitterCallback2&include_rts=true&count="+o.numTweets, function() {
You had this
$.getScript(“http://api.twitter.com/1/statuses/user_timeline.json?screen_name=”+o.userName+”&count=”+o.numTweets+”&include_rts=true&callback=twitterCallback2″, function() {
Basically have the userName as the name of the .json file:
“+o.userName+”.json
Hope that helps.
[...] visite a página oficial do jQuery Plugin for Twitter e faça download do plugin. Dentro do arquivo compactado, virão alguns arquivos com exemplo, CSS, [...]
[...] visite a página oficial do jQuery Plugin for Twitter e faça download do plugin. Dentro do arquivo compactado, virão alguns arquivos com exemplo, CSS, [...]
I am getting a drop down log in http autho as of Monday Jan 17 I noticed this change at around 7pm. I was constanty making changes and updating a wordpress theme I am building so I know this was not happening before just from that instant and on any idea?
Authentication Required
A username and password are being requested by http://twitter.com. The site says: “Twitter API”
Thank you MysticBovine! That worked great.
Code worked well however The text is huge, the Loader does not show and the “box” does not show. any ideas ??
Thanks
First tweet is getting wrapped in an link tag:
<a xmlns=”http://www.w3.org/1999/xhtml”>
any ideas?
Good work… thx!
I believe I shall have to use this :)
Lately I’ve been getting a lot of errors like “Uncaught ReferenceError: twitterCallback2 is not defined”
A problem which seems to solve itself, as if the twitter stream is not available. I have this on multiple sites.
How can I prevent this message and show an appropriate text ?
This plug-in rules. I’ve stripped it of what i didn’t need and modified the CSS and it was extremely easy to implement (even for a Javascript newb like myself).
Best twitter/javascript piece of work I’ve seen. Good job.
which methods are available? is anything inherited that controls global options like language, timezone/etc?…
thanks for sharing your work!
Great tool, using it and it works really well. thanks for this
@Miguel Tavares
Thanx for the retweet fix
nothin shown, its only loading tweets …
there are no tweets
hello, I want to ask a question:
can we make the window more than 1 for a home page (i.e) because I am interested to make just one page of website with 6 to 12 small windows of tweet feed using jquery plugin.
I need to know how to set up the .css too
“the timestamp is then added as a title on the individual tweet list items”
How can I remove all the timestamps?
Hi,
First of all thanks for this awesome pluggin.
I just wanted to report a slight bug, thant can totally screw up a web page.
If the twitterCallback2 is not defined… the script keeps running but with an empty string, crashing some other JS…
MAybe you should think about developing an error message and a break to avoid this…
I’ll work on it and keep you posted also.
I am having problems with the feed not showing up in ie8. Does anyone have a fix for this?
[...] 2. jQuery plugin for Twitter [...]
Thank you, this works great!
[...] http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter jQuery plugin for [...]
Thanks for this brilliantly simple plugin!
I’ve added a simple change to open links from the feed in a new window/tab:
if (o.linkOpensNew) {
tl.find("span").each(function() {
$(this).children("a").attr("target", "_blank");
});
}
with a new option in the initialisation script of linksOpenNew: {true/false}
[...] when clicked dynamically change the overall size of text on the page. This is a JQuery version.jQuery plugin for TwitterDescription : jQuery plugin for Twitter is simple, unobtrusive and customisable client-side method [...]
Don’t just copy and paste what Matt has put. When copying and pasting it is replacing the last ” with a round thing. You will see that if you put it into a editor that it has a problem.
Hope this helps!
[...] Twitter İçin Jquery Plugin’i: En basitinden son tweet’lerinizi sitenizde gösterebilmek için kullanabileceğiniz bir jquery eklentisi. [...]
[...] chance de s’actualiser tout seul ! Pour ceux que ça intéresse, j’ai trouvé le plugin ICI, un peu de mal avec la personnalisation quand même, mais j’ai fini par y arriver (faudra [...]
Have a bug in IE8.
It doesn’t show the tweets.
Any ideas?
[...] 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. [...]
I am a little Javascript retarded, but I tried a few variations to get this linked to my twitter page but nothing I does seems to work for this code
http://twitter.com/“+o.userName+”
The twitter I am trying to put in there is allykats, so I’ve tried
http://twitter.com/“+allykats+”
since that seems to be the only thing I can do without getting a syntax error. Help?
Twitter will not open ALWAYS on the 1st load of the page, I have to refresh. Infact I think all new people to the page don’t see it. HOW can I fix it?
I have tried a few different things and no joy.
Excellent plugin, Damien. Worked like a charm for us.
BTW, I extended the plugin to include a couple different features –
hideTimestampLink:
Keeps the timestamp but strips out the link on it
showHashLinks:
Uses a reg. expression to add twitter searches for #hashtag items
Send me an email and I’ll mail you the code!
great. That is what I was looking for many days.
Thank uuuuuuuuuuuu
Lalit
Hi,
I have the same problem as @Andrew. Also the problem from @Oscar seems still to happen… Sometimes tweets are loaded, sometimes not :(
Would be glad if someone could help or maybe fix this.
[...] от Damien du Toit, скачать который можно по следующей ссылке: jQuery Plugin for Twitter. Если вы действительно желаете получить тщательный [...]
Thanks a lot for your plugin, we’re actually using it on our new website!
I’d love to see the possibility of a tweet filter, in particular so that tweets that start with “@…” can be ignored (i.e. filter out personal replies from the feed).
For everybody who is having the problem where the tweaks dont load first time and only load when you do a fresh.
This is a problem with the blogger.js not loading from twitter fast enough… the best solution (hack really) I found was to download the blogger.js file and then paste the 2 function it contains at the bottom of the jquery.twitter.js file and then comment out the blogger.js load line.
Normally the blogger.js loads fast enough for most browsers but in my case when i change the request to https to avoid a security error popping up on https pages where the script was included, the extra delay in settting the ssl connection gave me the error people had been describing…
PS Great Script!
[...] jQuery plugin for Twitter – blog – coda.coza. Tagged bookmarks, javascript, jquery, twitter, web development | Leave a comment [...]
BFish, I realised this today. The site I have this on is using Umbraco and someone had not put the script in the , so it was not loading quick enough. Fixed now.
Hey Damian, this is a great piece you have here. I was originally working with Jtwt, but it ended up causing issues with LavaLamp for jQuery. After a bit of searching I ended up coming across your plugin and I am very glad that I did! It does exactly what I need it to do without causing any conflicts.
The only issue I ran into was when I first loaded up the plugin. My heading and profile link would show up, even the loading box but the loader would disappear and the tweets never displayed. I checked out with the Chrome dev tools and saw that a height of 0 was being applied inline to the #twitter_update_list. The issue with this is that it’s impossible to override with just CSS since it’s inline. To fix it I just commented out line 87 in the twitter.js file:
tl.hide().css({height: 0});
That solved the problem for me, so you may want to look into it. If you figure out how to fix it let me know, I’d love to know exactly why that is causing an issue. I verified the issue in Chrome 11, Firefox 4, IE 9, Opera 11, and Safari 5 for Windows.
Thanks for your awesome contributions to the web community!
[...] jQuery plugin for Twitter [...]
I did what BFish said but I still had problems. So I removed the slide out duration and its works perfectly :)
Great little script thank you, saved a few hours coding. Needed to filter out the @ replies but a previous comment showed the light there. Bookmarked
[...] Twitter plugin a http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
does anyone know how to shift the time stamp to the right? as of now I have it aligned to the left but would like it aligned right… Just now, as I typed this, realized maybe my best bet is to target it with the page css rather then the twitter css… if that makes…
But in the even that it doesnt worl, anyone know how to style the timestamp without also styling any links in side a tweet?
[...] jQuery Plug-in for Twitter [...]
is there a way to have the twitter links pop up in a new window. right now they just pop up in the same window.
Hi, its says that this twiiter feed is not allowed for commercial projects, does this mean it cannot be used on a business website?
Is there anyway to remove the bullet points next to the tweets?
FastDesign_Karl, thank you so MUCHHH!!!! :)
hERE’S HOW to open in a new window all links in twitts:
if (o.linkOpensNew) {
tl.find(“span”).each(function() {
$(this).children(“a”).attr(“target”, “_blank”);
$(this).next(“a”).attr(“target”, “_blank”);
});
}
andd add in options line:
linkOpensNew: true,
[...] listados de carpeta en Apache a medida usando múltiples trucos de HTAccessPlugin jQuery para mostrar contenido de tu Feeds RSS de TwitterGoogChart: Clase PHP para aprovecharse de la API de Google ChartsFree CSS Drop-Down Menu , como su [...]
Esto funciona comp trompada de loco
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
Great script. But how do I filter through all the ## responses and only obtain the very last tweet?
I kept getting the twitterCallback2 undefined error.
I just updated my version of jQuery and it worked.
I was on 1.4.2 but now use the gogole link to 1.6.2 and it works.
says that this twiiter feed is not allowed for commercial projects, does this mean it cannot be used on a business website!!
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
Hi,
Nice plugin. I’d like to use it to my site which still unpublished. Would that be ok?
There is any way to get plugin’s links to open in a new tab/window?
how to add my latest 5 blogs to my website using jquery plugin
Hi. I am using the plugin. But 1-2 days. It doesnt work. I think Twitter made some changes.
Could you check the problem.
Thank you.
[...] por Damien du Toit, jQuery plugin for Twitter é um plugin simples, discreto e customizável, que obtem os feeds do Twitter e incorpora dentro de [...]
Hi, great script!
I’ve tried the timestamp removal but it didn’t work for me, can you tell where do you put it?
thanks
I’m not that very good when it comes to JS, but could someone explain to me once again how I get the links to target _blank?
Peace!
I’ve linked to the most up-to-date jQuery through google, but I’m still intermittently getting
twitterCallback2 undefined error
:(
[...] jQuery plugin for Twitter by Damien du Toit [...]
[...] jQuery plugin for Twitter [...]
Has anyone got a fix for ie8? I use plugin but it dont work there. Or is twitter having some problem with API’s!
Thanks in advance
Thanks a lot for your plugin, we’re actually using it on our new website!
How about an option to open links in a new window (i.e. set target=_blank). Have edited your script to add:
$(“ul#twitter_update_list li a”).attr(“target”, “_blank”);
but would be good to be an option.
Thanks for a great plugin!
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
[...] Labels – http://fuelyourcoding.com/scripts/infield/Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitterFlickr Feed – http://files.gethifi.com/posts/jflickrfeed/example.htmlDetect Browser [...]
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
[...] jQuery plugin for Twitter [...]
hey, is it possible to make the window more than 1 for a home page. Because I am interested to make just one page of website with 6 to 12 small windows of tweet feed using jquery plugin. Include css in it.
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
[...] 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. [...]
I agree with *Salmin..
Could someone please explain where in the code in detail to place the opens link in blank code?? I’ve tried a few diff things and can’t get it to work. Thank you.
——————————————————
if (o.linkOpensNew) {
tl.find(“span”).each(function() {
$(this).children(“a”).attr(“target”, “_blank”);
$(this).next(“a”).attr(“target”, “_blank”);
});
}
andd add in options line:
linkOpensNew: true,
Whats the correct way to open links in a new window.. Where to place the code?
[...] jQuery.twitter.min.js [...]
I’m having problems with getting it to open in a new page as shown below…
if (o.linkOpensNew) {
tl.find(“span”).each(function() {
$(this).children(“a”).attr(“target”, “_blank”);
$(this).next(“a”).attr(“target”, “_blank”);
});
}
When I put this in, nothing shows up at all for my tweets. Does it have to go in a certain spot?
I have added the following as well:
linkOpensNew: true,
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
Simple, easy to use, and works like a charm!
Thanks!
I found bug when loading multiple accounts.
by inserting code of http://twitter.com/javascripts/blogger.js and editing object id “”twitter_update_list” with username identifier, I had solved it.
is there any update plan for this problem?
Hey! I love this plugin because it’s simple and easy to use. However I’m having an issue with a couple small things. It’s not updating my twitter feed and it’s not showing the number of tweets I indicate. Any ideas? I’m linking to the latest query on Google. Could this be the issue?
This is a great plugin. However, I’m having a problem with it when using SSL. I need it to support https and not just http.
When I try it, I get an annoying warning on every page asking if I want to allow unsecure content. I believe it is because the twitter feed is grabbing data from http://twitter.com instead of https (that’s my guess). Any idea if this plugin can support https ?
thanks so much.
very nine plugin.
Simple and easy to customize,
Thanks a lot.
[...] Twitter plugin – http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter [...]
[...] jQuery plugin for Twitter – blog – coda.coza 10 Best Twitter Tools, Plugins, Widgets for WordPress BlogsTwitter is buzzing and here is a collection of top 10 twitter tools, plugins, widgets and scripts to integrate with your wordpress blog. These Twitter tools [...]
[...] jQuery plugin for Twitter: افزونه ای با کاربرد آسان که به کمک آن میتوانید توئیتهایتان را در وب خود نمایش دهید. این افزونه به آسانی قابل تغییر و شخصی سازی میباشد. این افزونه میتواند توئیتها را با یک افکت slide in نمایش داده و تعداد توئیتهائی که میخواهید نمایش شود قابل تنظیم میباشد. [...]
Leave a Comment
Your e-mail address is required, but will not be published.
26 October 2008
Chris M03:26 am
Nice one!