Facebook Connect and Web Popups in Corona

Posted by Walter

Today, we added a new sample code demonstrating how to use Facebook Connect in your Corona app. Included in that sample is a “facebook.lua” library that makes it so easy to access the Facebook API that even the UI for logging in is taken care of for you.

The great thing about the facebook.lua library is how it makes simple tasks really simple. You don’t have to worry about creating UI to authenticate on Facebook’s servers, generating a url for an HTML GET, or messing around with generating the appropriate hashes using api keys. In keeping with our philosophy, we wanted to offer you something that you could use almost immediately.

In fact, if we were to strip all the fanciness out of the Facebook sample, you’d be able to post a new message to your wall with literally just a few lines:

   -- Load facebook.lua library
   local facebook = require("facebook")

   -- You must pass in two strings (an api key and a secret) that you
   -- obtain from Facebook: http://developers.facebook.com/get_started.php
   local api_key = "some sequence of hex characters"
   local api_secret = "some sequence of hex characters"

   -- Create Facebook connection object
   local session = facebook.newConnection( api_key, api_secret )

   -- Listener to call when a connection event occurs
   local function connectHandler( event )
      local session = event.sender
      if ( session:isLoggedIn() ) then
         local response = session:call{
            method = "stream.publish",
            message = "Cool! I'm posting to my wall from Corona!",
         }
      end
   end

   -- Bring up the web popup to login
   -- and pass connectHandler to be called upon login
   session:login( connectHandler )

We took a look at some of the Facebook Connect libraries out there for the iPhone, especially ones written in Objective-C, and were shocked at how hands-on you had to get to do something as simple as publish a message.

They tend to be complicated because there are multiple steps involved. The first step is enabling the user to login. This means the user has to authenticate on Facebook’s web site. In Corona, you can open any URL inside a web popup without leaving Corona. So in our facebook.lua library, we automatically bring you to the Facebook login page and then capture the appropriate results to access the Facebook Connect API.

Once you’ve authenticated with Facebook, there are several additional steps that make using the Facebook API unwieldy like keeping track of a session key to create REST-based queries. To make your life easier, the facebook.lua library wraps all those details for you. The actual Facebook sample uses this library to do a lot of fancy things like adding a status message telling you whether you’re connected. Once connected, the sample will publish a new post to your wall adding an image and a hyperlink to that same post.

Web popups are something you should add to your arsenal as you develop more apps with Corona. They let you combine web pages with standard Corona graphics and animation in novel ways, like creating help screens completely in HTML, gaining access to native UI controls like the picker wheel, and even animating Corona objects by making the background of the web popup transparent.