twitterTimeline is a jQuery plugin to display the recent tweets of a twitter user that comes with a lot of configuration options.
Instead of the twitter search API this plugin uses the GET statuses/user_timeline
from the API as the search does not return tweets older than a week.
If localStorage is supported by the client, the fetched tweets will be cached within the localStorage to ensure, that tweets are displayed as soon as possible.
To use twitterTimeline you have to include the latest jQuery build and the twitterTimeline source inside the head
tag of your HTML document:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.twitterTimeline.js"></script>
The second step is to add a container element to your HTML where you want the tweets to appear, e.g. div
:
<div id="tweetContainer"></div>
Finally you have to initialize the plugin with your desired parameters:
<script type="text/javascript">
$(function() {
$('#tweetContainer').twitterTimeline({
//your configuration goes here
});
});
</script>
You can pass a set of these options to the initialize function to set a custom behaviour for the plugin.
Property (Type) | Default | Description |
---|---|---|
ajax (object) |
|
Options passed to $.ajax() . For the data part, you can find a complete list of valid parameters here: https://dev.twitter.com/docs/api/1/get/statuses/user_timeline |
count (integer) | 5 | Specifies the number of tweets that are displayed by the plugin. |
refresh (boolean|integer) | false | If set to a numeric value, the timeline will be refreshed every x milliseconds. New tweets will be prepended to the list, and old tweets will be deleted to maintain the maximum number specified with the count option. |
tweetTemplate (object) |
|
Function to render each tweet. The tweet data is passed as an argument, and the plugin is accessible via the this variable. |
animateAdd (object) |
|
Animate method to add elements. This method has to return the new element. If not, the element will not be added to the DOM. |
animateRemove (object) |
|
Animate method to remove elements. This method has to remove the element from the DOM! |
The tweetTimeline plugin provieds the following public methods:
Method name | Parameter | Description |
---|---|---|
fetch(options) | (optional) ajax options | Fetch new Tweets from the API and add them to the containert. The optional ajax parameter extends the plugins ajax options. |
update(items) | array items | Manually add tweets to the container. |
If you want to manually refresh the tweet list for example, you can use the following line to fetch new tweets:
$('#tweetContainer').twitterTimeline('fetch');
The following example is used for the tweet box you can find on our website.
<script type="text/javascript">
$(function() {
$('#tweetContainer').twitterTimeline({
ajax: {
data: {
screen_name: 'dotsunited',
count: 1
}
},
count: 1,
tweetTemplate: function(item) {
var dateRegEx = /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) ([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2}) \+([0-9]{4}) ([0-9]{4})$/;
var date = dateRegEx.exec(item.created_at);
var tweet = '<p><div class="date">' + date[3] + ' ' + date[2] + ' ' + date[8] + '</div><p>' + $.twitterTimeline.parseTweet() + '</p></p>';
return tweet;
},
animateAdd: function(el) {
return el.hide().delay(300).slideDown(500);
},
animateRemove: function(el) {
el.slideUp(300, function() {
el.remove();
});
}
});
});
</script>
Copyright (c) 2012 Dots United GmbH. Licensed under the MIT license.