It has been a long time coming but I am pleased to say tweetable version 1.6 is now available for download. This latest release of the plugin solves many previous issues with cross browser compatibility. the plugin has also been given a face lift to show you just how good it can look.
What is tweetable?
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.
How to use it
Tweetable version 1.6 has been developed to work with jQuery 1.4.2. Firstly call in the framework and the jquery.tweetable.js file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.tweetable.js"></script>
Next create an element on your page that you want to call your twitter feed into. For example #tweets
<div id="tweets"></div>
Now you can initiate the plugin by calling tweetable onto your selected element.
$('#tweets').tweetable({username: 'philipbeel'});Thats all there is to it.
Plugin parameters
You can add extra parameters to the plugin, to give extra customisation options, simply add these when you call in the plugin.
limit: 5, //number of tweets to show username: 'philipbeel', //@username tweets to display time: false, //display date replies: false, //filter out @replys
Structure
Because tweetable outputs the HTML after the DOM has loaded you might need some extra style rules. here is the structure that is output to the page
<ul>
<li>
<p></p>
</li>
</ul>Download tweetable
You can download and use this plugin for free, however please be sure to read the instructions above clearly before posting any questions or comments about the plugin.
Tweetable on Github
If you like tweetable and would be interested in contributing, fork it on github
January 5th, 2011
Great job on this. I’ll be grabbing the code and putting it up on my website shortly. Cheers.
« Reply
January 9th, 2011
Pretty sweet plugin! Thanks!
« Reply
January 11th, 2011
Looks like you guys commented out the line that displays the time, so no matter if “time: true” is set, it won’t display the time the tweet was created.
« Reply
philip beel Reply:
January 11th, 2011 at 9:30 pm
@Mike, Woops, looks like I missed that part out. Thanks for the warning, all changed now!
« Reply
January 14th, 2011
How can I get rid of the glyph that is showing up with the tweets? Also, how can I make the date always display below the line of text?
« Reply
January 14th, 2011
@Frank J., You should be able to do this with a style=”clear: left;” on the “small” tag.
« Reply
January 16th, 2011
I want to change the time (it’s uk time) and I’m french, not the same time ! Where can I change that ? thx
« Reply
philip beel Reply:
January 16th, 2011 at 3:45 pm
@xoum, Hi I am afraid I am not sure. I pull out the date directly from the API response, so I assumed this would be accurate based on your geo-location as per your settings. There might be some mention of this on dev.twitter.com
« Reply
Luca Reply:
February 8th, 2011 at 2:32 pm
@philip beel, Hi Philip, first thank you a lot for Tweetable 1.6. I’ve inserted the codes in my page and it works very well! But I have the same problem as xoum. Did you find out how the timezone can be adjusted? On dev.twitter.com I was not able to find some specifications.
Thanks,
Luca (from Zurich)
« Reply
philip beel Reply:
February 8th, 2011 at 2:48 pm
@Luca, Do you know where your hosting is based? USA? Canada etc. I wonder if this will have any impact on it.
Luca Reply:
February 9th, 2011 at 6:55 am
@philip beel, Hi Philip, my hosting is based in CH (Bern). I’ve called there and they told me that the timezone is set as well (GMT +01:00). Can you tell me please, where in the tweetable.js you pull out the time? In which line?
Thank you a lot for your estimated help.
Cheers,
Luca
« Reply
philip beel Reply:
February 9th, 2011 at 10:17 am
@Luca, If you look around line 63 on tweetable.js you can see where this defines the time. Once again this is pulled directly from the API.
https://github.com/philipbeel/Tweetable/blob/master/jquery.tweetable.js
Luca Reply:
February 9th, 2011 at 2:09 pm
@philip beel, Thank you, I assumed that it was there. I tryed to change some values but without success… Will try to find something by asking google. Thank’s man for your help!
« Reply
George Reply:
March 3rd, 2011 at 6:06 pm
Hey Luca, The timezone is something you change in your twitter settings. The default is GMT. I just changed mine to EST. the other day.
January 18th, 2011
Smashing stuff..!
Thanks
« Reply
January 21st, 2011
Hi,
How can you filter on user @jorisdesigns and hashtag #jorisdesigns
Is that possible?
Thnx
« Reply
philip beel Reply:
January 21st, 2011 at 1:00 pm
@Joris, Your best bet would be to hire a client side web developer with a couple of years experience and a keen knowledge of jQuery.
« Reply
January 21st, 2011
thanks , awesome plugin , it will help me
« Reply
January 25th, 2011
I am getting a twitter API error. Username and Password. Help?
« Reply
January 25th, 2011
Excellent work. It would be useful, I think, to include a generic class for the tweet as well as the specific class for each tweet.
« Reply
January 26th, 2011
Man! I love it…
« Reply
January 27th, 2011
How can I get the time to go below my tweets instead directly after them?
Example:
“Today was awesome!
Wed Jan 26 21:34:29 ”
Instead of:
“Today was awesome! Wed Jan 31 21:34:29 ”
I would greatly appreciate it!
Thnaks,
John F.
« Reply
philip beel Reply:
January 27th, 2011 at 9:01 am
@John F., You could do this by selecting the small field in css like so:
#tweets ul.tweetList li small { clear: left; }
« Reply
ChgoKid Reply:
January 28th, 2011 at 3:25 pm
@philip beel, I’m having the same issue, and my tweet times are still on the same line.
small { font-style:italic; color:#AAA; clear:left;} is the code I have in my .css
Any advice?
I also tried your last suggestion, didn’t work for mine. Thanks
« Reply
Noel Reply:
February 4th, 2011 at 8:07 pm
@ChgoKid, instead of { clear:left; } try { display:block; }
February 4th, 2011
Great stuff Philip, looks really promising. Will drop you a line when I’ve got it running on a live site
« Reply
February 4th, 2011
Amazing, thank you so much!
« Reply
February 5th, 2011
Hey, when i use the code as provided with the # before the div name i get “,null, is null or not an object” once i remove the # i get a different error, “object doesn’t support this property or method.
here is my div: (i want the divs to go into the inner div called tweets)
Follow us on Twitter: CRWWND
here is my java code that is at the bottom of the page:
$(‘tweets’).tweetable({username: ‘crwwnd’, time: true, limit: 10, replies: true, position: ‘append’});
I have these script includes in the head:
any help would be appreciated. thanks!
« Reply
February 5th, 2011
Sorry for the re-post but i noticed i didnt properly put the code in so it wouldnt render
Hey, when i use the code as provided with the # before the div name i get “,null, is null or not an object” once i remove the # i get a different error, “object doesn’t support this property or method.
here is my div: (i want the divs to go into the inner div called tweets)
div id=”twitterDiv”>
Follow us on Twitter: CRWWND
div id=”tweets”></div
</script
any help would be appreciated. thanks!
« Reply
February 6th, 2011
I noticed a small bug, I tried to use the parameter “replies” set to true but the replies were not included in the results. I made a small adjustment which fixed this:
var retweets = “&include_rts=” + (defaults.replies ? 1 : 0);
//do a JSON request to twitters API
$.getJSON(api + defaults.username + count + defaults.limit + retweets + “&callback=?”, act, function (data) {
« Reply
February 6th, 2011
Wow, this plugin rocks but I have a question..
I have tweetable in a so, everytime I try to manage it’s height it still gets out of the borders, which is why I wanna be able to fix it. How can I doi t? thank you!
« Reply
philip beel Reply:
February 6th, 2011 at 8:43 pm
@Diego Espinoza, I have not seen this as an issue on the demo I created. I would advise tweaking the CSS in firebug until you are satisfied with the outcome.
« Reply
February 7th, 2011
Here’s a taugh one: if I use Cufon to style the tweets, how can tweak de jQuery code to escape the double quotes wrapping the generated html text?? Since it won’t work unless it’s simple, plain text.
« Reply
philip beel Reply:
February 8th, 2011 at 8:58 am
@Taty, I used a few regex to find links and hash tags etc. I would imaging cufon would really screw with this. I highly recommend using @font-face implimentation if changing the font is a must;
http://www.fontsquirrel.com/
« Reply
Taty Reply:
February 8th, 2011 at 7:10 pm
@philip beel, Thanks for the tip, Philip, will give it a try.
« Reply
February 9th, 2011
Hi Philip, sorry it’s me again :S Can you please tell me, if there is a possibility to automaticaly refresh the tweets? Thanks…
« Reply
philip beel Reply:
February 9th, 2011 at 4:30 pm
@Luca, tweetable has not been designed to do this, although you could extend the plugin to do this. Have a fork on github and share what you come up with!
https://github.com/philipbeel/Tweetable
« Reply
Luca Reply:
February 10th, 2011 at 1:29 pm
@philip beel, Thank you Philip, will have a look and share my results in your blog.
« Reply
February 10th, 2011
I input this in my site, to use almost like a blog. But when someone clicks on a link. It gives them a 404 error. Reason is it’s posting the main site URL then the line i.e. http://www.mainsite.com/http://www.mainsite.com any recomendations on this?
« Reply
Andy Layman Reply:
February 10th, 2011 at 5:01 am
@Andy Layman, Basically It needs to go back a level so that the link doesn’t reference the site…
Here is the exact example… you can recreate it by going to MikeChampoux.com and clicking on a link in the twitter feed at the bottom.
http://www.mikechampoux.com/http://www.facebook.com/pages/Mike-Champoux/144106595644595?v=app_79482449955&ref=ts
« Reply
February 21st, 2011
Thanks, i m like this code
« Reply
February 22nd, 2011
Hi There,
This and your site look really nice by the way, style wise.
I have an issue with this addon. It generates a too much Recusion error in jquery 1.4.2. Not using 5 as there are issues with other plugins and a couple of bugs having issues with just at the moment.
Any thoughts to why this is?
« Reply
philip beel Reply:
February 22nd, 2011 at 9:13 am
@Liam, Sorry to hear your having issues. The demo runs on 1.4.2 and there are no errors in the console. do you have a test link where this is not working?
« Reply
March 7th, 2011
Hi there awesome tutorial, and killer plugin, really love the site. Will put this up on my site shortly… nice one.
« Reply
March 14th, 2011
Any idea why my image links wouldn’t be working after installing your plug on my page? Seems odd. Great plugin, though! Thanks! Any help appreciated.
« Reply
philip beel Reply:
March 15th, 2011 at 12:31 pm
@Joel, are you running any other plugins on the same page?
It could be a conflict on the page which is causing the issue.
« Reply
March 15th, 2011
Great plug-in. I’ve been using it for a while.
Did Twitter change the way @replies are handled? ‘Cause I’ve had the plug-in set to not show @replies, was working fine, and then all of a sudden @replies started showing up.
« Reply
March 15th, 2011
Hey Phillip,
Great plugin thanks! However it doesn’t seem to work on my page…..is it compatible with HTML5??
Can anyone spot something seriously wrong in my source??
http://www.thecityisburning.com
Thanks in advance,
Pete
« Reply
philip beel Reply:
March 16th, 2011 at 12:26 pm
@Peter Butler, Looks like your twitter feed is appearing on you page to me. Did you already fix this? Great looking site by the way!
« Reply
Peter Butler Reply:
March 16th, 2011 at 5:22 pm
@philip beel Hey man, I ended up using a different script in the end, might have been a network issue at work or something. The new one seems to work okay though. Thanks for your comments about my site means a lot
I’ve had a look around yours too very nice. I think I need to get a blog on mine or something… there’s nothing really to bring people back. ^_^
« Reply
March 16th, 2011
the demo version is not working …
« Reply
March 21st, 2011
Thanks, great tool.
« Reply
March 31st, 2011
Huch someting wrong with this script? Demo is not working
« Reply
April 4th, 2011
I¡¦m not sure the place you’re getting your information, but good topic. I must spend some time finding out more or understanding more. Thank you for magnificent info I used to be on the lookout for this information for my mission.
« Reply
April 4th, 2011
Fantastic plugin. Works very well.
One question, however: is there a way to easily change the date format, so instead of 29/03/2011 19:33:58 display it as Mar 03 2011 7:33 pm?
« Reply
April 7th, 2011
really nice plugin! i am using it in some designs, thanks for sharing!
For people asking about the position of the date/time i use make this change of the css code.
#tweets small {font-style:italic; display: list-item; }
If there is going to be a new version, will be nice, that the links on the tweet line could open in a new window (_blank).
Thanks Philip!! i am following u now!
« Reply
April 11th, 2011
Retweets are not showing up for me. Shouldn’t they be? Great plugin.
« Reply
Raad Reply:
April 18th, 2011 at 5:05 pm
@Jim,
Yeah, retweets need to be explicitly requested.
I have a fork which does this:
https://github.com/raad/Tweetable
@phillip,
Nice plugin! I forked incredimikes fork, but feel free to nick the retweet changes.
« Reply
April 11th, 2011
In Safari and Google Chrome there seems to be a bullet, I guess associated with the list element that I can’t seem to gte rid of. Any ideas?
« Reply
April 28th, 2011
Hi,
I’ve installed your plugin but it seems doesn’t work, you can check it out on the header of the ziguline.com home page close to “last tweets”..
Thank you!
Dimitri
« Reply
April 29th, 2011
Nice one! Using it now.
Have you considered implementing a formatting string for the time, e.g. adding timeFormat:”HH:MM YYYY-MM-DD” would result in 28/04/2011 11:15:44 being displayed as 11:15 2011-04-28?
Same principle could be used for changing the html order of the text, link and time, e.g. adding order:["time", "tweet", "link"].
Cheers
« Reply
May 12th, 2011
This is great simple and functional, all it needs is to get rid of that time and date format and make it simple like (2 hours ago or 2 weeks ago or 2 months ago) just simple like twitter that would be great.
« Reply
May 17th, 2011
Hi Phillip,
Great plugin, much appreciated!
I’m getting a weird thing happening in Internet Explorer that I was hoping someone might be able to shed some light on please?
Post date and times are displaying as NaN – any idea of a workaround for this?
Thanks,
Dave
« Reply
May 20th, 2011
When loaded with jquery.tools it doesn’t work. Are there known conflicts?
« Reply
June 1st, 2011
Any way to make the twitter avatar appear next to the tweets?
« Reply
June 16th, 2011
Philip,
I’ve been using Tweetable on my site for a few months now, and I just today noticed it’s not working. Do you know of any reason why it would be down right now? Thanks!
« Reply
June 18th, 2011
Hello! I was using this plugin for ages with out a problem, then it suddenly froze on 19 May 2011 and has not posted any new tweets since then. I had not done any updates or adding of new plugins at that time and have since updated WordPress to latest version and still have the problem. It’s a fantastic plugin and I would love to use it but I cannot seem to resolve this issue – the date of latest tweet is still stuck on 19 May – can you please suggest how to resolve this? Thank you!
« Reply
June 20th, 2011
Why on earth create a twitter plugin, which doesn’t support images – which is the defacto standard for all twitter feeds just about anywhere on the web? Doh!
« Reply
June 22nd, 2011
I enjoy what you guys are usually up too. This kind of clever work and coverage! Keep up the terrific works guys I’ve added you guys to our blogroll.
« Reply
July 1st, 2011
This is great & almost got everything togather yay! But one question – is there a way to make the twitter account’s avatar appear to the left of each tweet?
« Reply
philip beel Reply:
July 1st, 2011 at 8:39 am
@Christina, No I have not added in this functionality. I could add it into future revisions though.
« Reply
July 2nd, 2011
Very nice plugin, i’ll take it! thx.
« Reply
July 8th, 2011
Is there a way to only show one twitter post at a time and fade in the other twitter posts on say a 3 second loop?
« Reply
July 20th, 2011
Hello, great job! This is very lightweight – I was wondering if you know of a way to pull in multiple usernames?
« Reply
philip beel Reply:
July 20th, 2011 at 8:44 pm
@Matthew Skinner, this is only possible for 1 with tweetable I am afraid.
« Reply
August 6th, 2011
Excellent demonstration and example for how to implement this. The resulting output is quite high and I like it a lot! Thank you for creating this product and the tutorial on how to implement it!
« Reply
August 6th, 2011
Hi, great plugin. Good work.
How can I add a small static text bellow the tweets?
« Reply
philip beel Reply:
August 11th, 2011 at 8:44 am
simply add it to the HTML below the #tweets id
« Reply
August 17th, 2011
nice plugin, i am only curious if one really need the inside the ?
« Reply
August 30th, 2011
Does anyone know why it does not work in ie9?
« Reply
August 30th, 2011
I’m also having problems when using Tweetable in IE9. In other browsers it just works fine.
« Reply
August 31st, 2011
tweets with multiple lines o a lot of text output as a single line?
« Reply
August 31st, 2011
Problems in MSIE9 are because of the mime-type the Twitter API is using.
See this discussion:
https://dev.twitter.com/discussions/1232
Hopefully it is fixed soon!
« Reply
Eric Reply:
September 14th, 2011 at 1:42 pm
@Rowdy Rabouw, It seems to work right now
« Reply
September 20th, 2011
Great plugin. Ive got it working on one site and it was easy as all heck. Problem is Im trying to deploy on another site and it keeps doubling the output.
http://www.darryncooke.com/tortillaz
will show you plugin implementation.
« Reply
Darryn Cooke Reply:
September 20th, 2011 at 8:29 pm
@Darryn Cooke,
Figured out the problem, but now I have to find a cure. Its another plugin that is effecting this. Plugin name is bgStretcher.
« Reply
September 21st, 2011
Awesome Plugin…thanks!
« Reply
September 22nd, 2011
I’m having an issue that the plugin fails to pull in more tweets if @replies are excluded. In my example I set the plugin to pull in 10 tweets, 5 of which are @replies. The plugin only shows 5 tweets and excludes 5 without replacing them in the list.
« Reply
Darrel Reply:
November 12th, 2011 at 1:07 am
@philip beel, firstly, thanks for writing and sharing the plugin! It’s one of the easiest to set up with nice clean markup.
@jamEs, yep…I have the same issue. I couldn’t figure out why I was only retrieving one or two tweets and, sure enough, changing ‘replies’ to ‘true’ fixes that. Looks like a bug (maybe in the plugin, maybe in twitter)
« Reply
philip beel Reply:
November 12th, 2011 at 1:50 pm
@Darrel, you are both right, the twitter api returns the number of tweets you ask for, however replies are included within this, thus you will be left with the number of tweets – the replies.
You could extend the plugin to look at how many replies are brought back and if it is less than the number required run another request, however the twitter API limits the number of requests you can do to 150 per hour, so I chose not to take this approach in the general release.
I hope this helps you out.
« Reply
Grawl Reply:
November 14th, 2011 at 7:24 pm
@jamEs, I have the same issue.
« Reply
November 19th, 2011
Hi Philip,
Thank for the script
I am very interested in your script and combined it with the fixed bar script into my site.
Quick question. Could you take a look at my site. Whenever I click “Get Social” (the 2nd one), the tweets are not refreshed every click, they add up to the previous tweets. I mean duplicated. Without reload the page, I don’t know how to fix.
Thank you
« Reply
November 28th, 2011
Great plugin!
Is there any way to setup alternative content if twitter feed fails to load?
« Reply
philip beel Reply:
November 28th, 2011 at 8:45 am
This should already exist, you can change the wording to suit your needs, or develop the plugin to pass this in.
« Reply
December 1st, 2011
Nice resources.Good job Philip
« Reply
December 16th, 2011
$(‘#tweets’).tweetable({username: ‘nick’, time: true, limit: 10, replies: true, position: ‘append’});
zapis_tweet = $(‘#tweets’).clone().html();
alert(zapis_tweet);
fail not copy…
how to copy?
« Reply