JSFiddle - React, Tailwind, and code Playground

New Twitter Rotator

by Jennifer Perrin

HTML

<div id="tweets">
    <ul class="tweetList"></ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);
body { font-family:'Raleway'; }

ul.tweetList {
    list-style: none outside none;
}
#tweets {
    margin: 20px auto;
    width: 90%;
}
#tweets li {
    color: #444;
    padding: 5px;
}
#tweets li p {
    font-size: 16px;
    margin: 0;
}

#tweets a {
    text-decoration: none;
    color: #f26222;
    font-size: 12px;
}
    #tweets a:hover {
        text-decoration: underline;
        color: #b15030;
    }
 
#tweets li p small {
    font-size: 12px;
    color: #999;
}

JavaScript

/*
* tweetable 1.7.1 - jQuery twitter feed plugin
*
* Copyright (c) 2009 Philip Beel (http://www.theodin.co.uk/)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
*/ 
(function ($) {
    jQuery.fn.tweetable = function (opts) {
        opts = $.extend({}, $.fn.tweetable.options, opts);
        return this.each(function () {
            var act = jQuery(this),
                tweetList = jQuery('<ul class="tweetList">')[opts.position.toLowerCase() + 'To'](act),
                shortMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                api = "http://api.getmytweets.co.uk/?screenname=",
                limitcount = "&limit=",
                twitterError, tweetMonth, tweetMonthInt, iterate, element;
            // Fire JSON request to twitter API
            jQuery.getJSON(api + opts.username + limitcount + opts.limit, act, function (data) {
                // Check for response error
                twitterError = data && data.error || null;
                if (twitterError) {
                    tweetList.append('<li class="tweet_content item"><p class="tweet_link">' + opts.failed + '</p></li>');
                    return;
                }
                // Loop through twitter API response
                jQuery.each(data.tweets, function (i, tweet) {
                    // Output tweets if less than limit
                    if (i >= opts.limit) return;
                    tweetList.append('<li class="tweet_content_' + i + '"><p class="tweet_link_' + i + '">' + tweet.response.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>').replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ').replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1">@$1 </a>$2').replace(/:">/, ' ">').replace(/: <\/a>/, '</a>:') + '</p></li>');
               ...