Renders tweets from Twitter's API to HTML. This plugin does not communicate with Twitter's API directly, but instead provides a flexible way to specify a custom endpoint or execute a custom AJAX request.
It is recommended to use a server-side cache when requesting tweets to help prevent going over Twitter's rate limit. See connect-user-tweets for a Node.js based solution.
Visit http://neilgoodman.net to see an example of this plugin in use.
This plugin is offered as a Bower package for convenience:
$ bower install jquery-render-tweets
You can then include the plugin in your HTML:
<script src="/bower_components/jquery/jquery.js">
<script src="/bower_components/jquery-render-tweets/lib/jquery.render-tweets.js">A minified version of the plugin is available here:
<script src="/bower_components/jquery-render-tweets/dist/jquery.render-tweets.min.js">$(function () {
// The rendered HTML will be appended to the <body> element.
$('body').renderTweets({
tweets: [], // Inject the tweet data directly if you have it.
template: function (data) {}, // Specify a standard JST function to render the tweets. Data contains: { tweets: [...] }
url: '/tweets' // The URL to lookup tweets. Can also be a function that takes in a callback as its first parameter which should be called when the request is complete.
});
});- render: Render the tweets into the attached DOM element.
- refresh: Fetch the tweets using the
urlsetting and then callrender - remove: Destroys the plugin data.
$.renderTweets.parseTweet: A utility method to parse a tweet and turn @names, #tags, and links into HTML. This can be used inside of template helpers.
All events are triggered on the attached DOM element:
$('body')
.renderTweets({ url: '/tweets' })
.on('render', function (event, data) {
// Awesome handler.
})
.on('renderCompleted', function (event) {
// Even more awesome handler.
});- render: Triggered right before the rendered HTML is attached to the DOM. The rendered HTML wrapped in a jQuery object is passed as a parameter.
- renderCompleted: Triggered after the rendered HTML has been attached to the DOM.
- request: Triggered when the AJAX request for tweets has been made. The jQuery
$.Deferredobject from the AJAX call is passed as a parameter. - requestCompleted: Triggered when the AJAX request completes successfully. The data returned from the request is given as a parameter.
Using an URL to get tweets:
$(function () {
$('body').renderTweets({
url: '/tweets'
});
});Making a custom AJAX request:
$(function () {
$('body').renderTweets({
url: function (callback) {
return $.get(
'/tweets',
function (data) {
callback(data);
},
'json'
);
}
});
});Using a custom template:
$(function () {
$('body').renderTweets({
template: Handlebars.compile($('#tweets-template').html()), // Handlebars is used as an example. You can use any templating engine that can create a JST function.
url: '/tweets'
});
});Render inside of an AJAX call:
$(function () {
.get(
'/tweets',
function (data) {
$('body').renderTweets({
tweets: data
});
},
'json'
);
});Manually render:
$(function () {
$('body').renderTweets('render');
});Manually refresh and render:
$(function () {
$('body').renderTweets('refresh');
});Destroy the plugin:
$(function () {
$('body').renderTweets('remove');
});