Tech Twitterings via jQuery & Twitter
null min read

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      //webdevdotnet.blogspot.com
// @include        //search.twitter.com/*
// ==/UserScript==

//Code taken from //internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/
var GM_JQ = document.createElement('script');
GM_JQ.src = '//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');
}
  1. 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    var categoryKey = categoryKeys[i];
   console.log('<h3>' + categoryKey + '</h3><ul>');
   var category = categories[categoryKey];
   for (var j = 0; j       console.log('<li>' + category[j] + '</li>');
   }
   console.log('</ul>');
}
  1. Copy & Paste the contents from the console into Blogger
  2. 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">

</div>
</script>

Edit post on GitHub


VSTS 2010 Local Microsoft Event
New F# SyntaxHighlighter Brush