How to add Twitter support to UserVoice using Yahoo Pipes and FeedBurner

For our recent launch of World of VS, we used UserVoice to provide users with a way to suggest 'What should be the next super cool extension' (and win a full MSDN Universal subscription in the process!).

But UserVoice does not provide a way to automatically tweet new ideas so that your company/feedback followers can learn what’s new. They do provide a forum Atom feed though. So we’ll start there first.

How to get auto tweets for any feed using FeedBurner

FeedBurner is a very cool service now offered by Google. It allows you to centrally manage, customize and optimize how you publish the basic feed provided by your current blog engine/site/provider. All you need is a Gmail account and you’re ready to burn your feeds with extra whistles!

And FeedBurner has built-in support for tweeting whenever a new entry shows up in your feed. The documentation page goes to a lot of details on this feature, but here’s theu quick setup:

And that’s it. You now are tweeting your UserVoice entries

Customizing the feed with Yahoo Pipes

While tweeting the forum feed news may work for some, but it’s way too verbose as it also posts an update every time someone comments an idea! What we typically want is for NEW ideas only to show up, so that your followers know what they can potentially vote.

For this we’ll use this rarely but extremely cool free service by Yahoo. It essentially enables arbitrary web mashups without writing a single line of code. Let’s see what we mean by that :)

Let’s analyze the UserVoice feed first:

<entry>
  <title type="html">Integrated Time Tracker [updated]</title>
  ...
</entry>
<entry>
  <title type="html">Reference list [is now planned]</title>
  ...
</entry>
<entry>
  <title type="html">Github integration</title>
  ...
</entry>

Of those three entries, the only one which is new is the third. So we need to filter out the others somehow.

So, now over at Yahoo Pipes site, sign in with your Yahoo ID and click the big blue Create a pipe button.

We’ll first drop a Fetch Feed module from the Sources category into the diagram, and enter our UserVoice feed Url. Note the very useful Debugger area at the bottom, which shows you the temporary output of whichever module you have currently selected in the diagram:

Next we need to filter items, so we’ll drop a Filter from the Operators category and set it up with the regular expression \[.*\] which matches the items we’re not interested in:

You can see right-away in the Debugger pane the effect of our filter :).

Now that we got a feeling for how easy this has been so far, let’s go beyond this basic scenario. We want the tweet to look like: Victor Garcia Aprea suggested an idea to #wovs: Extension methods online repository.

The corresponding original UserVoice feed entry for that reads:

<entry>
  ...
  <title type="html">Extension methods online repository</title>
  <content type="html">&lt;p&gt;Victor Garcia Aprea suggested:&lt;br /&gt;Imagine you get IntelliSense ...</content>
</entry>

So essentially we want to take out the user name from the <content> element, and move it up to the title, which we’ll cook up with some other fixed (“ an idea to #wovs:”).

We first need to split the string up to the “:” after the user’s name in the content. We need to Loop over all items and Tokenize it with the “:” delimiter. The loop (from the Operators category) essentially applies the inner tokenizer module (from the String category) to each entry, and you get to decide where to put the results.

All dropdowns offer intellisense once you have connected the modules, so after we connect the filter with the Loop, we can pick the content we’re going to tokenize:

Note that we’re only keeping the first result, which will be in this case “&lt;p&gt;Victor Garcia Aprea suggested:”. Note that we’re keeping the result in a property of the item itself, which we can use next to remove the escaped <p> tag in front of the name. For that, we’ll loop again, and this time we’ll use a String Builder (from the Strings category again) to make up the final title:

Now we only need to remove the <p> and we’re done. As you guessed by now, we’ll loop one last time, and use String Replace to remove it:

We connected the module to the Pipe Output, and we’re done! We can now save the pipe and run it. You can see this one live:

Now we can copy the “Get as RSS” link, paste that in FeedBurner (you can just edit the feed details and change the Url to this one) and the customized auto-tweeting will start :).

If you are into making the web work for you (a.k.a. “mashups”), hopefully this will open up the door to many more ideas where you can apply Yahoo Pipes.

Enjoy!