<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tweet! Put Twitter on your site with this simple, unobtrusive jQuery widget</title>
<link href="index.css" media="all" rel="stylesheet" type="text/css"/>
<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
<link href="jquery.tweet.query.css" media="all" rel="stylesheet" type="text/css"/>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.tweet.js" type="text/javascript"></script>
<script type='text/javascript'>
jQuery(document).ready(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..."
});
$(".query").tweet({
avatar_size: 32,
count: 4,
query: "tweet.seaofclouds.com",
loading_text: "searching twitter..."
});
})
</script>
</head>
<body>
<div class='container'>
<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>
<h3>Demo</h3>
<p>displaying three tweets from the <a href="http://twitter.com/seaofclouds">seaofclouds twitter feed</a>, or check the script in action at <a href="http://seaofclouds.com">seaofclouds.com</a></p>
<div class='tweet'></div>
<p>displaying four tweets from the query "<a href="http://search.twitter.com/search?q=tweet.seaofclouds.com">tweet.seaofclouds.com</a>".</p>
<div class='query'></div>
<h3>Features</h3>
<ul>
<li>small size and fast download time</li>
<li>will not slow down or pause your page while tweets are loading</li>
<li>display up to 100 tweets, as permitted by the twitter search api</li>
<li>display tweets from a twitter search, or from your own feed</li>
<li>optional verb tense matching, for human readable tweets</li>
<li>optionally display your avatar</li>
<li>optionally display tweets from multiple accounts!</li>
<li>automatic linking of @replies to users’ twitter page</li>
<li>automatic linking of URLs</li>
<li>automatic linking of <a href="http://search.twitter.com/search?q=&tag=hashtags">#hashtags</a>, to a twitter search of all your tags</li>
<li>converts <3 to a css styleable <tt class='heart'>♥</tt> (we ♥ hearts)</li>
<li>makes awesome text, AWESOME text with AWESOMEIZER</li>
<li>customize the style with your own stylesheet or with other jquery plugins</li>
<li>compatible with most jquery versions, including jquery 1.2.6 and the latest, 1.3.x</li>
</ul>
<div class='download'>
<h3>Download</h3>
<p>
<a href="http://github.com/seaofclouds/tweet/zipball/master">
<img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
<a href="http://github.com/seaofclouds/tweet/tarball/master">
<img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
</p>
</div>
<h3>Usage</h3>
<p><strong>1.</strong> <a href="http://jquery.com/">Get JQuery</a>. In these examples, we use <a href="http://code.google.com/apis/ajaxlibs/">Google's AJAX Libraries API</a>.
<p><strong>2.</strong> include jQuery and jquery.tweet.js files in your template's <span class="code"><head></span>.</p>
<code>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script><br />
<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>
</code>
<p><strong>3.</strong> Also in <span class="code"><head></span>, Initialize tweet! on page load with your Username and other options</p>
<code>
<script type='text/javascript'><br />
$(document).ready(function(){<br />
$(".tweet").tweet({<br />
username: "seaofclouds",<br />
join_text: "auto",<br />
avatar_size: 32,<br />
count: 3,<br />
auto_join_text_default: "we said,", <br />
auto_join_text_ed: "we",<br />
auto_join_text_ing: "we were",<br />
auto_join_text_reply: "we replied to",<br />
auto_join_text_url: "we were checking out",<br />
loading_text: "loading tweets..."<br />
});<br />
});<br />
</script>
</code>
<p><strong>4.</strong> In <span class="code"><body></span>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!</p>
<code>
<div class="tweet"></div>
</code>
<p><strong>5.</strong> Style with our stylesheet in <span class="code"><head></span>, or modify as you like!</p>
<code>
<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
</code>
<h3>Contribute</h3>
<p>Bring your code slinging skills to <a href="http://github.com/seaofclouds/tweet/">Github</a> and help us develop new features for tweet!</p>
<code>
git clone git://github.com/seaofclouds/tweet.git
</code>
<a href="http://github.com/seaofclouds/tweet"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" /></a>
<p>
<strong>Report bugs</strong> in our <a href="http://seaofclouds.lighthouseapp.com/projects/14179-tweet/overview">lighthouse tracker</a>
</p>
<h3>Licensed under the MIT</h3>
<code>
<a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>
</code>
<div class='twoot'>
<h3>If you like Tweet, check out <a href="http://github.com/peterk/twoot/tree/master">Twoot</a>!</h3>
<p><a href="http://github.com/peterk/twoot/tree/master">Twoot</a> is a miniature Twitter client based on Tweet that allows you to post tweets and see what your friends are up to. Thanks, <a href="http://www.peterkrantz.com">Peter Krantz</a>!</p>
</div>
<p class='copyright'>something nifty from <a href="http://seaofclouds.com">seaofclouds</a><span class="trade">™</span> | <a href="http://github.com/seaofclouds/tweet/">contribute</a></p>
</div>
</body>
</html>
