Tweetable – A jQuery plugin
Tweetable is a lightweight jQuery plugin which enables you to display your twitter feed on your site quickly and easily. More than just displaying the feeds you can highlight @replys as well as links being dynamically generated for ease of use.
Usage
To use tweetable simply create an empty div and apply an ID or class of your choice, like so:
<div id="tweets"> </div>
You will need to call in the jquery framework before you call in jquery.tweetable.js like so:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.tweetable.js"></script>
To initiate the plugin simply call it on your ID like this:
$(function(){
$('#tweets').tweetable({username: 'philipbeel'});
});
Options for Tweetable
There are some added parameters that you can pass into tweetable for extra functionality. as default you must enter your username, you can also control the date and set the limit of tweets you wish to display, like so:
$(function(){
$('#tweets').tweetable({username: 'philipbeel', time: true, limit: 10});
});
Demo
You can view this jQuery plugin in action here. I have tested in IE FF and Safari, but if you come across any bugs or can see any ways to improve this plugin all suggestions are welcome.
Version History
13/08/2009 – Version 1.0
21/08/2009 – Version 1.2
New features included
- Compressesed lightweight version of the plugin
- Corrected unordered list formatting
August 14th, 2009
does not work in IE7.
Line: 11
Error: Expected identifier, string or number
Line: 8
Error: Object doesn’t support this property or method
« Reply
August 14th, 2009
Great plugin. I use similar for RSS feed parsing into html but its php.
« Reply
August 15th, 2009
@Murali Thanks for letting me know, all fixed – please feel free to re-download! Cheers
« Reply
August 15th, 2009
Awsome plugin, it’s really useful and easy to use.It’s a really time saver.Great for small projects. Really thanks.
« Reply
August 17th, 2009
Excellent. Thanks you for such a quick turnaround.
« Reply
August 20th, 2009
It’s awesome, but i have a doubt, the ul close after the first li
... etc..
Regards and thank you for this
« Reply
philipbeel Reply:
August 21st, 2009 at 1:53 pm
Thanks for all the feedback, the plugin has now been updated to version 1.2 and the issue you mentioned has been fixed.
« Reply
August 21st, 2009
Thanks for the plugin! I really love building for jQuery… its so fun, and I love sharing with others.
You have an error on line 27, where you test for defaults.time == true vs. options.time == true. As it currently stands, it can never be turned off by using an option.
I have one idea for you as well. I like relative time (3 minutes ago, 1 day ago, etc) so when I made a twitter widget, I adapted some code from 37Signals to gain that affect. I cleaned it up a bit, and pasted it here: http://gist.github.com/172279 if you are interested in integrating it.
Great work!
« Reply
August 21st, 2009
Hi Phillip,
Love the idea and simplicity of implementation. I immediately implemented the plugin on my site, and made some (hopefully for the better) changes to the plugin you may be interested in. Some things I changed:
- Cleaned up the append syntax
- Added link_to_tweet option
- Auto-link topic hashes
You can see the changes on my site: http://rand9.com/. The tweet list is at the bottom of the page. Again, thanks for this awesome plugin!
« Reply
philipbeel Reply:
August 25th, 2009 at 11:37 am
@BJ Neilsen
The plugin looks ace, thanks for letting me know! The code is much cleaner too, Cheers!
« Reply
August 22nd, 2009
Is there a way to make the output look like a real twitter stream with more than 1 user?
I mean an exact twitter page but only on html page.
« Reply
August 25th, 2009
Excellent stuff, thanks….very easy,!….but why dont work with IE7.
« Reply
philipbeel Reply:
August 25th, 2009 at 8:56 am
@pabsso Thanks for your comment. I have tested this plugin on IE7 XP and IE7 Vista and never had any issues. could you elaborate on your platform and version this would help with any necessary bug fixing! cheers!
« Reply
August 26th, 2009
This script very good thanks
« Reply
August 30th, 2009
Any possibility of pulling multiple feeds?
« Reply
September 1st, 2009
thanks 4 share!……
« Reply
September 2nd, 2009
Like Matt, would love to use it for multiple feeds.
« Reply
Lodge Reply:
February 26th, 2010 at 5:12 pm
@Rob Lang,
Any updates on this feature?
« Reply
Rob Lang Reply:
February 28th, 2010 at 5:04 pm
@Lodge, I actually did a bit of a work-around. I used Yahoo Pipes to aggregate the feeds together and then used some Jquery to load the final result.
« Reply
September 2nd, 2009
Anyone know how to make this work inside of a google maps infowindow?
« Reply
September 3rd, 2009
Hello Philip,
Thanks for this great plugin which only takes seconds to set up!
We have added it to our portfolio: http://www.id3.co.th
Sometimes there’s an error when twitter.com can’t be reached or doesn’t send content fast enough (I tink).
Suggestion: A caching system to avoid this and limit the number of requests. The feed would be checked every x minutes and data would be kept in a cached file that would be used to display the latest tweets.
Intersting interview about Netlings!
Keep up the good work!
« Reply
September 11th, 2009
@philipbeel
Could you post the changes @BJ Neilsen made? I can’t seem to find them on his site now. I think he has abandoned twitter all together!
« Reply
philipbeel Reply:
September 12th, 2009 at 1:06 pm
@Sean – its up now, thanks
« Reply
September 11th, 2009
A fellow jQuery-ite saw that I had made some changes to the plugin (from my comment above) and went looking for it on my site (rand9.com). Unfortunately, a few weeks ago I decided to pull a bit of a _why and shut down my twitter and fb. As such, the tweetable plugin isn’t on the site anymore, and he was disappointed.
However, the plugin is still available in its modified state on rand9.com in the public javascripts folder. You can access it by going here: http://rand9.com/javascripts/jquery.tweetable.js.
PS. If you’re wondering why I went the way of _why, this explains somewhat: http://www.rand9.com/blog/learning-how-to-focus
« Reply
October 29th, 2009
hello,
i download your code and it is working perfectly but there coud be a problem work’n with lightbox ./
i added your code to my html as i said it works well but when i clicked my lightbox button i see it didnt work anymore. here is the url
lightBox & tweetable:
http://kaanguryuva.com/sr/html/kaynaklar.html
just lightBox:
http://kaanguryuva.com/sr/html/kaynaklar_withOutTweetable.html
pls click the small thumbnails
thnk you for attention
see you
Your comment is awaiting moderation.
« Reply
philipbeel Reply:
November 1st, 2009 at 8:17 pm
@kaan – Thanks for the examples I will run a couple of tests and let you know if I can see whats going wrong. Thanks for letting me know!
« Reply
October 29th, 2009
Works beautifully for me all except the time stamp. I posted a tweet at 3:29pm to an account that uses PST time, and it shows in the Tweetable list item as 22:29pm.
Any ideas on how to rectify this?
« Reply
philipbeel Reply:
November 1st, 2009 at 8:13 pm
@Masey – I know that feedburner can sometimes be inconsistent if not unreliable with aggregating accurate feed counts. I will have a read up on this date issue and let you know if I can find out whats up with it! cheers for the heads up!
« Reply
November 16th, 2009
Love this script and really want to use it on a client site I am working on at the moment. Unfortunately the page I want to run it on is already using “Mootools” for another feature, and Tweetable doesn’t seem to “play nicely” when this is the case.
Any way around this, or perhaps a “Mootools” version available?
« Reply
philipbeel Reply:
November 16th, 2009 at 10:47 am
@Masey – Hi, I am a self confessed jQuery fanboy so its probably not something I would write myself, but anyone is more than welcome to have a crack at rewriting the code to fit the moo tools framework!
« Reply
November 16th, 2009
Understandable. Just thought I would run it by you. Do you think it would work if I ran the mootools OR jquery component in an iFrame instead? Would that eliminate the interference?
« Reply
philipbeel Reply:
November 17th, 2009 at 9:16 am
@Masey – It could be worth a try. Although I think I did something similar before the iframe was picking up the parent frames JS. Worth a shot though if there is no moo tools solution out there.
« Reply
December 3rd, 2009
Same problem with incorrect times showing up. Posted at 2:06PM Pacific and getting output as 22:06
« Reply
December 29th, 2009
I’m having trouble getting the text to wrap correctly. Each li overlaps the other when you constrain the container div’s width.
« Reply
philipbeel Reply:
December 29th, 2009 at 11:56 am
@Bender, Could you add a link So I may see the issue for myself. I might be able to fix your issue on the fly in firebug.
« Reply
Bender Reply:
December 29th, 2009 at 11:59 am
@philipbeel, testing it @ difyr.com/blogger.
« Reply
philipbeel Reply:
December 29th, 2009 at 12:02 pm
I get a Forbidden access message on that page
Bender Reply:
December 29th, 2009 at 12:03 pm
@Bender, sorry difyr.com/blogger/index.asp
Bender Reply:
December 29th, 2009 at 12:01 pm
@philipbeel, BTW, sorry I know nothing about jQuery. I imagine something from the uscg stylesheets is throwing things off.
« Reply
Bender Reply:
December 29th, 2009 at 12:26 pm
@philipbeel, deleted the link to your style sheet and it started to work. go figure. many thanks for your script!
« Reply
February 15th, 2010
Ich sehe nichts mit firefox 3.6?
« Reply
February 15th, 2010
I see nothing with firefox 3.6?
« Reply
February 16th, 2010
Hi,
is it possible to have the tweets only in one line sn sequence through a set number of recent tweets?
Thanks Thomas
« Reply
March 8th, 2010
Thanks for sharing !!
« Reply