<strong>IMPORTANT:</strong> a commenter recently led me to find a problem with the plugin, whereby setup.php enters an incorrect location for the get_tweets.php file. This will be fixed with a new release soon, but in the meantime you can ammend the js yourself, or if you contact me I will make the change and send you a revised file. As always any problems just comment and I will reply.
TweetSlider is a jQuery Plugin that pulls in Tweets for a given username or hashtag (as of 2.5 for hashtags) and displays them in a horizontal slider. Full details on how the plugin can be configured using options are found below.
V3 Changelog
*NEW FEATURE* PHP Caching: The Plugin now calls get_tweets.php which is part of the package. It should be added to the same directory as all other files. PHP also must be able to write this folder as it creates the directory and files for caching. This also fixes the issue raised on Git by lmorgan69a, which was reported as ie9 crashing, but was actually the auto-refresh (see below) failing to bring in new tweets because the Twitter API limit had been reached. This only happened when the auto-refresh delay was set to short and making more than 150 requests to API per hour. Now the plugin’s PHP caching feature keeps a cache and counts requests, if/when the limit is reached, or if the API request fails for any reason it uses the cached tweets.
IMPORTANT: The plugin now calls a local url for the tweets, it’s default is ‘/tweetslider/get_tweets.php’ meaning that if you upload the plugin directory to the web root it is good to go. If not you can set the correct path manually by editing jquery.tweetslider.min.js (search options.url) or navigate to the setup.php file in the plugin folder in your browser, which will change the url for you.
NOTE: I have built my own system for counting requests, then I realised that the number of requests left before hitting the limit is sent back from Twitter in the Header of the response. And that Twitter also sends a 420 response code when the limit is reached. V3.1 will soon be released getting rid of its own counter, and using one or both of the above methods to prevent problems with rate limiting.
V2.5 Changelog
View the full versioning history at the repository on Github: TweetSlider on GitHub
- Added the use of Twitter Entities API on urls so that links appear they are on Twitter as requested by users
- Added option to pull tweets for a search or a username, see below for full details on using this. Also adds support for user_mentions and hashtag entities as well as urls added in previous update.
- Changed stylesheet to remove underline in links
- Fixed incorrect link to js file in example.html
V2 Changelog
- Auto-Refresh: Goes back for more tweets at a configurable interval.
- Manual Slide: buttons to slide tweets manually
Plugin Features:
Auto-Refresh: Tweet Slider refreshes the tweets asynchronously (without reloading the page) every 10 minutes (the time can be changed by the user, but this will be covered in the options section).
Manual Slide: V2.1 added next and previous buttons to manually slide the tweets.
Plugin Options:
<
Twitter
| Option Name | Description | Default Value: |
| hash | A hashtag search term without the # symbol | |
| username | Name of the Twitter user who’s tweet’s to display. Defaults to blank as hashtag is the default option. If username option is given it overrides use of hashtags and pulls tweets for given user | ‘Twitter’ |
| slides | Number of Tweets to display | 5 |
| width | Width of slider | 500 |
| speed | Speed of sliding animation, ‘slow’,’medium’,’fast’, or milliseconds duration | ‘fast’ |
| refreshTime | Time between calls to the Twitter API to refresh tweets in milliseconds. 600000 = 10 mins | 600000 |
Usage
Usage:
Simply download the tweetslider plugin as a .zip file, extract all files, and upload the entire tweetslider folder onto your web server, reference the stylesheet style.css like so (assumes directory added to Web Root):
<link rel="stylesheet" href="/tweetslider/style.css" />
and reference the jquery.tweetslider.min.js folder in a script tag like so:
<script type="text/javascript" src="/tweetslider/jquery.tweetslider.min.js"></script>
Both examples above assume the plugin folder is in the web root. If you don’t put it in the web root then obviously these paths will change. You will also need to change the url the plugin calls to get the tweets. The easiest way to do this is to navigate to the setup.php script in the plugin directory in your web browser. It will do the work for you. If you want you can edit jquery.tweetslider.min.js, search options.url and change the value from /tweetslider/get_tweets.php to whatever the correct value is.
Then create a holder for the slider, I have chosen a div with the id tweets.
<div id="tweets"></div>
And call it like so
<!--Tweets of a given user//-->
<script type="text/javascript">
$(document).ready(function() {
$("#tweets").tweetSlider({ username: 'myusername' })
})
</script>
<!-- Or for a hashtag search //-->
<script type="text/javascript">
$(document).ready(function() {
$("#tweets").tweetSlider({ hash: 'mysearchterm' })
})
</script>
Of course adding any other options you want with comma delimeters. And that is it. I hope you enjoy using Tweetslider V2.5.
Example: Tweets for a Given User (@dubnalife – see comments, user encountered problems and so I changed the example to use his username):
***NOTE***To all the people having trouble setting the width, it is one of the plugin options, see below I have set the width to 300px
As you will see if you look at the source code I have added the new Tweetslider to the head of this site and put in the following example:
<script type="text/javascript">
(function($) {
$(document).ready(function() {
//example1 Display tweets for the user @Twitter
$("#example").tweetSlider({
username : 'Twitter',
width: 300
});
});
})(jQuery);
</script>
Note: it is very important that you don’t enclose the width value in quotes or the value will be sent as a string not a number, which breaks the plugin.
It Looks Like This:
example1 Display tweets for the user @Twitter
Hey there,
I stumbled upon TweetSlider V1 by extensive googling today, and, unable to configure it just the way I wanted, went to your home page to see if there are any updates. What are the odds that you updated it just a couple of days ago!
However, there is no .css file in the package you provide, and the .js file is empty. Would you mind checking that?
Thanks, and great work!
Yes, I do apologise, there was a problem with the zip folder, which has now been corrected. If you use the link in the post you will now download the folder with everything needed to make the plugin work. Alternatively click here
Wow, thanks for the quick update!
No problem, two second job. Hope you enjoy using the plugin, and of course write loads of tweets, and blogs about it, as well as telling all your friends
hi; is there a place to see this in action? thanks!
Hi Pablo, you can see it in action at the top of the post, just beside the Facebook share button. If this is not sufficient I can do some further examples for you, and of course if you need any help you can contact me very easily.
Hi Pablo, V2.2 now ships with example.html showing the plugin at work in a plain, and easy to understand example.
I was pretty baffled by this plugin. I wasn’t able to get it working using just the zip files, as it lacks an html example file. I followed the instructions on this page and they got me pretty much nowhere.
I scooped a bunch of styles out of the twentyten stylesheet used on this page that weren’t included in the zip stylesheet pertaining to #tweets. It doesn’t function properly without these styles. Also the jquery code to include on the page mentioned isn’t actually the same as what appears in the source code of this page. Once I swapped it the script started working.
Could you possibly create an example file in the download, as well as rectify the instructions? This seems like a pretty good jQuery script, just the implementation is a mess.
Hi @jamEs
Thank you so much for pointing this out. The #tweets styles in the twenty-ten stylesheet were left over from v1. I have now put the example on a different element, and made the effects work on a class, which if it isn’t the class used by the element from the user, it is added via jQuery. This means that the plugin now works independently with the styles given in the accompanying stylesheet. I have added the new version 1.2 to the jQuery repository, updated on here, and on Github as well. I apologise for your experience so far.
Hello,
The tweets are displayd under each other without the buttons. On the same page there is also an other Jquery component running (mobilySlide)
Any idea what can be wrong?
This looks like you haven’t added the stylesheet correctly, do you have a link where I could take a look at it?
Is it possible to allow for the Twitter API to create the links to the assets? Some tweets, such as RTs or @ replies, have an @twitteruser, which usually link to the user. Additionally tweets with #hashtags usually link to the hashtag search on twitter.
Is it possible to incorporate these tweet entities in the tweet slider?
Thanks for the plugin btw, implemented it for work here: http://nycedc.tumblr.com/
Hi there,
I am working on v3 now including caching and all links as they appear in the original tweet making use of the new Tweet Entities API feature.
I am glad you are finding the plugin useful. Follow us on Twitter @SmallCoders to be among the first to know when the new version is released.
Hello,
Is it possible to display tweets by hashtag instead of username?
Regards,
Pieter
This is exactly what I’m looking for. Would be nice if you could include an option to show date or timestamp.
I have added your comments to the stream for V3.
Hey,
I’m struggling to set the width to the correct value. The problem is the containing div has a percentage width.
HTML
Using javascript I need to be able to put the width as the number of pixels of the outside container. I tried this without success:
JAVASCRIPT
var twitterdiv = document.getElementById(“twitter”);
var curr_width = twitterdiv.offsetWidth;
jQuery(document).ready(function() {
jQuery(“#tweets”).tweetSlider({
username: “Twitter”,
width: curr_width,
refreshTime: 50000
});
})
Can you help me out here?
Thanks very much,
Jack
Have you checked what is being stored in curr_width using the console?
Hi
I have encountered with this error.
The firebug console just keeps on displaying this error storage.control is undefined. This error occurs once the refreshTime elapse.
Hope you can help me on this.
Anyway great plug in
Hi Jerico,
Is your implementation on a live site I can view/can you post some code?
Email to info[at]smallcoders.com if you prefer.
Hi.. I’ve been using this great plugin of yours to a couple of websites that I developed.. Can you guide me how to use it together with mootools? It displays a “tweets[i].text is undefined” error when used together with mootools..
thanks..
Hi Christian,
I am glad you are liking the plugin, I am on the verge of releasing the next upgrade in the next couple of weeks, follow on Twitter or on github so you are among the first to know when it comes out.
Now, down to your problem. Tweetslider is a jQuery plugin, not Mootools, but I assume you know that and are talking about your using it together with jQuery and with Mootools? Even then Mootools and jQuery are only two small elements of a development, is it on WordPress or custom code etc. The best way for me to help you is if you can show me your implementation via a link, if you would rather email it go ahead to info[at]smallcoders.com. If you don’t feel comfortable sending a link to a site in progress, please send me the code relating to Tweetslider, as well version info for Mootools, jQuery and any other software you are using like WordPress.
Hello and thank you for your great script.
Can you please add a version with some comments on code so a jQuery noob like me can understand how your script works?
Thank you so much!
Hi,
Great code!
I have the same problem Jackie has, cant set the width of the containing div.
Any ideas?
Greetings
Mark
The width option sets the width that the slider will display at, is that what you mean or you are having problems with a div outside the scope of the plugin, i.e. the div you are inserting it into?
Can you help me?
Your plugin is exactly what I needed but I can’t make it work. It works with “hash” option, but no with “username”. Google Chrome returns this error:
Uncaught TypeError: Cannot read property ‘urls’ of undefined jquery.tweetslider.min.js:11
Opera says:
Uncaught exception: TypeError: Cannot convert ‘tweets’ to object
Error thrown at line 27, column 40 in () in …/jquery.tweetslider.min.js:
I have tested in Chrome and Opera and have no issues, which makes me think maybe it is not being implemented properly. Do you have a link where I can check it out.
Thanks for the reply. Yes I have – http://dubnalife.no-ip.org/ (see block below Twitter title – it’s blank now because of error)
Server can be unavailable sometimes, because it’s my home PC.
I went to your site and found that the first error was Image corrupt or truncated: http://weighter.ateve.com/?darth=%7B%22path%22%3A%22pdj%2Fembed%22%2C%22times%22%3A%7B%22_%22%3A1348832637.122%2C%22js%22%3A1348832638.14%2C%22last%22%3A1348832638.189%7D%7D which is one of the images in one of your tweets. The image is fine, so I thought it may be the no-ip free server having restrictions. I changed the username in the example Tweetslider on this post to dubnalife, and as you can see above it works here, thus proving the point. I suggest you contact no-ip or move onto a paid hosting service, which are available for pennies nowadays. 5quidhost does some good packages, even some free ones.
Thank you for the help and for the excellent plugin
And I noticed one bug – if I press on left/right button very fast (before the animation complete) the content of tweet stands in the wrong place. And one more question – is there any option to set time of showing each tweet (before it is changed on the next tweet automatically).
You are right. This is a problem and I will fix it with the next update. Thank you.
Ok. So I have downloaded your file. First time I downloaded I got the file was corrupt error. The second time I was able to download. I opened up the example html and get nothing except: We Tweet
Is there a reason for this? I first seen your example of this slider here: http://charaweb.net/
I want something like this for a customer. Do you have any other links to a working tweetslider?
Merry Christmas Stephen,
I am glad you came across the plugin. If you are running example.html from the .zip, that will be the problem. Please unzip and then try again. zip folders do not have the path structure that you have once extracted, and the example.html calls up Tweet Slider’s js file using the relative path.
I have done what you said and downloaded again from this site. This is the zip that arrives: jquery.tweetslider.js(.zip) Now it won’t even unzip and says : ! C:\Users\Hunter\Downloads\jquery.tweetslider.js.zip: The archive is either in unknown format or damaged
Things that make you go hmmmn… Any ideads?
Apologies, there was a problem with the download feature. I have now fixed this, so if you go to http://smallcoders.com/?download=tweetslider (the link given in the post) you will now get the correct zip folder. Extract the folder, navigate the files and open example.html to find a working Tweetslider. The examples in the post show you how to use the options. Let me know if you need anything else.
Again thank you for all your help so far, but I am still getting the same issue even after extracting. The files seems to be there because I can see them but when I click the example file (after extracted) the browser shows up with We Tweet. That is it.
I have tried to open in different browsers, but nothing. I will send you a mail with the details on and a screen shot of what I am getting.
Many thanks for this script! I’ve been busy for hours to manage this kind of script, and yours works perfectly. Thanks!
I have two questions though;
- Is is possible to make links to twitpics (http://t.co/) a clickable hyperlink?
- Clicking on a hashtag in a tweet doesn’t seem to work (it refers to i.e. https://twitter.com/#search/#christmas instead of https://twitter.com/search?q=%23christmas)
- Links are opened in the same window (_self), can it be changed to (_blank)?
If you could point me to the file and place where it needs to be editted that would be great
I spoke too soon, I’ve editted jquery.tweetslider.min.js to open links in a new window and to get the correct hashtag searches.
I’m still curious if it is possible to have clickable t.co links though!
Hi Jim,
Glad you are enjoying the plugin and thanks for commenting. Sorry about the hashtag links, they worked but Twitter has obviously changed the way it handles those search urls, and left my plugin out in the cold so to speak. I have updated the plugin in the download on this site, and made a quick push to git as well. Thanks for the heads up. Will look at links to twitpic for the next release, please follow on twitter at http://twitter.com/SmallCoders or subscribe to our feed http://feeds.feedburner.com/SmallCoders to be notified when the update is released.
I’m trying to show 3 posts per slide in the slider instead of the default one. so it’s getting a little confusing since it’s 3 posts to a slide and say I want to show 15 posts, it would be 5 slides, but right now it shows 5 posts and the arrow keeps going to the right. is there a way to fix this?
Hi there,
I am afraid I can’t answer your question from the information I have. What you are talking about requires some pretty big changes to the tweetslider code, and I daresay there are a few different ways of going about it. I have no idea how you have modified the code so I can’t speculate as to what the problem could be. If you would like me to make the modifications for you I would be happy to do so. You can hire me via peopleperhour.com, my profile is at: http://www.peopleperhour.com/people/liam/web-developer-wordpress-extraordina/329969 – simply click the contact button, post there and I will post a proposal, if you are happy with the proposal you accept the bid, I do the work, you release the escrow and everyone lives happily ever after.
This doesn’t work for me at all. Is there any wordpress plugin for this or how can I use it to wordpress. I had just added those script to my wordpress theme header and also located those file path. But it didn’t work for me. Even I tried it in a simple way in a local host that is wamp server.
But not luck at all. Any suggestions. I want to make a sliding twitter like this screenshot http://mysterywetpatch.com/wp-content/themes/Mysterywetpatch/images/twitter.jpg I searched in google but only found yours. If yours work then I can make it styling like that way. But it is not working for me.
Thanks
Aman
Hi Aman,
The plugin works fine in WordPress. This site is WordPress and as you can see we have a Tweetslider running on this very post. The instructions are pretty clear on how to set up and use the plugin so I am not sure what is going wrong for you. Can you send me a link to the page where you are trying to use it?
I cant seem to get this to work on my site either.
www(dot)catapult-campaigns(dot)com/wp/
I checked that the css and js file is accessible, Im using your example calling code and div. No joy. It seems to make no slides at all, just the h4 ‘We Tweet’
What am I doing wrong??
Problem with setup.php linking to wrong location for get_tweets.php – Fix coming soon – see below in meantime
Hi,
I forgot to approve this one, because Peter went on and emailed me. I will post the email exchange below as it may help others (not including Peter’s email obviously
)
Peter:- Subject Help
Hi there,
I can’t understand why your wonderful tweetslider won’t work on my site.
The example file also displays no tweets.
Would you be able to see why its not working?
Cheers,
Peter
Hi there,
I can’t understand why your wonderful tweetslider won’t work on my site.
The example file also displays no tweets.
Would you be able to see why its not working?
Cheers,
Peter
After my asking Peter then told me he had it set up at
http://www.catapult-campaigns.com/wp/
I had a look and replied:
On 21 May 2013 15:31, wrote:
Hi Peter,
I had a look and your problem is that tweetslider is looking for the get_tweets.php file in the wrong place. There are three ways to fix this:
There is a setup.php file in the plugin, which finds the file and updates the js accordingly, but (thanks to you) I have discovered that this is not a suitable solution for a site-wide implementation of the plugin. I will fix this properly, but in the meantime I have amended the js from your site, and I attach a revised jquery.tweetslider.min.js file for you to slip straight into your tweetslider folder. This will solve the problem for you immediately. Please excuse the zip folder, but it is the only way to attach js files to an email. Simply extract the zip and ftp the js file, overwriting the old. Let me know if you need any further help. Have a good day.
Peter
Bro, I dont know how to thank you! I took this project on at cost because they are doing such good things, but I got horrendously stuck on that twitter thing. They had seen it on http://tft-forests.org/ site, and they wanted it!
Thank you thank you thank you.
Glad I could be of help Peter
Is there any plan to update this to support API 1.1 since this plugin is now entirely broken?