Presenting with the Twitter backchannel

I went to Bath for openMIC this week (part conference, part barcamp – a brilliant and informative day on innovation in mobile).

The first half was made up of traditional conference-style presentations, and during one of these presentations, I noticed tweets with the #openMIC hashtag become particularly active: feedback that the presenter was missing.

I wondered about ways that the presenter could have got that feedback before finishing his talk…

thinking about fun ways presenters can get realtime audience feedback via twitter. PowerPoint VB script to embed hashtag search in slides?

This isn’t a new idea: I’ve heard of large US tech conferences where the backchannel is displayed on a second screen or projector next to the presenter’s slides. But I rarely get the chance to present where there is the facility for projecting to two screens at once.

So I got thinking about how a compromise could work: embedding a live twitter search somewhere within a presentation.

I had a bit of free time this afternoon to play with the idea a little more. As is sadly often my way, my first few ideas were needlessly overcomplicated: using macros, VBScript or something like that to try and get data from the web and embed it within my slides.

Fiddly. And prone to a number of fundamental issues, such as trying to avoid reloading the twitter search every time you change slide.

But then I had a flash of what, for want of a better word, I shall call ‘genius’. ;-)

Instead of fighting to embed a website within a presentation, what about embedding a presentation within a webpage?

A little bit of playing around with code, and I managed to pull a quick proof-of-concept together.

How it works

It’s a webpage, to be presented from a browser displayed in full-screen. The webpage embeds a presentation on the left, and the realtime results of a twitter search in a column on the right.

You specify the query to search twitter for in the URL, so you can modify it without having to dig around in code. The search query is grabbed by some very neat (freely available) Javascript code that I nicked from monitter.com, which creates a constantly-updating twitter search.

The presentation is embedded in the webpage as a Flash object, using (the free) OpenOffice to export a presentation to Macromedia Flash.

These two bits are pulled together with a simple bit of HTML to create the presentation page.

Use it for yourself

I’ve zipped up the files needed to turn any presentation into a presentation with the twitter backchannel. Unzip all the files within to the same directory.

Export your slides to Macromedia Flash (swf) using OpenOffice and name the flash file “myslides.swf”. Save the file in the directory where you unzipped the other presentation files.

Open the runpresentation.html file in a web browser. Add your search query to the end of the URL.

For example, to search for tweets mentioning “dalelane”, use a URL like:
http://your-host-name/runpresentation?dalelane or
file:///C:/twitter/runpresentation.html?dalelane

For more detail, read the comments I’ve added to the top of the runpresentation.html HTML file.

See it in action

I’ve put an example up here.

I’m going to Barcamp Bournemouth tomorrow, so this is very good timing – I’ll hopefully get my first chance to try this out tomorrow.

Wish me luck. :-)

.

Update (30/10/2009): In hindsight, I massively overcomplicated this. For the last couple of presentations I’ve given using this approach, I exported the slides to a PDF and embedded Adobe Acrobat instead.

<body>
    <!-- the presentation -->
    <object style="width: 84%; float: left">
        <embed src="mqtt_for_mobile.pdf#toolbar=0&navpanes=0&scrollbar=0"
               bgcolor="#000000"
               width="100%"
               height="100%">
        </embed>
    </object>
    <!-- the twitter search -->
    <div style="width: 14%; height: 96%;"
         class="monitter"
         id="tweets"
         lang="en">
    </div>
</body>

It works just as well, and has the added benefit of letting you navigate forwards and backwards through the slides.

Why didn’t I think of that first time? :-)

Tags: , , , , , , ,

7 Responses to “Presenting with the Twitter backchannel”

  1. Drew Jones says:

    Dale, this is great!

    I’ve taken your twitterbackchannel.zip and followed your instructions and within 2 minutes I have my presentation running with the tweets in the right hand column.

    I think this will be really useful to add to my talk tomorrow at BarCamp Bournemouth. As I’m holding a group talk on freelancing, I’m sure this will add another dimension.

    Look forward to catching up tomorrow.

    Drew.

  2. Chris says:

    This is good stuff, but the example has some bugs (yeay for web development); on IE8 the twitter feed is off the bottom of the screen and in Opera the presentation is tiny!

    Other than that my concern would be how this integrates into existing presentation setups – remote ‘clickers’ and the like, not knowing enough about how they work, I’m curious as to whether this will work with them or not.

  3. dale says:

    Thanks for giving it a try.

    Drew – Sweet – thanks very much! Look forward to seeing how it works from an audience point of view.

    Chris – There are loads of problems with the implementation (eg a search string with any special URL characters like # will screw it up, some of the sizing is a little hard-coded etc.) so I wouldn’t describe it as any more than a quick (20 – 30 mins?) hack to demonstrate the idea. Gotta admit, though – I only tried it in Firefox.

    The clicking point is interesting – would be worth trying to script capturing clicks to control the presentation. Something that let you go back a slide would be useful, too!

  4. Shane Duffy says:

    I like the idea,

    Now what would happen if you were to turn the idea on its head and instead of embedding the presentation using flash in a webpage.

    But used the flash to get the twitter updates and embed this into a normal powerpoint presentation? If I have some time I might try hack this together im sure it would be very simple to implement.

  5. dale says:

    @Shane – Thanks for the comment. As I said in the post, I did initially consider putting the twitter search inside the slides… whether making it a part of the master slide, or manually copying it to each slide.

    The problem that I saw with this approach is that it means the twitter search would be reloaded every time you change slides. Which feels a little more clunky. The benefit of taking it outside the slide is that it can stay there throughout the presentation.

    That said, if you do give it a try, please do share a link to it – I’d love to see it.

  6. Kurt Woodham says:

    Dale,

    Really like this idea – in my presentations, though, I often have to back up to answer a question on a previous slide – Didn’t see a way to do back-up in Adobe flash 10 within Firefox. Any trick to that?

    BTW: Absolutely love your bLade wiki on my windows mobile phone – accessed through my Celio Redfly. Incredible.

    – Kurt

  7. dale says:

    @Kurt – Many thanks. I’ve had the same problem with it… not sure what the easiest solution will be. Might have to look into how you can control the presentation from a script.