Tweet


Tweet!

put http://twitter.com">twitter on your website with tweet!, an unobtrusive javascript plugin for jquery.

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

Examples

#1 - Displaying three tweets from the http://twitter.com/seaofclouds">seaofclouds twitter feed:

      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..."
        });
      });
    

#2 - Displaying up to four tweets with the query "http://search.twitter.com/search?q=tweet.seaofclouds.com">tweet.seaofclouds.com":
(You can use any query supported by https://twitter.com/search">Twitter search)

      jQuery(function($){
        $("#query").tweet({
          avatar_size: 32,
          count: 4,
          query: "tweet.seaofclouds.com",
          loading_text: "searching twitter..."
        });
      });
    

#3 - Displaying up to three links with the search query "http://search.twitter.com/search?q=from%3Aseaofclouds%20http">from:seaofclouds http":

      jQuery(function($){
        $("#userandquery").tweet({
          count: 3,
          query: "from:seaofclouds http",
          loading_text: "searching twitter..."
        });
      });
    

#4 - Displaying four tweets from the two users "seaofclouds" and "laughingsquid", refreshing every 60 seconds:

(Note that it's more reliable to display multiple users' tweets by using a list - see below)

      jQuery(function($){
        $("#fromtwo").tweet({
          avatar_size: 32,
          count: 4,
          username: ["seaofclouds", "laughingsquid"],
          loading_text: "searching twitter...",
          refresh_interval: 60
        });
      });
    

#5 - Displaying tweets from users on the 'team' list of 'twitter':

      jQuery(function($){
        $("#list").tweet({
          avatar_size: 32,
          count: 4,
          username: "twitter",
          list: "team",
          loading_text: "loading list..."
        });
      });
    

#6 - Displaying the user sanityinc's favorite tweets, and using a handler for tweet's "loaded" event to make links open in a new window:

      jQuery(function($){
        $("#favorites").tweet({
          avatar_size: 32,
          count: 3,
          username: "sanityinc",
          favorites: true,
          loading_text: "loading list..."
        }).bind("loaded",function(){$(this).find("a").attr("target","_blank");});
      });
    

#7 - Fetch 20 tweets, but filter out @replies, and display only 3:

      jQuery(function($){
        $("#filter").tweet({
          avatar_size: 32,
          count: 3,
          fetch: 20,
          filter: function(t){ return ! /^@\w+/.test(t.tweet_raw_text); },
          username: "sanityinc"
        });
      });
    

#8 - Customize the layout to eliminate the date stamps and avatars, add an action (aka "web intent") link, and make it open in a popup window:

      jQuery(function($){
        $("#custom").tweet({
          avatar_size: 32,
          count: 4,
          username: "seaofclouds",
          template: "{text} » {retweet_action}"
        });
      }).bind("loaded", function(){
        $(this).find("a.tweet_action").click(function(ev) {
          window.open(this.href, "Retweet",
                      'menubar=0,resizable=0,width=550,height=420,top=200,left=400');
          ev.preventDefault();
        });
      });
    

#9 - Adding a message when no tweets matching 'somerandomstring' are found:

      jQuery(function($){
        $("#empty").tweet({
          avatar_size: 32,
          count: 4,
          query: rnd,
          loading_text: "searching twitter..."
        }).bind("empty", function() { $(this).append("No matching tweets found"); });
      });
    

#10 - use button to page forwards and backwards (note the HTML structure required please view the source):

      jQuery(function($){
        var options = {
          username: "seaofclouds",
          page: 1,
          avatar_size: 32,
          count: 4,
          fetch: 5,  1 + count
          loading_text: "loading ..."
        };        var widget = $("#paging .widget"),
          next = $("#paging .next"),
          prev = $("#paging .prev");        var enable = function(el, yes) {
          yes ? $(el).removeAttr('disabled') :
                $(el).attr('disabled', true);
        };        var stepClick = function(incr) {
          return function() {
            options.page = options.page + incr;
            enable(this, false);
            widget.tweet(options);
          };
        };        next.bind("checkstate", function() {
          enable(this, widget.find("li").length == options.count)
        }).click(stepClick(1));        prev.bind("checkstate", function() {
          enable(this, options.page > 1)
        }).click(stepClick(-1));        widget.tweet(options).bind("loaded", function() { next.add(prev).trigger("checkstate"); });
      });
    

#11 - display one tweet at a time like a ticker:

      jQuery(function($){
        $("#ticker").tweet({
          username: "seaofclouds",
          page: 1,
          avatar_size: 32,
          count: 20,
          loading_text: "loading ..."
        }).bind("loaded", function() {
          var ul = $(this).find(".tweet_list");
          var ticker = function() {
            setTimeout(function() {
              var top = ul.position().top;
              var h = ul.height();
              var incr = (h / ul.children().length);
              var newTop = top - incr;
              if (h + newTop <= 0) newTop = 0;
              ul.animate( {top: newTop}, 500 );
              ticker();
            }, 5000);
          };
          ticker();
        });
      });
    

Features

  • small size and fast download time
  • will not slow down or pause your page while tweets are loading
  • display up to 100 tweets, as permitted by the twitter search api
  • display tweets from a twitter search, or from your own feed
  • optional verb tense matching, for human readable tweets
  • optionally display your avatar
  • optionally display tweets from multiple accounts!
  • display tweets from a list, or display a user's favorites
  • optional reloading after a specified delay
  • automatic linking of @replies to users’ twitter page
  • automatic linking of URLs
  • uses http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API, so you can display any tweets you like
  • Display up to 100 tweets that have been posted within 7 days (limit set by http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API)
  • automatic linking of http://search.twitter.com/search?q=&amp;tag=hashtags">#hashtags, to a twitter search of all your tags
  • converts <3 to a css styleable (we ♥ hearts)
  • customize the layout for tweets within the widget
  • apply custom filters, e.g. to remove @replies
  • define a custom sort order for tweets
  • customize the style with your own stylesheet or with other jquery plugins
  • compatible with most jquery versions, from 1.2.6 to the latest 1.7
  • supports http://requirejs.org">RequireJS and other https://github.com/amdjs/amdjs-api/wiki/AMD">AMD-compatible javascript loaders
  • available on http://cdnjs.com">cdnjs

NOTE: Some users have reported that they http://help.twitter.com/forums/10713/entries/42646">do not show up in Twitter's search results.

Usage

1. http://jquery.com/">Get JQuery. In these examples, we use http://code.google.com/apis/ajaxlibs/">Google's AJAX Libraries API.

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.6.4/jquery.min.js&quot; 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'>
    jQuery(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"/>

Contribute

Bring your code slinging skills to https://github.com/seaofclouds/tweet/">Github and help us develop new features for tweet!

git clone git://github.com/seaofclouds/tweet.git https://github.com/seaofclouds/tweet">http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" />

Report bugs and request features in https://github.com/seaofclouds/tweet/issues">Github Issues

Licensed under the MIT

http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php

http://skins.ow2.org/skins/skinOW2/images/Featuredvideo.png
  • Frédéric Aatz, Microsoft
http://skins.ow2.org/skins/skinOW2/images/watchallvideos.png

 


This wiki is licensed under a Creative Commons 2.0 license
XWiki Enterprise 6.4.4 - Documentation
Powered by XWiki Hosted by Xsalto Free PageRank Checker Creative Commons 2.0 license Legal Notice