Chirp.js Tweets on your website.

jQuery • Lightweight • Templating • Client-side caching.

Advanced Setup Try it! Download
Show me tweets from me retweets and me replies. Show me tweets from rogie's list ?. Cache tweets for .

Waiting for tweets, yo.

Due to the deprecation of the Twitter v1 API, Chirp.js will no longer be supported or continue to work in the coming months. More on that here.

Simple n' Easy User Tweets

<script src="path/to/chirp.min.js"></script>
<script>Chirp('yourusername')</script>

Simple n' Easy User List Tweets

<script src="path/to/chirp.min.js"></script>
<script>Chirp('yourusername/yourlistname')</script>

Using Advanced Options

<script src="path/to/chirp.min.js"></script>
<script>Chirp({
  user: 'rogie', //Twitter username
  max: 3, //Maximum number of tweets to show 
  count: 100, //Total tweets to retrieve
  retweets: true, //Show/Don't show retweets
  replies: false,  //Show/Don't show replies
  cacheExpire: 1000 * 60 * 2 //Number of milliseconds to cache tweets
})</script>

All Advanced Options

user — string
Twitter username
max — number
The maximum number of tweets to show
count — number
The maximum number of tweets to retrieve
retweets — true|false
Show or don't show retweets
replies — true|false
Show or don't show at-replies
cacheExpire — number
Number of milliseconds to cache tweets (localstorage on the client).
list — string
Name of the list from the user to pull tweets from
target — string
Id of a target DOM object you'd like the tweets to get added to.
success — function(json)
A callback function called when tweets are successfully retrieved. The json data is the argument.
error — function
A callback function called when tweet retrieval errors.
templates — json object
A json collection with both the base and tweet templates. Example:
templates: {
  base:'<ul class="chirp">{{tweets}}</ul>',
  tweet: '<li><img src="{{user.profile_image_url}}"> {{html}}</li>'
}

Advanced Templating

Templating is simple. You can modify the afore mentioned templates object in the options and adjust the template to fit your markup needs. All template variables exist within mustache braces, like so {{variable}}. Variables nested within sub-json objects can be referenced with dot notation. i.e. {{user.name}}. A reference of all variables can be found here.

In addition to json variables returned from Twitter, additional variables added to the structure are:

html The html of the tweet, including linked entities such as hashtags, at-replies and links.
index The number index of the current tweet, starting with 1. Works great if you want to style the first couple of tweets differently.
time_ago Time of the tweet in human readable time ago. i.e. 1 hour ago, Yesterday, 2 weeks ago, etc.

Chirp is phasing out :(

I'm currently leaving this site up, but because Twitter is phasing out the v1 API, Chirp.js will no longer work in the coming months.

Thanks for all the downloads and donations from people that loved Chirp. If you absolutely must hvae tweets on your site via a front-end solution like javascript, your best bet right now is using the official Twitter embedded timelines