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
163 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!
First, I think that is is great; however, I am having trouble configuring the output with css. Maybe it’s a lack of knowledge on my part, but I am not sure what to do to style the content. Any thoughts?
Thanks a lot!
UMMM NEVER MIND! Sorry for the false alarm … as soon as I sent my original message I figured it out :D Thanks anyway
Excellent plugin! Works like a charm and easy to customize! Thank you.
[...] jQuery plugin for Twitter [...]
to: Coda
ref: Tommy Johnsen
ref: mira
I am having the same issue. When the page is first discovered by a new user the script does not show. Only upon refresh does it load. I had to refresh IE for or 5 times on one occasion while testing. I LOVE this plug-in and need a solution to implement it.
Exactly what happens is the “loading…” text appears along with the .gif for a moment and then disappears without the tweet loading after, leaving a blank area.
Tested and had similar issues in: FF 3.5.3, IE7, Chrome 3
FYI: I tested Twitter’s own widget with the same result and need to refresh. Issue from Twitter’s side? Perhaps a workaround?
Thanks!
@Eric: Yeah I think this is an issue on Twitter’s end. I get the same thing happening using other Twitter scripts. Perhaps the script could be updated to receive a success or failure response and then act accordingly, I’d have to check. I don’t think it was possible when I developed the plugin.
great script!
but, is there a way to make urls that dont begin with http into links? eg, http://www.bbc.com instead of http://www.bbc.com? twiiter automatically makes www urls into links but i dont seem to get the link when using this script.
thanks!
Got a weird bug that I can’t upload, but will describe: it seems to conflict with the rich text editor TinyMCE (using its jQuery plugin mode). When I remove the Twitter plugin from my page, the text editor loads fine, but when the Twitter plugin is running, my text editor fails to load. No idea why and I’m pretty certain I have the syntax right, but there you go.
Great little script this, I have one problem in IE 6 (don’t we all), I get an error message that says:
An error has occurred in the script on this page.
Line: 20
Char: 26884
Error: Invalid argument
Code:0
Obviously just .5 of my target audience that use IE6, if that, just thought if it was easy to fix…
Thanks
[...] Here you can learn how to bring out a Live Twitter feed on your website with jQuery. Web Site Demo Download AKPC_IDS += "618,";Popularity: 1% [?] Share and [...]
[...] 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. [...]
how can i get the links to open in new windows? i got the profile link to open in a new window in the previous version but cant get it to do it on the new version.
Thanks in advanced
Hello Damien, thanks for developing and sharing this nice script. It’s working great for me, but I have two questions:
1. Has the problem with the tweet not loading from time to time been resolved so far?
2. Is it possible to change the translation of the timestamp? Has this something to do with the blogger.js?
Thank You!
A quick update for those wondering how to do these two things:
1. Translate the timestape to your local language:
- Download http://twitter.com/javascripts/blogger.js
- Edit the strings at the bottom of the file to your liking
- Load your local blogger.js in the header of the page
- Change the URL in jquery.twitter.js to your local blogger.js
Done.
2. Filter out all of your replies
Henrik N wrote the solution in a post above, here’s the easy way to implement it in the jquery.twitter.js:
- Edit jquery.twitter.js and delete line 72
- Enter the following code after line 63:
$.getTwitterCallback = function(tweets) {
if (o.rejectRepliesOutOf) {
tweets = $.grep(tweets, function(tweet) { return !tweet.in_reply_to_user_id }).slice(0, o.numTweets);
}
twitterCallback2(tweets);
};
$.getScript("http://twitter.com/statuses/user_timeline/"+o.userName+".json?callback=jQuery.getTwitterCallback&count="+(o.rejectRepliesOutOf || o.numTweets), function() {
- Enter the following code to the options, for instance after line 24 (don’t forget to add a comma after line 24!):
rejectRepliesOutOf: true
That’s it!
Thanks to Henrik N. for writing this up!
I second Tom’s request; Is there a way to get links to open in a new window?
Thanks for the sweet coding!
@Tom & @Stereohero: you’ll have to add some custom jQuery code for that. Maybe something like this:
$("a", ".twitted").attr("target", "_blank");
Use with caution – I’m not a fan of forcing links to open in a new window/tab. That’s a user preference set in the browser and it should be acknowledged and respected as such!
Thanks a million. My coding skills are appalling and I got it working easily.
Is there any way to get a favorites feed?
Thanks again.
Hi,
Great little plugin. I don’t know if this has been mentioned and will probably be an easy fix, but I cannot style the profileLink. Well I can style it but cannot change the color of the text, I also cannot set text-decoration either. It just shows up as the horrible blue link with underline.
Any help with this would be great because it is bugging me, I know I must be missing something but cannot see through my eyes.
Cheers Dan
@Dan: you should be able to style the profileLink link colour by adding a new CSS rule to target the link itself. Based on the generated markup:
<p class="profileLink"> <a href="http://twitter.com/jquery">http://twitter.com/jquery</a> </p>
You would then add this CSS rule to change the default link colour to red, for example:
.twitted p.profileLink a { color: #f00; }
would be cool if it was possible to include 2 or more twitter usernames (class instead of id for the update list?)
Is there a way to have scrolling feeds?
I’m using the jquery plugin, it works great. However sometimes the Twitter feed does not display at all; other times it does — it is quite temperamental.
Is there a way to do a “failure” message? Or is there a way around the issue of Twitter feeds failing?
Thanks.
@AD –
I had the same problem using a different jquery/twitter script and solved it by setting a timer right before the call is made to get the twitter data. Then canceled it if the tweet was displayed, otherwise it just showed a “visit us at twitter.com/whatever”. That method would probably work here as well.
Coda is right when he says its an issue on Twitters end, I haven’t seen any jquery/twitter script that can get around this. Kinda funky.
@Steve: Could you post the code for the timer and how to make it work if the result is null/empty?
Thanks
@Steve @AD: a timer sounds like a good idea… with a “timeout” seconds count preference. I’ll add this into the next update, whenever that is. ;) Shouldn’t be too tricky though, if you’re familiar with the timeout methods.
Thanks @Coda for the target _blank code.
But i can’t get it to work. Where should i put it?
This is the one I’m referring to:
$(“a”, “.twitted”).attr(“target”, “_blank”);
oh, and thank for a great plugin!
Cheers!
HiCoda,
Yeah managed to figure it out, many thanks
Hi again
Really like the plugin but i need it to make the links open i a new window.
Can anyone help me with this?
According to posts above this is the code to be used, but i can’t get it to work.
Where should i put it?
$(”a”, “.twitted”).attr(”target”, “_blank”);
Cheers!
@ AD, sorry for the huge delay. I’m not familiar with this particular script, but I would put the timeout “var timeOut = setTimeout( theTimeout , 4000);” directly before the call to the Twitter service.
Then I put the call to clear that timeout “clearTimeout(timeOut);” directly before the call to print the twitter results to the page.
Then just contain the stuff you want to run after 4000ms in a function called “theTimeout”. Also make sure to set a boolean or something in this function, then check for it before outputting your twitter results, so you dont end up printing the error message, then the twitter results when they come in a few seconds after.
how about you would like to expose all the tweets of your friends in twitter?.. is that possible on your plug-in.. and How?..
Thanks & Regards
@Jonas – I was trying to follow your instructions so I could use this script to hide @replies however, I keep getting an error after I add the code you recommended after line 63.
Could you post a link to your working modified script (jquery.twitter.js) ?
Thanks
foochuck
having the same problem as Stefan
Really like the plugin but i need it to make the links open i a new window.
Can anyone help me with this?
According to posts above this is the code to be used, but i can’t get it to work.
Where should i put it?
$(”a”, “.twitted”).attr(”target”, “_blank”);
Cheers!
@Greg: you add it after you’ve called the twitter script. ie. in my demo, in the following function:
$(document).ready(function() { .... });
@coda: Is there a way to hide all @replies and just show my regular tweets instead of everything from my twitter timeline?
Regarding @Greg’s question & @coda’s reply, is this how the code should look?
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "foochuck",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
showHeading: false,
headingText: "Latest Tweets",
showProfileLink: true
});
$("a", ".twitted").attr("target", "_blank");
});
HI,
I tried you script to twitter feed on my page. I came really nicely!
I was wondering if we can put date first then the status? and apply some display logic in the date format?
Anyway, it is really get-set-go stuffs, thanks for sharing.
@Charley, yes, that looks correct. Any problems?
@santosh: it’s possible to swap them around with some custom jQuery, and reformatting the date too, but I haven’t provided for that.
Hey, really great plugin (saved me a bit of effort and it works very well). So, here’s my problem (it has nothing to do with your plug-in, per se…). Sometimes my fiance annoyingly posts really long URLs in her tweet instead of using a tiny URL service. This makes the output look super ugly because the URL is longer than the container DIV is wide. I think it would be an awesome extension to your plugin if you added code to, say, limit the maximum length of any word in a tweet.
So that a setup like:
$("#twitter_widget").getTwitter({
userName: "someperson",
numTweets: 1,
loaderText: "Loading tweets...",
slideIn: false,
showHeading: false,
headingText: "",
showProfileLink: false,
showTimestamp: true,
/* new thing */ maxWordLength: 20
});
would change something like:
http://some-really_big/longURL.php?foo=bar into http://some-re…bar
@Coda – That sample I posted doesn’t seem to change anything – the links still open in the same browser window.
@Charley: I just tested it myself, you’re right, it doesn’t work – I wasn’t considering that the content is added dynamically, so we have to use a live() event. This works for me:
$("a", ".twitted").live("click", function() {
$(this).attr("target", "_blank");
});
@Kyle: Nice suggestion. Take a look at this discussion on the subject (last answer looks promising), and this snip might help too. Unfortunately I can’t help more than that right now. When I get around to releasing a new update, I’ll consider adding this as a new feature.
Thank you for letting
Hiya,
First off, thanks for this. Simple, customizable, exactly what I was looking for.
I discovered a problem this evening though that affects your plugin as well as a couple of others (including Twitter’s own widget) that I’ve tried. Not really a bug, more like a change made by Twitter that may have broken certain functionality of the plugin
If the plugin is set to display the last three posts, for example, and those three posts are retweets posted using Twitter’s new ‘retweet’ button, nothing will show up. If there are two retweets and one user-generated post, then only the one user-generated post will show up.
However, if you retweet the old/normal way, ie ‘RT @ username’, those tweets will show up along with the user-generated posts.
I’ll be instructing my clients to retweet with ‘RT @’ but was wondering if anyone else has noticed this or come up with a workaround?
Thanks.
@BFS: thanks for letting me know. I’ll take a look when I get a chance.
(first comments are moderated, you would have received a message saying so)
@coda – Thanks that live() event helped to fix it and it now opens the link in a _blank target.
[...] Komodo Media, called Social Media Network Icons. The Twitter gadget on the sidebar is powered by a jQuery plug-in for Twitter by Codo Coza. Comments are powered by TinyMCE, a Javascript WYSIWYG editor.That’s about all, [...]
[...] Shared jQuery plugin for Twitter – blog – coda.coza. [...]
Hiya, Fantastic Twitter script!!!
Do you have any plans to make something similar for Flickr – something which displays their latest pictures?
Thanks.
@Ryan: thanks! I’m pretty sure there are already a few Flickr photostream scripts worth checking out.
Is there a way to add ’source’ to the timestamp? ie. …About 10 hours ago via Tweetdeck
or something like that? Cheers!
@Big A: afraid not, this plugin is based on Twitter’s HTML badge and their script doesn’t provide that data.
Excellent plugin, thanks.
I use this with some minor tweaks on my site. Great job Damien
I’m wondering on the a tag that is created for the time stamp how to remove that 85% font-size, could you help me?
@Dane: you can change the size of the timestamp link by targetting it in the stylesheet, for example:
.twitted ul#twitter_update_list li a {
/* timestamp link */
color: #f00;
font-size: 1em;
}
But keep in mind that this will affect the other links in the content of the tweet, so you will have to override their font size.
First of all, @Coda, let me thank you for providing this plugin. I am a self-taught noob, but your examples are awesome and easy to follow. I am trying to implement a one line Twitter feed with ’sliding’ updates (I don’t even know if I’m phrasing this correctly)
I see that you have a slideduration option as well as slidein. I have played around with adding slideduration: true; under slidein: true but I don’t get any slide effects.
This site “http://www.giraffe.net/” has a working example of what I would like to recreate. Can someone please take a peek and let me know what I’m doing wrong?
Here is my code so far:
Untitled Document
<!–
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "fpsummerfest",
numTweets: 2,
loaderText: "Loading tweets…",
slideIn: true,
slideduration: true,
showHeading: false,
headingText: "Latest Tweets",
showProfileLink: false
});
});
Okay- I’m a dork- I was thinking slide as in rotating in new updates one at a time…oops-
Any way to do that like on this website:
Thanks!
[...] jQuery plugin for Twitter [...]
Hi,
Excellent plugin.
Im no good at licensing, etc, so its just a big blur to me. So I would appreciate it if you could get back to me on this (although the way I have done it is probably wrong).
I set up the plugin and noticed some of the text was a different size to the rest, mainly the timestamp. I’ve removed this using:
tl.find("li a").each(function() {
$(this).removeAttr('style','');
});
Is it ok to use the plugin with modifications like this?
I made the changes, basically to make the output look ‘prettier’.
@commandrea
That effect appears to be acheived by placing the ul in a div, setting the overflow of the div to hidden, then getting the list to slide up. If you havent got the firebug addon for firefox, get it then go the giraffe.net and highlight the twitter ul and watch what happens.
@coda
Thanks.
Hi, the script seems to stop working then i upgraded to jquery 1.4.1, anyone know why?
One minor issue is that blogger.js doesn’t always load quick enough for the remaining code to utilize it. I’ve noticed this a lot more frequently in IE8.
The quick solution is to change it up to:
$.getScript(“http://twitter.com/javascripts/blogger.js”, function() {
$.getScript(“http://twitter.com/statuses/user_timeline/” + o.userName + “.json?callback=twitterCallback2&count=” + o.numTweets, function() {
…
});
});
So far this has fixed the issue entirely.
Thanks for the quick n’ easy plugin!
[...] Most easiest way is to use javascript so nothing server side needed.. jQuery plugin for Twitter – blog – coda.coza [...]
thanks!! this is what ive been looking for!
Leave a Comment
Your e-mail address is required, but will not be published.
26 October 2008
Chris M03:26 am
Nice one!