Skip to content
DEPRECATED. jQuery plugin to display the recent tweets of a twitter user.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



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.

Basic usage

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="//"></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() {
            //your configuration goes here

Configuration options

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)
    url: '',
    data: {
        screen_name     : 'twitter',
        since_id        : null,
        max_id          : null,
        page            : 1,
        trim_user       : true,
        include_rts     : false,
        exclude_replies : true
    dataType: 'jsonp'
Options passed to $.ajax(). For the data part, you can find a complete list of valid parameters here:
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(item) {
    return '

' + TwitterTimeline.parseTweet(item.text) + '

'; }
Function to render each tweet. The tweet data is passed as an argument, and the plugin is accessible via the this variable.
animateAdd (object)
function(el) { return el; }
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)
function(el) { el.remove(); }
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:


Example settings

The following example is used for the tweet box you can find on our website.

<script type="text/javascript">
    $(function() {
            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() {


Copyright (c) 2012 Dots United GmbH. Licensed under the MIT license.

You can’t perform that action at this time.