twitter feeds

http://tweet.seaofclouds.com/

by ecartdk

HTML

<script src="http://tweet.seaofclouds.com/jquery.tweet.js"></script>
<h1>Tweet!</h1>
  <h2>put <a href="http://twitter.com">twitter</a> on your website with <em>tweet!</em>, an unobtrusive javascript plugin for jquery.</h2>


  <p>Check out the script in action at <a href="http://seaofclouds.com">seaofclouds.com</a>, and see the following demos.</p>


  <h3>Examples</h3>


  <p>Displaying three tweets from the <a href="http://twitter.com/seaofclouds">seaofclouds twitter feed</a>:</p>
  <pre class="example">
    jQuery(function($){
      $(".tweet").tweet({
        join_text: "auto",
        username: "seaofclouds",
        avatar_size: 48,
        count: 3,
        auto_join_text_default: "we said,",
        auto_join_text_ed: "we",
        auto_join_text_ing: "we were",
        auto_join_text_reply: "we replied",
        auto_join_text_url: "we were checking out",
        loading_text: "loading tweets..."
      });
    });
  </pre>
  <div class='tweet query'></div>
  <script type="text/javascript">
    jQuery(function($){ $(".example").each(function(i, e){ eval($(e).text()); }); });
  </script>


  <p>Displaying up to four tweets with the query "<a href="http://search.twitter.com/search?q=tweet.seaofclouds.com">tweet.seaofclouds.com</a>":</p>
  <pre class="example">
    jQuery(function($){
      $("#query").tweet({
        avatar_size: 32,
        count: 4,
        query: "tweet.seaofclouds.com",
        loading_text: "searching twitter..."
      });
    });
  </pre>
  <div id="query" class='query'></div>


  <p>Displaying up to three links with the search query "<a href="http://search.twitter.com/search?q=from%3Aseaofclouds%20http">from:seaofclouds http</a>":</p>
  <pre class="example">
    jQuery(function($){
      $("#userandquery").tweet({
        count: 3,
        query: "from:seaofclouds http",
        loading_text: "searching twitter..."
      });
    });
  </pre>
  <div id='userandquery' class="query"></div>


  <p>Displaying four tweets from the two...

CSS

body {   background-color: #008D99;   color: white;   font: 15px/1.3 arial, sans-serif;   margin: 0 auto;   width: 480px;   padding: 30px;   text-align: left; }    h1 {   font-size: 240%;   margin-bottom: -.5em; } h2, p, ul, code {   margin-bottom: 1em; } h2 a {   color: #fff; } h3 {   font-size: 140%;   margin-bottom: .4em; } ul {   padding-left: 2em; }   ul li {     list-style-type: square;      margin-left: 0;} a {   color: #8ADEE2; } code, .example {   padding: .5em;   display: block;   overflow-x: auto;} code {   margin-left: 1em;} code, .code, .example {   background-color: #0C717A;   color: #fff;   font-size: 85%;   font-family: courier, monospace; }   code a, .code a {     color: #fff; } .show-code {   display: block;   font-size: 75%;   margin: 1em 0;} .copyright {   font-family: verdana, sans-serif;   font-size: 75%;   margin-top: 8em; }   .copyright span {     color: #8ADEE2; } .download h4 {   font-size: 120%;   margin-top: -.5em;   color: #8ADEE2; } .twoot {   padding-top: 3em; } .query {   margin-bottom: 2em; }

.tweet, .query {     font: 120% Georgia, serif;     color: #085258; }      .tweet_list {         -webkit-border-radius: 0.5em;         -moz-border-radius: 0.5em;         border-radius: 0.5em;         list-style: none;         margin: 0;         padding: 0;         overflow-y: hidden;         background-color: #8ADEE2;     }              .tweet_list .awesome,         .tweet_list .epic {             text-transform: uppercase;         }                  .tweet_list li {             overflow-y: auto;             overflow-x: hidden;             padding: 0.5em;         }                      .tweet_list li a {                 color: #0C717A;             }                  .tweet_list .tweet_even {             background-color: #91E5E7;         }                  .tweet_list .tweet_avatar {             padding-right: .5em; float: left;         }                      .tweet_list .tweet_avatar img {                 vertical-align: middle;             }

JavaScript

function randomString(length) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
      var str = '';
      for (var i = 0; i < length; i++) {
        str += chars[Math.floor(Math.random() * chars.length)];
      }
      return str;
    }
    var rnd = randomString(8);


    jQuery(function($) {
      $(".rnd").replaceWith(rnd);




      $(".example").hide().each(function(i,e){
        $(e).before($('<a class="show-code" href="#">Show code &raquo;</a>').
                      click(function(ev) {
                        $(e).slideToggle();
                        $(this).hide();
                        ev.preventDefault();
                      }));
      });
    });