Adding Facebook Login to Google Docs Forms – Part 1

Google Forms are a great, capable tool. They are quick to create, and are used for a number of purposes such as surveys and polls.

They are limited, however, in how much customization can be done. There are some add ons available for Google Docs, but customizing forms is mostly limited to cosmetic changes.

Recently, a potential client wanted to add a Facebook login to a Google form. The client uses Google Forms for marketing surveys, and in addition to collecting the survey data, the (enhanced) Google Form would also collect data available from the user’s Facebook profile page via the Facebook API. The Facebook login to the survey would allow a deeper insight into the marketer’s audience. Since Google Docs can use Google’s powerful Javascript-like Apps Script, the client had thought it might be possible to use the standard Facebook Javascript SDK and add a login widget to the Google form.

Unfortunately, as it turns out, this is not possible. Google’s Apps Script doesn’t provide a full web-browser equivalent to the developer of the Google Doc. Creating things like custom html, css, and executing arbitrary Javascript just isn’t possible with the Google Docs Apps Script API.

There is a work-around however. It’s a bit of work to set up, but does allow a Facebook login to be attached to a Google form (sort of):

1. Create a Google form as usual
2. Create a plain, empty html file on a web server.
3. Embed the Google form into the empty html file (as an iframe)
4. Within the html file, add a Facebook login widget via the Facebook Javascript SDK

With some styling work the Facebook login can be made to look decently integrated into the Google form.

Once a user logs into Facebook, they complete the form as usual. The html file (via some Javascript) could use the Facebook API to retrieve and then save the demographic information available from the user’s public Facebook profile. This information could be stored locally on the web server, or uploaded to a Google Spreadsheet via Google APIs.

In the coming blog series, I’ll give example code (and build a demo site) showing the above approach in action.

As always, feel free to contact me if you have any questions!

Leave a Reply

Your email address will not be published.