Festive fun: Embedding and interacting with web2.0 in MS Outlook 2007

warning [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>

<script type="text/javascript">
// From http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
</body>
</html>

Enjoy – Seasons Greetings!