Download
Check out the script in action at seaofclouds.com, and see the following demos.
Displaying three tweets from the seaofclouds twitter feed:
$(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..."
});
});
Displaying four tweets from the query "tweet.seaofclouds.com":
$(function(){
$("#query").tweet({
avatar_size: 32,
count: 4,
query: "tweet.seaofclouds.com",
loading_text: "searching twitter..."
});
});
Displaying up to three links with the search query "from:seaofclouds http":
$(function(){
$("#userandquery").tweet({
count: 3,
query: "from:seaofclouds http",
loading_text: "searching twitter..."
});
});
Displaying four tweets from the two users "seaofclouds" and "laughingsquid", refreshing every 10 seconds:
$(function(){
$("#fromtwo").tweet({
avatar_size: 32,
count: 4,
username: ["seaofclouds", "laughingsquid"],
loading_text: "searching twitter...",
refresh_interval: 10
});
});
Displaying tweets from users on the 'team' list of 'twitter':
$(function(){
$("#list").tweet({
avatar_size: 32,
count: 4,
username: "twitter",
list: "team",
loading_text: "loading list..."
});
});
Displaying the user seaofclouds' favorite tweets:
$(function(){
$("#favorites").tweet({
avatar_size: 32,
count: 3,
username: "seaofclouds",
favorites: true,
loading_text: "loading list..."
});
});
Fetch 20 tweets, but filter out @replies, and display only 3:
$(function(){
$("#filter").tweet({
avatar_size: 32,
count: 3,
fetch: 20,
filter: function(t){ return ! /^@\w+/.test(t["tweet_raw_text"]); },
username: "seaofclouds",
});
});
Customize the layout to eliminate the date stamps and avatars:
$(function(){
$("#custom").tweet({
avatar_size: 32,
count: 4,
username: "seaofclouds",
template: function(i){return i["text"]}
});
});
Adding a message when no tweets matching 'somerandomstring' are found:
$(function(){
$("#empty").tweet({
avatar_size: 32,
count: 4,
query: rnd,
loading_text: "searching twitter..."
}).bind("empty", function() { $(this).append("No matching tweets found"); });
});
NOTE: Some users have reported that they do not show up in Twitter's search results.
2. include jQuery and jquery.tweet.js files in your template's <head>.
<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="/tweet/jquery.tweet.js" type="text/javascript"></script>
3. Also in <head>, Initialize tweet! on page load with your Username and other options
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
username: "seaofclouds",
join_text: "auto",
avatar_size: 32,
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 to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
</script>
4. In <body>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!
<div class="tweet"></div>
5. Style with our stylesheet in <head>, or modify as you like!
<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
Bring your code slinging skills to Github and help us develop new features for tweet!
git clone git://github.com/seaofclouds/tweet.git
Report bugs and request features in Github Issues
http://www.opensource.org/licenses/mit-license.php
Twoot is a miniature Twitter client based on Tweet that allows you to post tweets and see what your friends are up to. Thanks, Peter Krantz!
something nifty from seaofclouds™ | contribute