Archive for the 'how to' Category

How to offer simple RSS badges for your users

The key breakthrough that made it possible for YouTube to ride on MySpace’s heavy traffic coattails into its current state as a mass media service is the concept of widgets, often called badges in related contexts. Although offering widgets or badges may seem like a far off idea for most web site owners to internalize yet, there are a few tools that can make this a snap to offer your users if you’re ready for it.

(I’ll assume here that you already know what widgets and badges are. If you don’t, I’ve been tagging articles addressing the topic of widgets that may be helpful.)

In the case of YouTube, they allowed users to post the YouTube video player to any web page with a simple copy and paste operation. Since most web site owners are dealing mostly with text, the equvilent would likely be a feed of RSS content that people could display on a web page. It would clearly be best to allow your users to display a feed of the things they are contributing to your web site, but if you don’t have user-contributed data to give back to your users it’s still worth trying to offer this functionality using your own content to see what happens.

Here’s a really cool tool I recently found that made it possible for me to offer badges to users on the FlipBait web site. It’s an open source service called Feed2JS, and it appears to be developed by Alan Levine. It requires another open source service called MagpieRSS to operate, but MagpieRSS takes maybe 10 minutes at most to download and install.

After you download and install these scripts you can point to a feed you want to display nicely and get the code back that you can include on any web site to show that feed.

In other words, you now have a badge platform to offer your uses.

I tried this out on the FlipBait web site, and it worked out of the gate. In fact, you can now see on my blog sidebar here the posts I’ve submitted to FlipBait. Each user on the site has access to his badge via his profile page. Now everyone can take their contributions with them wherever their “Internet startup news” identity gets expressed.

It couldn’t have been much easier to setup either. I’m hoping, actually, that the Pligg team incorporates something like this into the source code.

There are also some nice formatting capabilites in Feed2JS that would make people happy, I’m sure. But that adds some complexity I’ll address at a later date. The important thing is to push out a feature like this, watch for uptake, and then evolve it.

I’d be interested to know if other people have tried any other similar solutions or used tools from some of the recent startups in this space and what their experiences have been. Please comment or blog about it if you’ve found another way to accomplish this without having to write the code yourself.

How we made the BBAuth screencast

The news that seemed to get overlooked by the amazingness that became Hack Day was the release of a login API, BBAuth, or Browser-based Authentication. This new service allows any web site or web application to identify a user who has a Yahoo! ID with the user’s consent. Dan Theurer explains it on his blog:

…instead of creating your own sign-up flow, which requires users to pick yet another username and password, you can let them sign in with their existing Yahoo! account.

My mind keeps spinning thinking of the implications of this…more on that in a later post.

It was immediately obvious to me when I heard about it that this concept was going to be hard to fully grok without some visuals to explain it. So I sat with Dan yesterday to create a video walk-through that might help people digest it (myself included). Here is a 5 minute screencast talking about what it is and an example of it in action (also available on the YDN blog and on Yahoo! Video):

The screencast itself took only a few minutes in total to produce. Here’s how it went down:

  1. I closed all my applications on my laptop other than my browser (or so I thought) and launched Camtasia
  2. We spent 5 minutes discussing what we were going to say.
  3. I clicked ‘record’.
  4. We talked for 5 minutes.
  5. I clicked ’stop’.
  6. I selected the output settings and it then produced a video file for me.
  7. DONE. That part took about 20 minutes.

The next part, posting to a video sharing site, got a little sticky, but here’s what I learned:

  • I tried Yahoo! Video, JumpCut and YouTube.
  • Outputting my screencast in 320×240 resolution saves a lot of time for the video sharing sites
  • Yahoo! Video liked the MPEG4 format most. YouTube claims the same, though it wasn’t obvious after trying a few formats which one it liked most.
  • JumpCut was a snap to use, but the output quality was a little fuzzier
  • Titles…I forgot the damn titles, and it just looked too weak without some kind of intro and outro. Camtasia gives you a couple of very simple options. I added an intro title in less than 5 minutes.
  • Logo! Ugh. After encoding it about 8 times to get the right format I realized the logo really needed to be in there:
    1. I took a quick Snag-It screenshot of the YDN web site, played with it a bit and made a simple title screen.
    2. Saved it as a jpeg
    3. Imported into my Camtasia screencast
    4. Inserted the title image in the beginning and a variation of the same at the end
    5. Dropped a transition between the title frames and the video
    6. Titles DONE. That took less than 30 minutes…could have taken 2 seconds if I was prepared.
  • Wait…the screen wasn’t big enough. You couldn’t see the graphic that Dan points to in his explanation because it’s too small. Not a problem. Camtasia includes a simple zoom tool:
    1. I played the screencast again and found where I needed to zoom.
    2. Inserted opening zoom marker
    3. Selected zoom size. Clicked done.
    4. Found the end of the segment where I wanted to zoom out.
    5. Inserted another zoom marker.
    6. Opened zoom window back up to full size.
    7. DONE. Maybe 15 minutes to do that.
  • Output one last time
  • Upload.
  • DONE

Then all I had to do was write a blog post and embed the video in that post. That took about 10 minutes.

All in all, I probably spent close to 2 hours beginning to end producing this screencast, but most of that was learning a few tricks. Next time I do this, I bet I can complete the whole thing from launching Camtasia to posting on a blog in 45 minutes, possibly less.