April 3, 2012

fixing timestamps on Google Blogger's threaded comments

as you all probably know, time on comments on (google's) Blogger is broken, because it only shows Pacific timezone. You can't change it from settings, etc. etc... Fear not, for I have developed a cure!

You need to place a piece of javascript into the template. Here's how you do it:

Step 1: click on Design, then Edit HTML.
Step 2: Now, blogger will nag you about what you're doing and that you can break it... yeah, like we don't know. Proceed!!
Step 3: check "Expand Widget Templates"

Step 4: This is the tricky part.
First, using your browser's search function, search for "render = function".
You will find something like this:
      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

You need to change this part, so that it looks like this:
      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);

/* THIS IS THE NEW PIECE */
          load = function() {
             load.getScript("https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js");
          }

          // dynamically load any javascript file.
          load.getScript = function(filename) {
             var script = document.createElement('script')
             script.setAttribute("type","text/javascript")
             script.setAttribute("onreadystatechange", "DOMLoaded()")
             script.setAttribute("onload", "DOMLoaded()")
             script.setAttribute("src", filename)
             if (typeof script!="undefined") document.getElementsByTagName("head")[0].appendChild(script)
          }

          load();
        }
      };

(script shamelessly stolen from here)

Now, scroll a bit more down, until you see:
    })();

// ]]>
  
between the "})();" and "// ]]>", we place the code that actually does something - fixes the dates and times!
    })();

function DOMLoaded(){
     $('.datetime').each(function() { var date = new Date(this.children[0].innerHTML + " PDT"); this.children[0].innerHTML=date.toLocaleString(); } );
};
// ]]>
  

Save, and voila! The times you see are now in your timezone.

What actually happened here is that I needed to inject jQuery plugin into the page, so that I could easily select the relevant elements. And the "render = function" seemed a good place, because it's part of some other javascript weirdnesses that make the whole threaded comment nonsense possible. The "DOMLoaded" then does all the work - parses the date as if it were in Pacific Daylight, which it happens to be, and converts it to your local time. Given more time, will and effort, you could customize the format, or use the load.getScript to pull in something like this and do magic with the dates. Or something completely different - now you have the full might of jQuery at your disposal, after all.