Overview
I implemented this facebook-hosted application using the facebook C# and JavaScript APIs.
Users access the application through the Glade facebook page. Once a user opens the app, the app asks the user permission to access their basic facebook profile. Users then select a theme based on two Glade winter scents. Once a theme is selected, the user is presented with image wells to load images from their facebook profile. When a user clicks an image well the first time, the application asks the user for permission to access their photos based on the 'ask permission when needed' paradigm. Users can then use interactive elements to crop and re-frame their photos. Once a user selects photos for all the image wells, they are presented with an option to tag each photo. The tag list is pre-populated wit tags from the original images, however users can also tag friends from a search box integrated into the tagging menu. Finally, the frontend code queries a backend service to composite the image and generate a preview. The preview is then shown to the user and the user is presented with a quick and easy way to set the image as their facebook cover photo.
The application's facebook permissions system is very robust. Users that revoke permission to the app or deny the app specific permissions along the way are greeted with pleasant instructions on how to continue and have the opportunity to re-attempt granting permission.
The ASP.NET MVC C# consumes the Facebook C# API. Using the same permissions granted to the user for the front-end, the backend has access to the user's facebook pictures. Based on a JSON payload from the front-end, the backend downloads the photos the user selected and composites them using the C# graphics API. This image is saved on disk and the resulting path is sent back to the client-side code.
Graphic design and art direction were driven mostly by an art team. However, there were interactive elements that were not part of the art development, which I was responsible for; this includes the cropping
Final deployment was nearly flawless and client and customer teams were all highly satisfied with the result.
Technical summary
- Took about a month during 2013
- Facebook platform
- Javascript
- HTML/CSS
- ASP.NET MVC C#
- Fully compatible with IE8, some graceful degradation
