«– back to all projects

Obama for America's Facebook Network | BarackObama.com

The Tools

  • HTML
  • CSS
  • Javascript
  • ExpressionEngine
  • PHP
  • Facebook Open Graph API

The Details

This was my first experience writing something to be served exclusively inside Facebook. The top section and two columns at bottom were generated by creating a channel in ExpressionEngine for our social staff to manage. There, they could add, remove, or promote campaign Facebook pages. The map was an SVG with hover animations for each state, and a touch of Javascript to snag the “selected” state info via a JSON object. This was vital to keep the page from attempting to load 70+ iframes on every page load. The remaining section, the counter, was based on a PHP script that traversed a different JSON object with information about every single Obama for America Facebook page. It hit the Facebook Graph API to grab and calculate total likes across all our pages. This was run via CRON and the result was cached because of the high volume of requests. (The campaign had managed to unintentionally DDoS Facebook once, and we didn’t want them to revoke our API access.)