Constant Contact Labs Developer Blog

  • The Facebook Platform Posted Monday, December 21, 2009 Huan Lai 4 Comments

    With a Constant Contact Facebook app in the final sprint towards shipping, I’ll take a few moments to reflect upon the experience that was developing for the Facebook Platform and the various decisions I made along the way. In the same style as the iPhone app, I served as the primary developer, with Jim serving as my primary developer and project manager. Being a much more “open” platform than the iPhone, there was a larger selection of choices we could have made for the application.

    Branded under the Labs, Join My Mailing List is a simple app that you can add to your Facebook profile or fan page. The application more or less exists purely as a tab, allowing the site owner’s vistors to opt into his/her mailing list. The application requires that the site owner be a Constant Contact customer and configure the application with those credentials. After which, the site owner can configure the default list to which visitors will automatically be added to and the mailing lists that he/she wants to be publicly visible for vistors to additionally opt into. Besides selecting which mailing lists he/she wants to join, the vistor also has the option of inputing additional contact information.


    When I was first assigned to this project, I had no idea what I was jumping into, being barely a Facebook user, not to mention developer. Facebook has essentially two options for writing applications, FBML or IFrame. FBML allows you to write your application so that it will be fetched by Facebook and translated into their brew of HTML and JavaScript and embedded within the page itself. The IFrame approach essentially creates an IFrame on the Facebook page for your application to be displayed, with a few hooks via the Facebook API. Since one of the goals of this project was to further understand the Facebook platform and develop an application that felt natively Facebook, I decided to use the FBML approach.


    FBML:

    IFrame:


    Regardless of which approach you took, you had full control over how you wanted to develop the application on your server. I had originally started with the standard LAMP stack, but eventually decided to use Python+Django instead (a blog post on my feelings on Django coming soon…). I decided to host the application on an Amazon EC2 instance for several reasons: a promise of reliability, easy scalability in case the application gets more popular than expected, I’ve done several projects before on EC2 and haven’t been disappointed.


    Development using FBML has been…quirky. Because while you develop on your own server, the actual rendering is handled by Facebook, which fetches your HTML and JavaScript and translates it into its own special brew of FBML and FBJS, not everything behaves as expected. One of the first things that you’ll notice is that directly referring to DOM elements by id in your JS doesn’t work. This is because in process of translating your HTML to FBML, facebook adds a cute little prefix to all of your ids, which I assume is to prevent your app’s elements and styles from clashing with Facebook’s. To Facebook’s credit, most of the quirks are just minor annoyances and not show stoppers, but it seems documentation for these subtle differences between the standard and Facebook’s homebrew is either lacking or randomly scattered throughout the developers.facebook.com wiki. While this process does get easier over time, the time devotion requirement for learning the quirks of the platform are quite high, with quite a few “wtf-why-are-you-doing-that” moments along the way.


    Looking forward, if we ever decide to do another Facebook app, or expand upon this one, I feel that we will be able to come up with a much improved architecture, now that we have a better understanding of the platform. But despite this, I still feel Facebook will not be a fun platform to develop any sort of serious enterprise application on. The platform is still young, constantly going through changes. For example, it is expected that all application integrations into profiles will be deprecated except application tabs (it’s a good thing that is what we decided to use). In addition to this, the tabs will be resized, from 760px wide to 520px wide, requiring a redesign on our part. It’s things like this that discourages me from doing any sort of large-scale serious application.

     
    The opinions expressed here represent those of the author and not those of Constant Contact, Inc. Read Blog Terms
    Next Post Previous Post
     

Comments (4) +comment on this post
 

  • Enrique Arroyo | 9:28 AM March 10, 2010

    The “JMML” app for Facebook looks great, but I wonder if it’s possible for a FB Page owner to customize the wording of the messages our Fans view on their screens and specifically to translate them into Spanish? That would be a great feature to allow non-English speakers to use the app confidently.

  • Jim Garretson | 9:47 AM March 10, 2010

    Hi Enrique, The ability to customize the text in the Facebook app isn’t currently supported, but you’ve definitely hit on a useful reason for it to be! We’ll look into this as we plan for the next version. Thanks for the comment!

  • Glenn | 10:49 AM December 28, 2010

    I don’t want a whole tab for a form. I want to put a form on a customized landing page.

  • Gloria Maragh-Davis | 11:50 AM September 14, 2011

    Burned Out…Bummed Out…Bottomed Out? You’re not alone…Join our team of entrepreneurs and get back on track!

Add your comment below

Remember me

Please enter the word you see in the image below:


*  Please be aware that all comments are moderated.

Recent comments

05/16/12 Alex wrote:

Hi Constant Contact,

How can we change the text fields on the second screen of the Join My List app? I’d like to add fields that are important to us and eliminate some of the others we don’t care about and therefore would prefer our subscribers not be asked.

Interested in a particular topic?

If there are specific topics you’d like to see us discuss on our blog or other ideas you’d like to share, please let us know. Click here to contact us.