JSFiddle - React, Tailwind, and code Playground

jquery tweets

by bitstarr

CSS

#tweets { background:#FAFAFA;border:1px solid #e4e4e4;margin:0; padding:0}
#tweets li {border-bottom:1px dotted #CCC;list-style:none;padding:5px}
#tweets li:last-child { border:0}

JavaScript

(function($){
    $.fn.tweets = function(options) {
        $.ajaxSetup({ cache: true });
        
        var defaults = {
            tweets: 5,
            before: "<li>",
            after: "</li>"
        };
        
        var options = $.extend(defaults, options);
        
        return this.each(function() {
            var $this = $(this);
            $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?callback=?&screen_name=' + options.username,
                function(data) {
                    $.each(data, function(i, tweet) {
                        if(tweet.text !== undefined) {
                            $this.append(options.before + tweet.text + options.after);
                        }
                        if(i+1 === options.tweets){
                            return false;
                        }
                    });
                }
            );
        });
    };
})(jQuery);

$('<ul id="tweets" />')
     .tweets({
           tweets:20,
           username: "sebastianlaube"
      }).appendTo('body');