Create Facebook Apps and Page Tabs with Caspio DataPages
Doing business on Facebook is increasingly critical for reaching the widest possible audience. Web users are spending more of their online time on this popular social networking website. When you register your Caspio apps on Facebook, or add them to your Facebook business page, you open up new possibilities for connecting with existing and future customers – as well as their Facebook friends.
Here are a few ideas of what you could be deploying as a Facebook app:
- Lead generation forms
- Contact us forms
- Sweepstakes forms
- Support inquiry forms
- Surveys
- Jobs listings
- Resume upload form
- Real estate and used cars listing
- Product database
First, the Terminology
Business Profile Page – An organization's Facebook page. Business Profile Pages look like a personal Facebook profile, but with additional features such as the ability to name multiple people as administrators.
Page Tab – For our purposes it is a deployment of your Caspio DataPage or app that is accessible directly from your business profile page.
Canvas Page or Canvas App – It is your DataPage or app loaded within the context of Facebook as a standalone app. Here is an example of a canvas app that is not visibly associated with a business profile: apps.facebook.com/caspio-demo-apps/
Initial Considerations
Your Facebook App must consist of at least one DataPage. Web Forms, Reports and Calendars all make great Facebook Apps. A single DataPage is all you need for a Canvas App or a Page Tab. Your app can certainly contain more than one DataPage. Before you begin this process make sure your DataPage or app is built and ready for deployment.
DataPage Width and Height
To avoid scrollbars in your deployment, ensure that your apps are within Facebook’s size restrictions of 760 pixels for a Canvas App and 520 pixels for a Page Tab.
If your DataPage is wider, consider the following options:
- Reduce your font size through the DataPage style
- Reduce the width of your fields
- Put your field labels on top of fields rather than on the left
- Reduce the number of columns in Forms, Tabular reports or Gallery Reports
Deployment Options
Two methods of deployment can be used for Caspio DataPages on Facebook:
- Direct link from Caspio (recommended)
- Embedded Deployment. (necessary when using outside libraries or scripting)
Select your DataPage in Caspio Bridge and click on the Deploy button. Copy the Direct URL of the app and save it somewhere as we will need it below. Make sure to close the Deploy Dialog.
For multi-screen apps, deploy your entire app on your own site. You will embed the main page of your app on Facebook.
Personal Facebook Account and a Business Profile page
You must have a Facebook personal account. You also need a Business Profile Page. If you don’t have one already, set one up at www.facebook.com/pages/create.php.
Deploying Your App on Facebook
1. Go to Facebook developers’ site developers.facebook.com and on the top right of the page click on "Create New App" button. Give your app a name and choose your language. The Facebook interface changes frequently, so the screenshots below might not be exact. If this is your first app, Facebook may require you to verify your account. Continue below when account is verified.
2. Basic Info section – Enter your App's "friendly" name the way you want it to be shown to users. Then enter your desired namespace. This defines part of the URL of your Canvas page. Leave App Domain blank. Continue to the next step if deploying as Canvas App. For Page Tab skip to step 6.
3. Canvas App– Click on "App on Facebook" to expand the section. Enter the URL of your application in the Canvas URL field. This URL is the Direct URL from your Caspio Deploy dialog. It could also be the URL of the web page where your Caspio App is embedded.
4. For the "Secure Canvas URL" you can use the same URL from the Canvas URL field and just replace http with https. If you are using your own custom URL, ensure that your site support SSL.
5. Click "Save Changes" button to save the settings. Notice the Canvas Page link that Facebook provides to you. This is the URL of your app on Facebook. You can now skip to the end of these steps.
6. Page Tab integration – If you wish to integrate your app as a Page Tab, click on "Page Tab" to expand this section.
7. Enter your app name, then the URL of the DataPage from the Direct deployment option of Caspio Deploy Dialog or the URL of the web page where you have embedded the app. For secure option, if using direct URL, change http prefix to https. If using your own custom URL, ensure that your website support SSL and enter your SSL URL to the app.
8. Click "Save Changes".
9. You can add the Page Tab to your Facebook profile page by navigating to the following URL: http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL, where YOUR_APP_ID and YOUR_URL can be found in your app settings.
For more information about this, please refer to Facebook Page Tab Tutorial.
