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
April 16th, 2010
Seems your demo is giving back a 400 Bad Request. All the time (tested in IE7/8, Firefox, Chrome)
« Reply
philipbeel Reply:
April 16th, 2010 at 11:40 am
@Mark McDonnell, Hi, I do not see that error in firefox, are you viewing my live demo, or have you downloaded a copy which is not working!?
« Reply
April 21st, 2010
this is lovely and simple, but for some reason I can’t seem to make the twitter logo.png and the following tweets align to the far left side of the tweets container div? I’ve tried various amendments on the css, but still there is a big gap on the left. Does anyone know what’s controlling this ‘x’ left spacing?
« Reply
philipbeel Reply:
April 21st, 2010 at 2:12 pm
@Darren, Do you have a link I can view?
« Reply
Darren Reply:
April 22nd, 2010 at 12:43 pm
@philipbeel, hi phil, I embedded the code and tweetable div into div’s on a test page of my site (not uploaded yet), which became slightly complex, but whilst trying to locate the source of this mystery margin, which I thought might have something to do with the div’s on my site, I went back to your demo, and realised that this mystery left margin/spacing is on your demo as well; ie: when you view your demo and move & expand the browser viewport left/right ect, the twitter logos all stay put at a fixed left margin. I just can’t work out why or how? Hope that makes sense?
« Reply
philipbeel Reply:
April 22nd, 2010 at 12:56 pm
@Darren, all the styling informaiton linked to the demo can be found here http://theodin.co.uk/tools/tutorials/jqueryTutorial/plugins/tweetable/style.css if you think the styles are conflicting with other elements on your page it might be worth removing them
darren Reply:
April 24th, 2010 at 10:16 am
@Darren, well I’m now working with just the demo & have spent some time now playing around with and removing various parts of the CSS styling, but the Twitter logo.png is still staying put in the same fixed position which is roughly 50 pixels from the left side of the browser viewport. By reducing/removing the padding etc I can get the text to shift over to the left slightly, but not the twitter logo. Very strange….
May 1st, 2010
Hi its an awesome plugin was wondering if there is a way to filter stuff out like mostly @replies which can be kinda weird without knowing what the other person said
« Reply
May 14th, 2010
Thanks for this! This is exactly what I was looking for. Something simple and customizable. It’s perfect for my needs and was simple to setup! This little bit of code is greatly appreciated.
Robert,
blanktree.com
« Reply
philipbeel Reply:
May 14th, 2010 at 3:43 pm
@Robert, no problem, glad you liked it.
« Reply
May 18th, 2010
I love the simplicity of this script! It’s really helping me learn some basics, too! It was working great, but then I added it to a WordPress theme:
test.jessicahannon.com
And now it won’t display the tweet anymore. Any ideas why? THANKS!!
« Reply
philipbeel Reply:
May 18th, 2010 at 6:00 pm
@Jay, Thanks for your kind words. I checked out the link, The tweet at the top, is this now working, or is it static? Great looking site by the way
« Reply
Jay Reply:
May 19th, 2010 at 1:50 am
@philipbeel, I finally got it to work! I just had to make one call to the latest jquery (or at least 1.4.2.min) to get both the Twitter post and the fancybox effect to work!
BTW, is there any way to NOT show @ replies? Like, show all tweet EXCEPT ones that start with “@”?
THANKS!!
« Reply
philipbeel Reply:
May 19th, 2010 at 8:41 am
@Jay, Currently not, but it is something I could think about adding in the future when I get the time. No Problem!
June 8th, 2010
Thank you very much. Very very good code!
« Reply
June 30th, 2010
Is there a way to take out the links like the @ reply or make them open into a new window?
« Reply
philipbeel Reply:
July 1st, 2010 at 8:54 am
@Meghan, Not currently, although there has been some new funcitonality requested by several guys so I am in the process of schedualing it in. Whatch this space.
« Reply
July 15th, 2010
@philipbeel – do you have this hosted anywhere that isn’t minified? I started to build something like this for my site but decided not to reinvent the wheel… and I want to add some stuff to it. For example, I want the option to filter out @replies to display only real “content” and not “conversation”.
(Feel free to shoot me an email).
« Reply