MASHe

A couple of weeks ago I was interested to read Joss Winn’s blog post on  Creating a PDF or eBook from an RSS feed in which he highlights using the FeedBooks service. This was ideal timing as we are always looking for new ways to make RSC NewsFeed readable in as many formats as possible.

The post has generated a number of comments, in particular, James Kwak at baselinescenario mentioned that a limitation of FeedBooks was that it didn’t include the post author or date in the automatically generated eBook.

This is very easy to do using Yahoo Pipes. Here is my ‘feedbooks pipe’. You can either run this pipe entering the url of the RSS feed of your blog. This will let you get the RSS feed required for FeedBooks (step 4 in Joss’s instructions). Alternatively you can just enter http://pipes.yahoo.com/mashe/feedbooks?_render=rss&url={enter your blog rss feed url here}. Feel free to clone this pipe if you would like to experiment with other manipulations. I’ve already created this extended version for WordPress users to only include last months posts. 

[All this pipe is doing is taking the feed url, copying the pubDate (item publish date), then using Regex to edit some of the post items. The first regex replaces the long date format (e.g. Fri, 15 Jan 2010 10:03:54 +0000) by extracting the pattern ‘digits character digits’. The next 2 entries modify the post description by putting ‘the author {dc:creator} | the date {date} plus break return’ before the existing content]

Thought I’d share some solutions I’ve found for problems I’ve encountered this week.

Problem: How to export a table (*.xls or *.csv) of twitter followers?
Solution: I first tried http://twitterexport.com/ which was good because it didn’t ask for twitter account login details, but the results are limited to 100 entries. I then tried http://tweetake.com/ which did the job (but does require twitter username and password)

Problem: Adding anchors to WordPress blog?
Solution: This problem was asked by our e-learning accessibility expert, Craig Mill. He wanted to make some of his longer blog posts more accessible by having a table of contents at the top. The solution was very straight forward as MindWireMedia have created the Auto Anchor List plugin which does exactly what we were looking for. The plugin scans though posts and pages looking for headings, automatically creating a navigable contents list at the beginning of the post. To see it in action check out Craig’s e-Inclusion Blog

Problem: How to reformat long urls in twitter badges? We had a problem with urls in the @rsc_ne_scotland twitter badge which we use for News announcements on our site. 
Solution: Using help from this how-to on Taco Quest and code from sevenofnine on whirlpool.net.au I came up with the code below. If you would like to use it just grab this JavaScript file to replace ‘http://twitter.com/javascripts/ blogger.js’ (this method of creating twitter badges has changed but here is an explanation for adding an old widget):

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
    var lm = 28;
    var strD = url.split("");
    var strB = "";
    var strT = "";
    var breakChar = "...";
    for(var i=0; i < strD.length; i++){
        strB += strD[i] ;
        if(strB.length >= lm){
            strT += strB + breakChar;
            strB = "";
        }
    }
    if(strD.length < lm){
        strT = url;
    }
      return '<a href="'+url+'">'+strT+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span><br/><a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

[Just to warn you this post is more technical than my usual offerings and is perhaps not that practical either. Hopefully some of you will still find this useful. I’m shoehorning this post in under the ‘festive clause’ ;)]

If you are running Microsoft Vista with Outlook 2007 you may have noticed that you can preview certain email attachments in Outlook (this isn’t native functionality for XP users. A workaround is highlighted in the ‘how-to’ below). Last week I was trying to using this functionality to view an embedded Google wave. Unfortunately, despite installing Chrome Frames, it didn’t work (I think because either Microsoft wasn’t caching the JavaScript locally for wave or security prevents JavaScript writing an iframe).

While embedding Wave doesn’t work, interacting with a lot of other social tools (Etherpad, Mindmeister, Google Docs, Facebook, Flickr, Ning … ) does! Don’t believe me watch this:

How to do it

If you are using XP and Outlook 2007 you’ll first need to install some custom preview handlers. These basically allow you to preview email attachments in Outlook’s reading pane. Fortunately Gil Azar has already made a package of preview handlers. Gil’s instructions and download are here.

All we are doing is:

1. creating a local web page which embeds your chosen site
2. creating a new email
3. attaching the file
4. saving the message as a draft
5. moving the draft to a folder (in my case I created one called ‘MyStuff’)

Then when you want to access your chose site just click on the attachment to view it. This video demonstrates the process:

Creating the web page attachment

For the example in the video above I used iframes. These basically allow you to place another website within a webpage. The code I’m using is below. For the different sites you want to include you just need to change the iframe src, which in the case below is https://www.mindmeister.com/. Some sites provide specific instructions on how to embed elements (etherpad for example). If you are wondering what the rest of the code does it just resizes the height of the frame to fill the window. Here is a compressed folder (*.zip) of some of the pages I created for the video.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
</head>
<body>
<iframe id="frame" src="https://www.mindmeister.com/" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>

Enjoy – Seasons Greetings!

Using the festive period to stray slightly away from my core remit I thought I would document a little mashup which allows you to automatically tweet items you share in Google Reader.

Background

I’m a big fan of Google Reader and its the main way I consume RSS feeds (unsure about RSS? Here it is explained in plain English). Already I use the  Shared Items Post Plugin to automatically post a digest of my shared Reader items. The idea is I’m acting as an intelligent filter, sifting through almost 150 subscriptions to pull out items which might be of most relevance to staff at our supported institutions. The nice thing about Google Reader is I can share items making a personal note or comment. This has parallels to micro-blogging sites like twitter. 

The emergence of twitter, and similar status update sites, is changing the way many people tap into information streams and for me it makes sense to make sure information I produce or find useful is disseminated through as many channels as possible.

How to do it

Go to your Google Reader Shared page (if you haven’t set-up a public page or can’t remember where it is login to Reader, click on ‘Your stuff’, then ‘share settings’, shown below).

On the page that opens there should be a link to ‘Preview your shared items page in a new window’, on this page you need to copy your ‘Atom feed’ link.

At this point you can go to straight to an automatic tweeting service called twitterfeed and paste this link in as a new feed (Twitterfeed is a free service which allows you to submit a RSS feed. New feed items are then ‘tweeted’ on your behalf). Unfortunately doing it this way means that any notes you’ve written about a post are lost.

Not satisfied with this I decided to create a Yahoo Pipe which extracts my notes, if any, and tweets this instead. If you’ve never tried Yahoo Pipes its a great free service to take existing RSS feeds, do some tweaking and output a new custom RSS feed. I’ll explain how the pipe works at the end of this post. For now:

1. open this ‘Tweet Google Reader Shared’ yahoo pipe
2. paste your ‘Atom feed’ link from Google Reader and click ‘Run Pipe’.
3. copy the ‘Get as RSS’ link into twitterfeed.com.

Now when you share an item in Google Reader with a note, the note will be tweeted via twitterfeed.com (if you share an item without a note the existing item title will be used).

To see an example here is a tweet posted via twitterfeed which was pulled from the Google Reader Shared page shown below:

How the pipe works

Below is a screenshot of the pipe I created (click here to see it in Yahoo Pipes). The pseudo code is:

1. Fetch Feed from Google Reader Shared page
2. If feed contains annotation copy as title else do nothing
3. Sort by date (new first)
4. Remove <a href> tags from title 

Enjoy (and Seasons Greetings)!