Tech Twitterings via jQuery & Twitter

Several weeks ago, I decided to start a weekly blog entry compiling a list of my technical tweets from Twitter. After the second week, I noticed that it was taking me much too long to compile the list, so I decided to create a tool to make it easier.

My current solution involves several Firefox add-ons, jQuery, and Twitter. Eventually, it would probably be much easier if I used the Twitter APIs directly, but for now I have found this solution to be a fun learning exercise :)

Steps to Create the Tech Twitterings Entry

1. Search for my technical (#tech) tweets from Twitter
2. Use the Firefox AutoPager add-on to automatically load the next several pages to capture all the tweets from the last week.
3. Use the Firefox Greasemonkey add-on and run the Load jQuery Library script to load the jQuery library onto the Twitter search page

Load jQuery Library

// ==UserScript==
// @name           Load jQuery Library
// @namespace      http://webdevdotnet.blogspot.com
// @include        http://search.twitter.com/*
// ==/UserScript==

//Code taken from http://internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

function GM_wait() {
   if (typeof unsafeWindow.jQuery == 'undefined') { 
      window.setTimeout(GM_wait,100); 
   } else { 
      $ = unsafeWindow.jQuery; letsJQuery(); 
   }
}
GM_wait();
    
function letsJQuery() {
   unsafeWindow.console.log('The jQuery Library has been loaded'); 
} 

4. Use the Firefox Firebug add-on and use it's console (F12) to run the jQuery Twitter Script

jQuery Twitter Script

$('li.result .msg .msgtxt .expand').remove();
var categories = new Array();
var categoryKeys = new Array();
$('li.result .msg .msgtxt').each(function(i,tweet) {
   var tweetText = $(tweet).text();
   var regularExpression = new RegExp('.*#tech.*(#\\w+).*', 'gi');
   var matches = regularExpression.exec(tweetText);
   if (matches != null) {
      var match = matches[1];
      if (categories[match] == null ) {
         categories[match] = new Array();
         categoryKeys.push(match);
      }
      categories[match].push(tweetText);
   }
});
for (var i = 0; i < categoryKeys.length; ++i) {
   var categoryKey = categoryKeys[i];
   console.log('<h3>' + categoryKey + '</h3><ul>');
   var category = categories[categoryKey];
   for (var j = 0; j < category.length; ++j) {
      console.log('<li>' + category[j] + '</li>');
   }
   console.log('</ul>');
}

5. Copy & Paste the contents from the console into Blogger
6. Surround the auto-generated HTML content in a div and prepend the JavaScript to convert Text to Hyperlinks.

Text to Hyperlink JavaScript

<script type='text/javascript'>  
$(document).ready(function() {
   $('#tt4').html(replaceUrlWithHtmlLinks($('#tt4').html()));
});

function replaceUrlWithHtmlLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}
<div id="tt4">
<!-- Insert Autogenerated jQuery Twitter HTML here... -->
</div>
</script>