Before I get started, let me explain that I'm just one guy. I'm not a professional web developer or programmer, and I don't have a team of developers working under me. It's just me. I decided I wanted to build a Facebook application based entirely on Drupal, and I feel pretty good about how it turned out. I don't expect this case study to be featured on Drupal.org's front page, but nevertheless I hope it's is an inspiration to others who don't have the resources of full development teams. The "little guy" can do it, too.

Background

I started a Facebook fan page on a whim, and after a few months it had gained nearly 100k fans, purely organically. I realized that I had an opportunity that doesn't come along every day: to reach 100k people simply by posting a status update. I set out to capitalize on that opportunity by building a photo-rating Facebook application in the same vein as HotorNot and other sites of that nature, which I would then promote on the aforementioned fan page. I surveyed the competition in the FB App Directory and found it lacking. I knew I could do better.

Over the course of building this app, Facebook revoked my publishing rights on the fan page with 100k users, effectively ending my ability to market the app, which was the whole reason I started building it in the first place! Undeterred, I pressed on, and Rate My Eyes was born. Even without the ability to promote it as I had planned, we've reached 1868 Monthly Active Users in our first month - not too bad in my book.

http://apps.facebook.com/ratemyeyez

Features

Some of the features I'm particularly pleased to provide our users:

  • The ability to upload and crop photos (for rating by other users)
  • Automatic/instant redirection to the next random photo after voting
  • Anonymous users (those who haven't authorized the app) can view a page or two, but are soon asked to authorize the app
  • The "Previous Photo" block on the left side (authorized users only) showing the last-viewed photo by the current user, along with Official Rating and Your Rating. This was particularly difficult to implement, as it had to show the last photo by the current user only, not the last photo viewed by anyone.
  • Facebook Like button and Comments on each node
  • Leaderboards for both Women and Men (using Views)
  • Photos Uploaded block on user profile pages (also using Views)

Modules Used

  • CCK, FileField, ImageField, ImageField Crop, and ImageCache - for photo uploading, cropping, and thumbnail generation
  • PHP Filter (optional in Core) - required for block visibility and other conditional statements and tweaks
  • Drupal for Facebook - Quite honestly none of this would have been possible without Dave Cohen's awesome DFF module. My sincerest thanks go out to Dave, and if you haven't already (seriously?) please check this module out for best-of-breed CMS-Facebook integration. Does Joomla or any other Drupal competitor have anything like this?
  • Flag - required for "Previous Photo" block
  • Automatic Nodetitles - to allow hiding of each node's titles, for cleaner presentation
  • Content Refresh - Allows refreshing of page caches when content has changed
  • OpenX - for adserving
  • Pathauto - of course
  • Stumble - underappreciated module that facilitates the redirection to a random node after voting
  • Rules - various actions
  • Views - for multiple blocks throughout the site, including Leaderboards, Photos Uploaded, Previous Photo, etc.
  • Views Custom Field - used for "Rank" field in Leaderboards
  • Fivestar - for voting on photos

Facebook Integration

As stated above, this application relies heavily on the DFF module for it's integration with Facebook. I also added Open Graph meta tags on each page so that the Like button would post the desired image and description on the user's FB profile page when they click it.

Initially I had planned to use Drupal's commenting system, but then discovered the new <fb:comments> social plugin provided by Facebook, and decided to go with that due to the built-in notifications and overall integration with FB as a whole.

Final Thoughts

This application is proof that a fully-functional Facebook application can be built using only Drupal, and perhaps more importantly, it can be done by one person. Please check it out if you get a chance. Thanks for reading.

http://apps.facebook.com/ratemyeyez

Comments

WildBill’s picture

We are up over 2600 MAU, so something's working here!

davidfisherman’s picture

How did you get the redirect working after a user votes. I have tried rules/triggered rules to no avail.

Thanks,
-David

WildBill’s picture

You're correct, the rules/triggers approach won't work. Something to do with order in which the actions are executed, I believe. Or perhaps it was the ajax being used by Fivestar, I don't recall.

Anyhow, I found the code at http://drupal.org/node/252859#comment-827018, and modified it as follows:

<script type="text/javascript">
function fivestarResult(voteResult) {
  window.parent.location = 'http://apps.facebook.com/YOURAPP/stumble?nid=<?php print $node->nid ?>&type=<?php print $node->type ?>';
}
</script>

I then pasted this into the page.tpl.php of my theme, right after the <?php print $scripts; ?> in the header.

Hope this helps!

davidfisherman’s picture

Works like a charm. Thanks Bill.

ChristopheDG’s picture

Hi! First of all, really interesting post!

Do you have any idea what an alternative could be for Stumble in D7?

My goal isn't to create a facebook app, but a picture rating mechanism using fivestar on my newly created website. And the functionality Stumble provides seems kind of essential to me!

WildBill’s picture

I don't think there is an alternative, but it appears that the Coder module (http://drupal.org/project/coder) is the successor to the Deadwood project, which might be useful in porting to D7. Stumble isn't a terribly complex module. Give it a try, I guess.

ChristopheDG’s picture

Thanks for the response.
I'm not sure if I'm capable enough, but I'll take a look at the Coder module.

Silenkiller’s picture

So, its funny that I ran into this article, as I'm attempting to do the same exact thing (create a facebook app) currently. My first is that I am very new to drupal and still feeling it out. Aside from that, I have to ask, how did u design the actual look/page? Was that coded manually by you? Please understand I'm somewhat ofa novice when it comes to programming, which is why I've gravitated to drupal to attempt in fleshing out a facebook app.

WildBill’s picture

The look was not coded manually. I used the Sky theme, and modified it quite a bit, especially the colors. I also used Views extensively, and created blocks to suit the layout I wanted.

allandk’s picture

very nice :-)