Interested in purchasing one of the best wordpress themes in town? check out Cult on themeforest »

tweetableHeader

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.

Download the plugin

Try the demo

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, replies:false});
});

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

09/08/2010 – Version 1.3

16/10/2010 – Version 1.4

29/12/2010 – Version 1.5

New features included

  • Compressesed lightweight version of the plugin
  • Corrected unordered list formatting
  • Both minified and expanded versions of the plugin
  • Now with the option to filter out @replies
  • Updated to work with the latest version of jQuery 1.4
  • Updated to run with the latest twitter api version
  • Compatability with IE browsers added
  • Numeric only date stamp structure implimented for international use
  • Code refactored for optimisation
  • Minified version released using YUI compression

About the author

My name is Philip Beel. I have four years commercial experience in front end web development. My disciplines include XHTML, CSS, PHP, MYSQL, Smarty and javascript. I am also a keen advocate of the jQuery framework.

Read more posts by


161 Comments on Tweetable – A jQuery plugin

  1. Murali

    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

    design web london Reply:

    @Murali,
    exactly it wont work with IE7

    is there anything we are missing in the code ?

    « Reply

    philipbeel Reply:

    I will need to do some tests to investigate this issue. What operating version and system pack are you using?

    « Reply

    Basket Nike Pas cher Reply:

    @Murali, Nice, and thanks for sharing this info with us.Good Luck!

    « Reply


  2. Website Design Kent

    Great plugin. I use similar for RSS feed parsing into html but its php.

    « Reply


  3. philipbeel

    @Murali Thanks for letting me know, all fixed – please feel free to re-download! Cheers

    « Reply


  4. Lucas Tadeu

    Awsome plugin, it’s really useful and easy to use.It’s a really time saver.Great for small projects. Really thanks.

    « Reply


  5. Murali

    Excellent. Thanks you for such a quick turnaround.

    « Reply


  6. PeopleStrange

    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:

    Thanks for all the feedback, the plugin has now been updated to version 1.2 and the issue you mentioned has been fixed.

    « Reply


  7. Doug Neiner

    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


  8. BJ Neilsen

    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:

    @BJ Neilsen
    The plugin looks ace, thanks for letting me know! The code is much cleaner too, Cheers!

    « Reply


  9. Omer Rosenbaum

    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


  10. pabsso

    Excellent stuff, thanks….very easy,!….but why dont work with IE7.

    « Reply

    philipbeel Reply:

    @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


  11. Nurettin

    This script very good thanks

    « Reply


  12. Matt

    Any possibility of pulling multiple feeds?

    « Reply


  13. pabsso

    thanks 4 share!……

    « Reply


  14. Rob Lang

    Like Matt, would love to use it for multiple feeds.

    « Reply

    Lodge Reply:

    @Rob Lang,
    Any updates on this feature?

    « Reply

    Rob Lang Reply:

    @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


  15. RS

    Anyone know how to make this work inside of a google maps infowindow?

    « Reply


  16. nachomaans

    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


  17. Sean

    @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:

    @Sean – its up now, thanks

    « Reply


  18. BJ Neilsen

    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


  19. kaan

    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:

    @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


  20. Masey

    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:

    @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

    Phitastic Reply:

    @philipbeel, @Masey — I’m still getting this error in the latest version 1.3. I’m curious if anyone has an idea how to fix this?
    Cheers,
    Philipp

    « Reply


  21. Masey

    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:

    @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


  22. Masey

    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:

    @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

    Fab. F Reply:

    @Masey, what about jQuery.noConflict?

    http://api.jquery.com/jQuery.noConflict/

    « Reply


  23. TDY

    Same problem with incorrect times showing up. Posted at 2:06PM Pacific and getting output as 22:06

    « Reply


  24. Bender

    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:

    @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:

    @philipbeel, testing it @ difyr.com/blogger.

    « Reply

    philipbeel Reply:

    I get a Forbidden access message on that page

    Bender Reply:

    @Bender, sorry difyr.com/blogger/index.asp

    Bender Reply:

    @philipbeel, BTW, sorry I know nothing about jQuery. I imagine something from the uscg stylesheets is throwing things off.

    « Reply

    Bender Reply:

    @philipbeel, deleted the link to your style sheet and it started to work. go figure. many thanks for your script!

    « Reply


  25. HaberFon

    Ich sehe nichts mit firefox 3.6?

    « Reply


  26. HaberFon

    I see nothing with firefox 3.6?

    « Reply


  27. Thomas

    Hi,

    is it possible to have the tweets only in one line sn sequence through a set number of recent tweets?

    Thanks Thomas

    « Reply


  28. Theo

    Thanks for sharing !!

    « Reply


  29. Mark McDonnell

    Seems your demo is giving back a 400 Bad Request. All the time (tested in IE7/8, Firefox, Chrome)

    « Reply

    philipbeel Reply:

    @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


  30. Darren

    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:

    @Darren, Do you have a link I can view?

    « Reply

    Darren Reply:

    @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:

    @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:

    @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….


  31. Juan

    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


  32. Robert

    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:

    @Robert, no problem, glad you liked it.

    « Reply


  33. Jay

    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:

    @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:

    @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:

    @Jay, Currently not, but it is something I could think about adding in the future when I get the time. No Problem!


  34. cihan

    Thank you very much. Very very good code!

    « Reply


  35. Meghan

    Is there a way to take out the links like the @ reply or make them open into a new window?

    « Reply

    philipbeel Reply:

    @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


  36. Tim Marman

    @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


  37. Andy Babic

    @philipbeel – Thanks for this script, I think it’s brilliant. Very easy to configure, and get working. The code is also nice and neat, so I’ve been able to tweek where necessary. Before I go adding this to more sites though – could you tell me if it is going to be affected by the shutting down of basic authentication on the 16th August? http://countdowntooauth.com/

    « Reply


  38. yasamphani

    awesome…!!!

    « Reply


  39. Karen

    I’ve got a Twitter feed embedded on a web page – working fine. However, I work in a school district and Twitter is filtered out from school building computers. Makes sense, since we don’t want kids on social media during school. BUT, this Tweeter feed is just for sports scores and I would love to find a way to just get it displayed, not interactive or anything. Any ideas?

    « Reply

    philipbeel Reply:

    @Karen, I think the problem you are going to encouter is with the twitter API itself. Every time you make a request, regardless of what it is, you are making a HTTP request to twitter, if your schools firewall / filter is stopping this, then it will be very difficult. You could try using a proxy service like http://www.hidemyass.com/ to make the call, although I have not tried this out myself, so no ganrentees it would work. Good luck!

    « Reply

    Karen Reply:

    @philipbeel,

    Thanks for the reply — here’s what I wound up doing. I post the updates on our website and use the RSS feed to pour directly into Twitter via twitterfeed.com. Basically, I’m going backwards, but it works for us just great!

    « Reply


  40. tokat nakliyat

    good code thanks

    « Reply


  41. Adam Florin

    Nice work! You should put this up on GitHub though… it’s already out of date. API calls should be going to api.twitter.com, so that all parameters are accepted (the important one for me being include_rts, without which retweets are not displayed and the limit is often not reached…).

    http://dev.twitter.com/doc/get/statuses/user_timeline

    « Reply

    philipbeel Reply:

    @Adam Florin, Thanks for the headsup. I really want to set aside some time and get this onto github. If/when I do I will update the blog. Many thanks for your suggestions.

    « Reply


  42. Marciano

    Hi, Awesome that you made it this easy, thanks! A question thou; is it possible to change the language of the date? I’d love it to be Dutch :)

    Thanks in advance,
    //Marciano

    « Reply

    philipbeel Reply:

    @Marciano, Hi Marco, thats not really within the scope of the plugin, But I am sure you could do something like that, or perhaps just change the PHP date object to be DD/MM/YY perhaps? Feel free to fork this on github

    « Reply

    Marciano Reply:

    @philipbeel, Marciano* Actually I wouldn’t have a clue how to :) Also, any way to work around the firewall thing? Can’t see the Tweetable plugin anymore due to the multiple requests as you described above, but the way Karen solved it doesn’t say much for a newb like me :)

    « Reply


  43. paul

    Hey does anyone have an idea how to post tweets from this api? I’m trying to find a jquery api that will do this, most of them just seem to search or access tweets. I need to post from jquery.

    Any help would be appreciated.

    « Reply


  44. Joe

    Nice plug in but it does not display correctly in IE. Even testing your demo in IE produces undesireable results.

    « Reply

    philipbeel Reply:

    @Joe, Can you give me some info on your OS and version of IE?

    « Reply

    Phitastic Reply:

    @philipbeel, @Joe I have the same problem with IE9 under Windows 7. Either in compatibility mode or regular mode, it doesn’t work right (even in your online demo).
    Hoping for any news ;)

    « Reply


  45. hostgator

    Great Jquery plugin. I love it and will use it with a few applications.

    « Reply


  46. Jim C

    Retweets do not display in my feed. Is this intentional? Thanks.

    Jim

    « Reply

    philipbeel Reply:

    @Jim C, the plugin should filter out @replies, but RT’s should stay in. I will look at this issue further, thanks for raising it!

    « Reply


  47. Teemu

    Hi, nice plugin.

    I have the following problem: the plugin works fine when opening the html file manually in a browser, but doesn’t work on the server, or when using MAMP & localhost. It breaks all other jquery too. When I remove tweetable calls from the code, the other jquery works fine on the server. Any ideas?

    « Reply

    philipbeel Reply:

    @Teemu, are you using this in conjunction with any other jQuery plugins? Do you have a link to the code?

    « Reply


  48. Niels

    Hi,
    I’m really liking the plugin – looks and works great! …except in IE. The plugin itself works, but it is not responding to the CSS file. I created a IE specific style sheet w/ an statement, and I see it respond (updated the font) but only when applied to the ‘body’ section, whereas your original css file had it the css rules applied to #tweets li – - however, it’s still missing correct line breaks, indentation & the twitter.png image….

    is it my CSS that’s faulty or the Javascript? i’m I seeing a case of the IE bug (Disappearing List Background Bug) ?

    any help would be greatly appreciated.
    thanks again for sharing this.

    here’s the link to the site without the IE statement:
    http://n-toft.com/portfoliocycle/

    « Reply

    Phitastic Reply:

    @Niels, i was wondering if you made any progress on this? I have the same issues with IE (in my case, IE9 beta under Windows 7). Maybe we could post any sort of updates on this issue here? Cheers!

    « Reply


  49. Niels

    @Phitastic, I sure will. I’m still trying to figure it out – but will let you know what i find.

    « Reply


  50. Philipp Robbel

    Hi all,

    I made the necessary changes for the script to work with IE. I bumped the version number to 1.4. It’s available at http://www.robbel.com/tweetable.mod.zip . Tested with IE9 but should also work with IE7/IE8.

    Cheers,
    Philipp

    « Reply

    Niels Reply:

    @Philipp Robbel, THANK YOU!!! this works like a charm.
    @Phitastic – this solves my problem – hope it cures your IE bugs too.

    Thanks again, Philipp

    « Reply


  51. DustinE

    How do I get the “•” that is appearing before my tweets. I see that in the demo it doesn’t appear. I would really appreciate it. Thanks for the code and the help.

    « Reply

    philip beel Reply:

    @DustinE, The dot appears because the plugin builds an unordered list once the DOM has loaded. Any basic CSS will enable you to style this to your liking.

    « Reply


  52. Fab. F

    Hey, thanks for the great plug-in!

    How can I change the date’s language (i mean the date of publishing of the tweet).
    I want to make it in italian (so, for example, instead of Tue for Tuesday, Mar for Martedì)

    Thanks a lot.

    « Reply

    philip beel Reply:

    @Fab. F, Hi, I pull the date out from twitter direct, so I’m not sure if you can specify a language callback in the API, its a good point though, and one I will investigate further.

    « Reply

    Fab. F Reply:

    @philip beel, it would be awesome if it was possible with geo-localization, cause the project I am working on is a multilingual site.

    « Reply

    philip beel Reply:

    @Fab. F, probably one way to bypass this would be to only display a numerical date like DD/MM/YY @ HH:MM I will look at getting this working

    philip beel Reply:

    @Fab. F, I have prototyped a solution which should take care of the language issue. You can download it here:

    http://plugins.theodin.co.uk/jquery/tweetable/tweetable_V2.zip


  53. Fab. F

    @philip beel, you’re the man! Thank you very much philip, I’ve also integrated a custom scrollbar: http://i56.tinypic.com/dg4i07.png now it looks really good!

    « Reply


  54. Matt

    Is there a parameter that I can pass for the links in the twitter posts to open in a new window?

    « Reply

    philip beel Reply:

    No not yet, but that’s a good idea, I could add that into the next revision

    « Reply


  55. Fab. F

    Hmm there’s another problem: in IE9 the date display “NaN/NaN/NaN ” instead of the real date!

    « Reply

    philip beel Reply:

    Oh dear I will check this out. Thanks

    « Reply

    philip beel Reply:

    @philip beel, Ok I released verion 1.5 which works with IE9 I’ve changed quite a lot and released this on the main plugin verion. Enjoy!

    « Reply

    Fab. F Reply:

    @philip beel, I don’t want to bother you! :) But, it has still some problems: the date now is displayed in all browsers, but it’s totally wrong (e.g. 2011 instead of 2010 and also days and months are messed up). 1.4 wasn’t affected by this.

    Then, the time. It’s incorrect if I don’t change on line 51 “.created_at.substr(12,8)” to “.created_at.substr(11,9)” (example: I display ’7:48:53′ instead of ’17:48:53′).
    Anyway, there’s another problem (and also 1.4 was affected by this): the time is one hour slow (e.g. ’17′ instead of ’18′).

    philip beel Reply:

    @Fab. F, Had a few teething problems using the js date object, back to using substr with a few teaks and I think I have resolved the issues you have outlined.

    Version 1.5.1 is now available for live download. This is based on the prototype. Good luck with it!

    Fab. F Reply:

    @philip beel, with 1.4 I mean the prototype solution ;)


  56. Fab. F

    Sorry for multiple reply but in the demo page I can reproduce the problem.. so we’re sure isn’t a server issue!

    « Reply


  57. Fab. F

    Link corrected: http://plugins.theodin.co.uk/jquery/tweetable/tweetable.1.5.1.zip :D

    Anyway, that’s all ok except for the one hour late issue. I get 12 instead of 13.. that’s not a big problem, also I think it depends by DST…

    Thanks a lot for your work!

    « Reply

    philip beel Reply:

    @Fab. F, Thanks for that. I think the hour issue is going to be related to your client. I will wait and see if many other report the same issue.

    « Reply


  58. Wine Dine

    Going to give it a try. It’s nicely to the point and scales well. Cheers!

    « Reply


  59. Simon Jennings

    Hi Philip. Doesn’t seem to work on IE8 with jquery pack 1.7.2 or 1.8.1 Are you aware of this? Is there a problem with IE8?

    « Reply


  60. Jonty Symonds

    I was just implementing it into my site and it was working fine and then suddenly it has stopped working! What’s more, it is not a problem with just my website, when I try on my Mac or iPhone the demo won’t work on your website – it’s just blank, is this an issue with my computers or is it an issue with Tweetable? Thanks.

    « Reply

    philip beel Reply:

    @Jonty Symonds, The Twitter api has a rate limit of 150 requests per hour, if you exceed this the calls will no longer work.

    A word of warning, Tweetable 1.7 implements version /1/ of the twitter API, which will be turned off this month, in favour of their OAuth v1.1 implementation, which means this plugin will no longer work. I would look for a PHP implementation instead for longevity.

    « Reply


  61. great site

    Post writing is also a excitement, if you be acquainted with
    then you can write if not it is complex to
    write.

    « Reply


Leave a comment


Jony Ive's iOS 7 redesign reportedly eliminates 'heavy textures' for a flat, 'black and white' design http://t.co/aZpZKSVsiL

Follow me