| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html>
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8" />
|
|---|
| 5 | <title>Tweet! Put Twitter on your site with this simple, unobtrusive jQuery widget</title>
|
|---|
| 6 | <link href="index.css" rel="stylesheet"/>
|
|---|
| 7 | <link href="jquery.tweet.css" rel="stylesheet"/>
|
|---|
| 8 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
|
|---|
| 9 | <script src="jquery.tweet.js" charset="utf-8"></script>
|
|---|
| 10 | <script type="text/javascript">
|
|---|
| 11 | function randomString(length) {
|
|---|
| 12 | var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
|
|---|
| 13 | var str = '';
|
|---|
| 14 | for (var i = 0; i < length; i++) {
|
|---|
| 15 | str += chars[Math.floor(Math.random() * chars.length)];
|
|---|
| 16 | }
|
|---|
| 17 | return str;
|
|---|
| 18 | }
|
|---|
| 19 | var rnd = randomString(8);
|
|---|
| 20 |
|
|---|
| 21 | jQuery(document).ready(function($) {
|
|---|
| 22 | $(".rnd").replaceWith(rnd);
|
|---|
| 23 |
|
|---|
| 24 |
|
|---|
| 25 | $(".example").hide().each(function(i,e){
|
|---|
| 26 | $(e).before($('<a class="show-code" href="#">Show code »</a>').
|
|---|
| 27 | click(function(ev) {
|
|---|
| 28 | $(e).slideToggle();
|
|---|
| 29 | $(this).hide();
|
|---|
| 30 | ev.preventDefault();
|
|---|
| 31 | }));
|
|---|
| 32 | });
|
|---|
| 33 | });
|
|---|
| 34 | </script>
|
|---|
| 35 | </head>
|
|---|
| 36 | <body>
|
|---|
| 37 | <h1>Tweet!</h1>
|
|---|
| 38 | <h2>put <a href="http://twitter.com">twitter</a> on your website with <em>tweet!</em>, an unobtrusive javascript plugin for jquery.</h2>
|
|---|
| 39 |
|
|---|
| 40 | <p>Check out the script in action at <a href="http://seaofclouds.com">seaofclouds.com</a>, and see the following demos.</p>
|
|---|
| 41 |
|
|---|
| 42 | <h3>Examples</h3>
|
|---|
| 43 |
|
|---|
| 44 | <p>Displaying three tweets from the <a href="http://twitter.com/seaofclouds">seaofclouds twitter feed</a>:</p>
|
|---|
| 45 | <pre class="example">
|
|---|
| 46 | $(function(){
|
|---|
| 47 | $(".tweet").tweet({
|
|---|
| 48 | join_text: "auto",
|
|---|
| 49 | username: "seaofclouds",
|
|---|
| 50 | avatar_size: 48,
|
|---|
| 51 | count: 3,
|
|---|
| 52 | auto_join_text_default: "we said,",
|
|---|
| 53 | auto_join_text_ed: "we",
|
|---|
| 54 | auto_join_text_ing: "we were",
|
|---|
| 55 | auto_join_text_reply: "we replied",
|
|---|
| 56 | auto_join_text_url: "we were checking out",
|
|---|
| 57 | loading_text: "loading tweets..."
|
|---|
| 58 | });
|
|---|
| 59 | });
|
|---|
| 60 | </pre>
|
|---|
| 61 | <div class='tweet query'></div>
|
|---|
| 62 | <script type="text/javascript">
|
|---|
| 63 | $(function(){ $(".example").each(function(i, e){ eval($(e).text()); }); });
|
|---|
| 64 | </script>
|
|---|
| 65 |
|
|---|
| 66 | <p>Displaying four tweets from the query "<a href="http://search.twitter.com/search?q=tweet.seaofclouds.com">tweet.seaofclouds.com</a>":</p>
|
|---|
| 67 | <pre class="example">
|
|---|
| 68 | $(function(){
|
|---|
| 69 | $("#query").tweet({
|
|---|
| 70 | avatar_size: 32,
|
|---|
| 71 | count: 4,
|
|---|
| 72 | query: "tweet.seaofclouds.com",
|
|---|
| 73 | loading_text: "searching twitter..."
|
|---|
| 74 | });
|
|---|
| 75 | });
|
|---|
| 76 | </pre>
|
|---|
| 77 | <div id="query" class='query'></div>
|
|---|
| 78 |
|
|---|
| 79 | <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>
|
|---|
| 80 | <pre class="example">
|
|---|
| 81 | $(function(){
|
|---|
| 82 | $("#userandquery").tweet({
|
|---|
| 83 | count: 3,
|
|---|
| 84 | query: "from:seaofclouds http",
|
|---|
| 85 | loading_text: "searching twitter..."
|
|---|
| 86 | });
|
|---|
| 87 | });
|
|---|
| 88 | </pre>
|
|---|
| 89 | <div id='userandquery' class="query"></div>
|
|---|
| 90 |
|
|---|
| 91 | <p>Displaying four tweets from the two users "seaofclouds" and "laughingsquid", refreshing every 10 seconds:</p>
|
|---|
| 92 | <pre class="example">
|
|---|
| 93 | $(function(){
|
|---|
| 94 | $("#fromtwo").tweet({
|
|---|
| 95 | avatar_size: 32,
|
|---|
| 96 | count: 4,
|
|---|
| 97 | username: ["seaofclouds", "laughingsquid"],
|
|---|
| 98 | loading_text: "searching twitter...",
|
|---|
| 99 | refresh_interval: 10
|
|---|
| 100 | });
|
|---|
| 101 | });
|
|---|
| 102 | </pre>
|
|---|
| 103 | <div id='fromtwo' class="query"></div>
|
|---|
| 104 |
|
|---|
| 105 | <p>Displaying tweets from users on the 'team' list of 'twitter':</p>
|
|---|
| 106 | <pre class="example">
|
|---|
| 107 | $(function(){
|
|---|
| 108 | $("#list").tweet({
|
|---|
| 109 | avatar_size: 32,
|
|---|
| 110 | count: 4,
|
|---|
| 111 | username: "twitter",
|
|---|
| 112 | list: "team",
|
|---|
| 113 | loading_text: "loading list..."
|
|---|
| 114 | });
|
|---|
| 115 | });
|
|---|
| 116 | </pre>
|
|---|
| 117 | <div id='list' class="query"></div>
|
|---|
| 118 |
|
|---|
| 119 | <p>Displaying the user seaofclouds' favorite tweets:</p>
|
|---|
| 120 | <pre class="example">
|
|---|
| 121 | $(function(){
|
|---|
| 122 | $("#favorites").tweet({
|
|---|
| 123 | avatar_size: 32,
|
|---|
| 124 | count: 3,
|
|---|
| 125 | username: "seaofclouds",
|
|---|
| 126 | favorites: true,
|
|---|
| 127 | loading_text: "loading list..."
|
|---|
| 128 | });
|
|---|
| 129 | });
|
|---|
| 130 | </pre>
|
|---|
| 131 | <div id="favorites" class="query"></div>
|
|---|
| 132 |
|
|---|
| 133 | <p>Fetch 20 tweets, but filter out @replies, and display only 3:</p>
|
|---|
| 134 | <pre class="example">
|
|---|
| 135 | $(function(){
|
|---|
| 136 | $("#filter").tweet({
|
|---|
| 137 | avatar_size: 32,
|
|---|
| 138 | count: 3,
|
|---|
| 139 | fetch: 20,
|
|---|
| 140 | filter: function(t){ return ! /^@\w+/.test(t["tweet_raw_text"]); },
|
|---|
| 141 | username: "seaofclouds",
|
|---|
| 142 | });
|
|---|
| 143 | });
|
|---|
| 144 | </pre>
|
|---|
| 145 | <div id='filter' class="query"></div>
|
|---|
| 146 |
|
|---|
| 147 | <p>Customize the layout to eliminate the date stamps and avatars:</p>
|
|---|
| 148 | <pre class="example">
|
|---|
| 149 | $(function(){
|
|---|
| 150 | $("#custom").tweet({
|
|---|
| 151 | avatar_size: 32,
|
|---|
| 152 | count: 4,
|
|---|
| 153 | username: "seaofclouds",
|
|---|
| 154 | template: function(i){return i["text"]}
|
|---|
| 155 | });
|
|---|
| 156 | });
|
|---|
| 157 | </pre>
|
|---|
| 158 | <div id='custom' class="query"></div>
|
|---|
| 159 |
|
|---|
| 160 | <p>Adding a message when no tweets matching '<span class="rnd">somerandomstring</span>' are found:</p>
|
|---|
| 161 | <pre class="example">
|
|---|
| 162 | $(function(){
|
|---|
| 163 | $("#empty").tweet({
|
|---|
| 164 | avatar_size: 32,
|
|---|
| 165 | count: 4,
|
|---|
| 166 | query: rnd,
|
|---|
| 167 | loading_text: "searching twitter..."
|
|---|
| 168 | }).bind("empty", function() { $(this).append("No matching tweets found"); });
|
|---|
| 169 | });
|
|---|
| 170 | </pre>
|
|---|
| 171 | <div id='empty' class="query"></div>
|
|---|
| 172 |
|
|---|
| 173 | <h3>Features</h3>
|
|---|
| 174 | <ul>
|
|---|
| 175 | <li>small size and fast download time</li>
|
|---|
| 176 | <li>will not slow down or pause your page while tweets are loading</li>
|
|---|
| 177 | <li>display up to 100 tweets, as permitted by the twitter search api</li>
|
|---|
| 178 | <li>display tweets from a twitter search, or from your own feed</li>
|
|---|
| 179 | <li>optional verb tense matching, for human readable tweets</li>
|
|---|
| 180 | <li>optionally display your avatar</li>
|
|---|
| 181 | <li>optionally display tweets from multiple accounts!</li>
|
|---|
| 182 | <li>display tweets from a list, or display a user's favorites</li>
|
|---|
| 183 | <li>optional reloading after a specified delay</li>
|
|---|
| 184 | <li>automatic linking of @replies to users’ twitter page</li>
|
|---|
| 185 | <li>automatic linking of URLs</li>
|
|---|
| 186 | <li>uses <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API</a>, so you can display any tweets you like</li>
|
|---|
| 187 | <li>Display up to 100 tweets that have been posted within 7 days (limit set by <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API</a>)</li>
|
|---|
| 188 | <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>
|
|---|
| 189 | <li>converts <3 to a css styleable <span class='heart'>â¥</span> (we ⥠hearts)</li>
|
|---|
| 190 | <li>makes awesome text, AWESOME text with AWESOMEIZER</li>
|
|---|
| 191 | <li>customize the layout for tweets within the widget</li>
|
|---|
| 192 | <li>apply custom filters, e.g. to remove @replies</li>
|
|---|
| 193 | <li>define a custom sort order for tweets</li>
|
|---|
| 194 | <li>customize the style with your own stylesheet or with other jquery plugins</li>
|
|---|
| 195 | <li>compatible with most jquery versions, including jquery 1.2.6, 1.3.x, 1.4.x, and the latest 1.5</li>
|
|---|
| 196 | </ul>
|
|---|
| 197 |
|
|---|
| 198 | <p><strong>NOTE:</strong> Some users have reported that they <a href="http://help.twitter.com/forums/10713/entries/42646">do not show up in Twitter's search results</a>.</p>
|
|---|
| 199 |
|
|---|
| 200 | <div class='download'>
|
|---|
| 201 | <h3>Download</h3>
|
|---|
| 202 | <p>
|
|---|
| 203 | <a href="http://github.com/seaofclouds/tweet/zipball/master">
|
|---|
| 204 | <img width="90" src="http://github.com/images/modules/download/zip.png"></a>
|
|---|
| 205 | <a href="http://github.com/seaofclouds/tweet/tarball/master">
|
|---|
| 206 | <img width="90" src="http://github.com/images/modules/download/tar.png"></a>
|
|---|
| 207 | </p>
|
|---|
| 208 | </div>
|
|---|
| 209 |
|
|---|
| 210 | <h3>Usage</h3>
|
|---|
| 211 | <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>.
|
|---|
| 212 | <p><strong>2.</strong> include jQuery and jquery.tweet.js files in your template's <span class="code"><head></span>.</p>
|
|---|
| 213 | <code>
|
|---|
| 214 | <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script><br />
|
|---|
| 215 | <script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>
|
|---|
| 216 | </code>
|
|---|
| 217 | <p><strong>3.</strong> Also in <span class="code"><head></span>, Initialize tweet! on page load with your Username and other options</p>
|
|---|
| 218 | <code>
|
|---|
| 219 | <script type='text/javascript'><br />
|
|---|
| 220 | $(document).ready(function(){<br />
|
|---|
| 221 | $(".tweet").tweet({<br />
|
|---|
| 222 | username: "seaofclouds",<br />
|
|---|
| 223 | join_text: "auto",<br />
|
|---|
| 224 | avatar_size: 32,<br />
|
|---|
| 225 | count: 3,<br />
|
|---|
| 226 | auto_join_text_default: "we said,", <br />
|
|---|
| 227 | auto_join_text_ed: "we",<br />
|
|---|
| 228 | auto_join_text_ing: "we were",<br />
|
|---|
| 229 | auto_join_text_reply: "we replied to",<br />
|
|---|
| 230 | auto_join_text_url: "we were checking out",<br />
|
|---|
| 231 | loading_text: "loading tweets..."<br />
|
|---|
| 232 | });<br />
|
|---|
| 233 | });<br />
|
|---|
| 234 | </script>
|
|---|
| 235 | </code>
|
|---|
| 236 | <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>
|
|---|
| 237 | <code>
|
|---|
| 238 | <div class="tweet"></div>
|
|---|
| 239 | </code>
|
|---|
| 240 | <p><strong>5.</strong> Style with our stylesheet in <span class="code"><head></span>, or modify as you like!</p>
|
|---|
| 241 | <code>
|
|---|
| 242 | <link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
|
|---|
| 243 | </code>
|
|---|
| 244 |
|
|---|
| 245 | <h3>Contribute</h3>
|
|---|
| 246 | <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>
|
|---|
| 247 | <code>
|
|---|
| 248 | git clone git://github.com/seaofclouds/tweet.git
|
|---|
| 249 | </code>
|
|---|
| 250 | <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>
|
|---|
| 251 | <p>
|
|---|
| 252 | <strong>Report bugs and request features</strong> in <a href="http://github.com/seaofclouds/tweet/issues">Github Issues</a>
|
|---|
| 253 | </p>
|
|---|
| 254 | <h3>Licensed under the MIT</h3>
|
|---|
| 255 | <code>
|
|---|
| 256 | <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>
|
|---|
| 257 | </code>
|
|---|
| 258 | <div class='twoot'>
|
|---|
| 259 | <h3>If you like Tweet, check out <a href="http://github.com/peterk/twoot/tree/master">Twoot</a>!</h3>
|
|---|
| 260 | <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>
|
|---|
| 261 | </div>
|
|---|
| 262 | <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>
|
|---|
| 263 | </body>
|
|---|
| 264 | </html>
|
|---|
