Boban Jovanoski

Introduction

So, You've decided to create your own auto-updating twitter widget using rails? :) I won't bla bla what and why, let me just show you how I've done it: I've used the twitter gem and I didn't use rails's periodic updater for the tweets update :)

Implementation

• Include the twitter gem in your Gemfile
• Include and install jquery-rails gem
• Add a loading gif image and your tweets container(the code for the views is haml).

= image_tag "loading.gif", :id => 'twitter_loading', :alt => "Loading", :style => "display: none"
#tweets_container

• Map a route to controller/action by your choice, in this case services/twitter and you simply get the tweets

 #inside routes.rb
 match 'services/twitter', :to => 'services#twitter', :as => 'twitter_service' 

 #inside services_controller.rb
 def twitter
   @tweets = Twitter.user_timeline(USERNAME).first(NUM_TWEETS)
    render :layout => false
  end

 #inside twitter.html.haml
 - @tweets.each do |tweet|
   %p
     = auto_link tweet.text
     %span.time= link_to time_ago_in_words(tweet.created_at + ' ago' , "http://twitter.com/#{USERNAME}/status/#{tweet.id}"

This was easy :) now all we need is to show and auto-update the widget. So in your application.js or a js file that is loaded in your page :)

var twitter = {
    container: $('#tweets_container'),
    loading_image: $('#twitter_loading'),
    update_interval: 420000, //7 minutes
    clearTimeout: function() {
        if (this.timer_id) {
            clearTimeout(this.timer_id)
        }
    },
    autoUpdate: function() {
        var self = this;
        self.clearTimeout();
        self.timer_id = setTimeout(function() {
            self.initialize();
        }, self.update_interval);
    },
    initialize: function() {
        var self = this;
        self.clearTimeout();
        if ($('#tweets_container').size() > 0) {
            $.ajax({
                type: 'post',
                url: "/services/twitter",
                data: {},
                dataType: 'html',
                ifModified: true,
                beforeSend: function() {
                    self.container.hide('slow');
                    self.loading_image.show('fast');
                },
                success: function(data, status) {
                    if (status != 'notmodified') {
                        self.container.fadeOut(1200, function() {
                            $(this).html(data);
                            $(this).fadeIn(1200);
                        });
                    }
                    self.loading_image.hide('fast');
                    self.autoUpdate();
                },
                error: function() {
                    self.loading_image.hide('fast');
                    self.autoUpdate();
                }
            });
        }
    }
};
twitter.initialize();

That's it, I hope this helps :) Your comments and suggestions are welcomed.