The goal of this project is to create a lead capture form or customer contact form like the one below, and embed it in our Facebook business page. With people around the world spending more of their time online interacting with people and brands through Facebook, this can be a great way of making connections with customers and potential customers within the Facebook experience.
Update: You may want to scan this article for background, but then refer to an updated tutorial that lets you skip some of the steps given below for registering your web page on Facebook and avoids some issues with Facebooks “secure browsing” feature.
See this example live at www.facebook.com/expressdb (and click the Like button while you’re there, please).
Creating a Facebook page for your business or organization is free, and adding basic interactivity like a Contact Us form can be simple and inexpensive with the use of ExpressDB. ExpressDB provides a simple way for web designers and HTML coders to create interactive forms without hassling over the details of programming and database setup. ExpressDB takes the input from your form and automatically creates a database to match, reliably storing whatever data you choose to capture. This has to be the absolute simplest way of creating something like a lead capture or customer contact form to add to your Facebook page.
ExpressDB offers a free trial so you can experiment with no obligation. If you become a customer, ExpressDB will record up to 1,000 submissions per month for a $16.95 monthly subscription (see pricing), with add-on packs available for higher volumes (you could have worse problems than pulling in 1000+ sales leads).
Any web form can be turned into an ExpressDB form with the addition of one copy-and-paste line of code, which goes into the form tag in your HTML.
You can download the sample Contact Form from our forms gallery as a starting point. Change the formatting as necessary to match your branding, and tweak the layout to fit within the relatively narrow column (520 pixels wide by 800 pixels tall) that Facebook gives you for embedded content. You definitely don’t want your content to be wider than that. If it’s taller, Facebook will display a scroll bar to let you see the content in excess of the 800-pixel limit.
For the example shown here, we have uploaded our ExpressDB form to blog.expressdb.com/facebook/index.php – and you can see it there as an independent web page. We are going to take that content and plug it into the Facebook Developers application.
Note that the file extension is PHP rather than HTML because this file is capable of processing programming instructions in the PHP language, in addition to displaying HTML. We’re not actually going to write any PHP code, but Facebook will post some data to that page in the process of loading it, and some web servers will display an error message when an HTTP POST is directed at a plain HTML file. Depending on your web server setup, you could use a CFM, ASP, or ASPX file — check with your web administrator if you don’t know which is supported on your server. If you’re running a small business website on a service such as GoDaddy, you will probably find that PHP is supported.
- Create a directory on your web server into which you will load the file for your ExpressDB form.
- Make the file itself display as the index of that directory by using a file name such as index.php
Now go to the Facebook Developers site at www.facebook.com/developers and register, agreeing to their terms of service.
Once you are registered, you can click on Create App. Fill in the basic details for the name of your application, your web site, and your domain. You don’t need to fill in a detailed description of your app if it’s only for use on your own Facebook page (as opposed to being a public app, listed in the application directory, that you will encourage others to add to their pages).
The most important variables you need to fill in are on the Facebook Integration tab. For the Canvas URL variable, use http://www.mysite.com/myapp/ and for the Tab URL (which must be different) use http://www.mysite.com/myapp/index.php (or whatever the name of your index file is). In this case, both URLs will actually access the same content. You also need to fill in the label that should appear on your tab. Optionally, you can fill in the Canvas Page, as we’ve done below with “expressdb-contact” in the blank. This makes our form accessible at apps.facebook.com/expressdb-contact/ as well as within the context of a tab on our business page.
Here is how the Contact Demo tab at www.facebook.com/expressdb is set up.
Update: This form has changed to include a new Secure Tab URL field. To avoid conflicts with Facebook’s secure browsing feature, you should provide an https variation of the address for your form. This requires obtaining an SSL security certificate for your domain and installing it on your server (which may require getting help from your web host). To avoid that requirement, try this alternate technique for adding ExpressDB forms to Facebook.
After saving your work, visit the Application Profile Page Facebook creates, and you will see Add to my Page as one of the links on the left hand side. Click there, and you will be given the option of adding your new page tab to one or more pages that you own or administer. Go to your page to verify that the tab is now showing up.
Optional but recommended: Change the icon that appears next to your tab. Go back to the www.facebook.com/developers and look for the App you just registered under My Apps. Click on the name you gave your application, and then Edit Settings. On the About tab of the settings screen, click Change Your Icon and upload a small, squared-off image that evokes your brand. For our page tab, we used just the “DB” part of the ExpressDB logo.
Just for bonus points, you might visit the Facebook Social Plugins page and get some copy-and-paste code that will add some additional interactivity to your page. Just fill out the form, and Facebook generates a little snippet of code I can use. Here, I’m grabbing the XFBML version of the code for the Facebook Recommendations box, which shows which of the blog posts from this website have been shared most frequently on Facebook. If you look at the example at Contact Demo tab at www.facebook.com/expressdb, you will see I’ve added this widget just below my form.
That’s about it! Of course, there’s plenty of potential for deeper, fancier technical integration with Facebook. But if what you’re really looking for is a simple inexpensive way of adding a customer contact form (or any other web form) to Facebook, and know the data you collect will be recorded reliably, you can do it easily and inexpensively with ExpressDB.