JSFiddle - React, Tailwind, and code Playground

Twitter Tweets Ticker

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div id="tweet">
    <div id="ticker" class="query"></div>
</div>

CSS

#tweet {
  background: #ececec;
  color: #555;
  font-family: 'Yanone Kaffeesatz';
  margin: 10px 10px 0 10px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 400px;
  border: #cccccc 1px solid;
  border-radius: 3px;

  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
#ticker ul.tweet_list {
  height:4em;
  overflow-y:hidden;
  font-size: 1.1em;
}
#ticker .tweet_list li {
  height:4em;
}
a {
    color: #5a7c87;
    text-decoration: none;
    font-size: .9em;
}
.small { font-size: .8em; }
.link { font-size: .9em; }

JavaScript

(function(factory) {
    if (typeof define === 'function' && define.amd) define(['jquery'], factory);
    else factory(jQuery);
}(function($) {
    $.fn.tweet = function(o) {
        var s = $.extend({
            username: null,
            list: null,
            favorites: false,
            query: null,
            avatar_size: null,
            count: 5,
            fetch: null,
            page: 1,
            retweets: true,
            intro_text: null,
            outro_text: null,
            join_text: "<br />", // [string]   optional text in between date and tweet, try setting to "auto"
            auto_join_text_default: "I said,",
            auto_join_text_ed: "I",
            auto_join_text_ing: "I am",
            auto_join_text_reply: "I replied to",
            auto_join_text_url: "I was looking at",
            loading_text: null,
            refresh_interval: null,
            twitter_url: "twitter.com",
            twitter_api_url: "api.twitter.com",
            twitter_search_url: "search.twitter.com",
            template: "{text}{join}{time}", //{avatar}{time}{join}{text}
            comparator: function(tweet1, tweet2) {
                return tweet2["tweet_time"] - tweet1["tweet_time"];
            },
            filter: function(tweet) {
                return true;
            }
        }, o);

        var url_regexp = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/gi;

        function t(template, info) {
            if (typeof template === "string") {
                var result = template;
                for (var key in info) {
                    var val = info[key];
                    result = result.split('{' + key + '}').join(val === null ? '' : val);
                }
                return result;
            } else return template(info);
        }

        $.extend({
            tweet: {
   ...