Monday, June 30, 2008

How do you distribute a ton of dynamic iTunes online coupon codes?

That is the question we were recently asked by our good friend Heidi Roizen.

BaconMarathon Labs took a step back and thought about how we are tackling scalability and delivery of dynamic content with top3Clicks and applied these concepts to help Heidi distribute a large number of redeemable iTunes coupons.

To see it in action, go to: http://www.skinnysongs.com/greathealth/
and take a look at the upper right corner of the page for the "Get a free download of 'Skinny Jeans' on iTunes".

The Bacon portion of the BaconMarathon Labs testimonial:

"While working on getting this feature live, I downloaded 'Skinny Jeans', put it on my iPod, went to the Potrero Hill 24hr fitness and proceeded to listen to the song while getting my butt kicked during my daily painful 30 minutes of running in place...


...and the 30 minutes flew by."


Stay tuned for some hot new top3Clicks features coming down the pike!

Friday, June 13, 2008

Dialogs and Asychronous Calls in Facebook

One feature of BaconMarathon's Top3Clicks Facebook application allows users to construct free-form item searches. The search queries are augmented and are used as we attempt to find items that are relevant to the user. To make this work, lots of things are going on in the back-end. The UI output is a list of items displayed in the rotator.

Like any application, we need to make this process as fast as possible, while providing the user visual cues to let them know the application is working quickly to provide a result. One of the strongest pieces of feedback we have had is in this area - and something we've tried to tackle in several different ways.

Our design goals were as follows:

  • call the back-end asynchronously
  • provide cues to the user via a UI dialog
  • tear-down (hide) the dialog when the back-end has completed its' tasks and refresh the UI with the latest information
Yesterday, we rolled out our latest iteration (shown below), which utilizes FBJS and Ajax.

Facebook dialog with Ajax post

Using this post as a basis, we made a number of tweaks, most notably the ondone function of the asynchronous call (via ajax.post) handles the form submission and actual tear-down of the dialog. Implementing it was non-trivial as the FBML Test Console didn't seem to like any ajax.post calls we made. Unfortunately, the onerror function does not provide any information about the cause of failure. Firebug was a large help -- make sure to use it if you are debugging FBJS.

Our current implementation looks something like this:


FBJS
function showItemDialog() {
var title = 'Add Item'
var ok = 'Cancel'
//create dialog
var dialog = new Dialog().showMessage(title,add_dialog_fbml,ok);
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.requireLogin = true;
//ondone function, called when post returns
ajax.ondone = function(data) {
frm = document.getElementById(searchForm);
if (frm) { frm.submit(); }
dialog.hide();
};

//onconfirm actually does nothing
dialog.onconfirm = function() { };
//grab input value and use in ajax.post call
var item = document.getElementById('item').getValue();
var params={'item':item};
ajax.post("http://www.yourdomain.com/index.php",params);
}
FBML
<form method="get" action=http://apps.facebook.com/yourappname/search.php name="search" id="searchForm">
<input type=text name=item id=item>
<a href="http://apps.facebook.com/yourappname/#" onclick="showItemDialog(); return false;">
<img src="http://www.yourdomain.com/submit.gif" border="0"></a>
</form>
<fb:js_string var="add_dialog_fbml">
<div id="add_dialog">
<div class="dialog_loading">
<img src="http://www.yourdomain.com/loader.gif"/> Retrieving item info ...
</div>
</div>
</fb:js_string>
Try it out and let us know what you think!

Thursday, June 12, 2008

3 Good Books for Facebook Developers

If you are building an app for Facebook, good information can be hard to find. The Developer Docs do a decent job at getting you up to speed, but don't dive too deep.
A few of my favorite books at the moment are:

1. Facebook Application Development - most heavily used book in my collection. Solid examples, minimal errata.



2. Facebook Applications - Good sample app in the last third of the book that goes beyond simple implementation.




3. Facebook API Developers Guide - Great kick-starter, super quick read. Doesn't dive deep, but lays it out in a readily consumable fashion.


One overall issue - I haven't found a book that uses anything other than PHP. As we're using Java for our BaconMarathon apps, we've had to do a bit of "translation", but it hasn't slowed things down much.

Optimizing -- On our minds all the time!

One of the things we are consistently hearing from the early feedback is when adding the app for the first time, "there are 'no items' appearing right away... and if I come back in a bit then I see many products (from my profile)"

Well to be honest... the app was taking significant time to grab suggestion items from Amazon. Presenting, depending on the items searched, a really bad first time experience.
So after much thought, perspiration and of course genius intellect, we just went live with an 'under the covers' optimization that speeds up product adds for new users of top3Clicks by 75%!!!

Also note, we added some feedback (screenshot below) when we're taking some time to load items into top3Clicks. It feels a ton better...


As always, thanks again for all the wonderful feedback. If you find top3Clicks to be useful, please pass it along to your friends. -- the BaconMarathon team

Sunday, June 1, 2008

Dave's Post about the genesis of the top3Clicks project...

Dave took a few minutes from his crazy schedule to write a post on why we are tackling what we're calling 'social commerce'.

Click on Top3Clicks or Why Dive Into Social Commerce? to go to Dave's blog.