Published on by Devin Reams
Crowd Favorite worked closely with the clever folks at Crispin Porter + Bogusky to implement the new TDI Clean Diesel site. While the content of the site is powered by WordPress, the most interesting aspect is the use of BuddyPress to power the TankWars. Each driver’s profile contains their best milage score and rankings. Users authenticate using Facebook Connect and can then push and pull photos from Facebook albums, vote on profiles, and leave comments on entries.
Facebook Connect for authentication
Facebook Connect is used exclusively for authentication. Since the platform allows for simple one-click sign up and login it made perfect sense. We had to make sure that every function on the site, from leaving a comment to posting a TankWars entry, required a Facebook account. The site also allows for posting events and photos back to the user’s Facebook wall every time they leave a comment or post a new leaderboard entry.
Hypermiler leaderboard encourages healthy competition
One of the biggest draws to the site is the TankWars competition where hypermilers with TDI vehicles can record their best mileage and submit evidence. Each user has their own BuddyPress profile which allows them to create multiple entries. The most recent entry is submitted to appear on the leaderboard. Photographic evidence is required and is either uploaded directly to Facebook or selected from an existing Facebook photo.
BuddyPress, nascent social platform
We started working on this project before BuddyPress had even made it to a ‘release candidate’. Needless to say, we were driving down a bumpy road paved with some ajor architectural changes. Additionally, there was no concept of shared assets between WordPress and BuddyPress. Thus, we created a plugin that could be shared between the WordPress theme and the BuddyPress theme for common, reusable code (the header and sidebar widgets, for example).
Non-traditional marketing
This is not your typical car manufacturer site. With everything from videos, to TDI Cup racing stories, to hundreds of comments from users. For the blog, we had to allow for rich media including images associated with each entry and embedded video. For these, we used plugins to both create custom-sized ‘featured image’ thumbnails and easily insert YouTube video embed code.
Lapping and mapping the competition
To enhance the leaderboard listing, we also used the Google Map API to plot the top mileage submissions against the drivers’ zip code. We created custom markers to distinguish between the Guinness World Record Holder, first place holder, and the other participants.
Keeping up with the Joneses
Nothing is more important to an site running on open source products than regular testing and application of patches and updates. WordPress has a fairly regular release schedule which allowed us to easily schedule major updates (new features, enhancements) and still react to the minor (security and major bug fixes). We always test upgrades in a non-production environment before pushing the changes live.
Design and some development (Savings Calculator, Diesel Tracker) by Crispin Porter + Bogusky.
Visit the TankWars leaderboard at vw.com
