Reservation Form for Facebook

By Scott Thomas

Just over 2 years ago we posted instructions for creating a booking form app for Facebook. That method used Facebook’s FBML app as its base. Of course, as some readers have noticed, Facebook later discontinued the FBML app (existing apps based on it continue to work, but no new apps are permitted to use it), so it is time (past time, some might say) to update the steps using newer methods that Facebook allows (at least as of this writing!).

The New, Improved, Booking App for Facebook

In some respects, this is not too different from the old app – at least the steps should look somewhat familiar. The new Facebook timeline makes things a little different in the details, but basically, you create the basic app (we’ll use an app that was created by someone else, to avoid re-inventing it), paste in your booking form code, change the icon and position as desired, and you’re in business! Let’s get started…

As we begin, make sure you are logged in to Facebook as the administrator of the page on which you want the booking app to appear. Then we need to use an app that qualifies for the current Facebook rules. For us, that will mean an iframe-based app. One we like, and have found easy to use, is the Static IFrame Tab from Woobox. It has a variety of options, and allows you to install it multiple times on your page, if you need to create several apps.

Once again, we’ll use Webervations as an example, but any booking engine that allows you to insert a widget into your page (with some exceptions where the widget relies on JavaScript that Facebook may not allow) should work similarly.

Here are the steps:

  1. Go to the Static Iframe Tab by clicking on the link here.

    • If it asks for various permissions (what it asks may depend on your exact privacy settings), grant permission, and make sure that it can be viewed by Public if it gives you that choice.
    • If you administer multiple pages, select the one you want to install this for.
    • If this is the first time you have installed this app, click the big green “Install Page Tab” button.
    • If you already have one of these tabs installed, scroll down and click the small link that says, “Install 2nd Tab”, “Install 3rd Tab”, etc.
    • Click the button to install the app.
    • If it asks for more permissions, you’ll need to grant them.

  2. Return to your page and locate the row of app buttons near the right side of the area below your cover photo. The first one will be your Photos, the rest depend on what else you have set up. At the far right edge of these icons is a tiny pull-down arrow (if you have more than the default icons, there may be a number next to the arrow). Click it.

  3. Now when your mouse moves over the icons, there is a small pencil mini-icon that appears in the upper right corner, indicating you can edit the associated app. The Woobox app is called “Welcome” by default, and the icon is a pair of crossed spotlights. Click the pencil mini-icon to edit the Welcome app.

  4. In the menu that appears, select Edit Settings.

  5. In the Custom Tab Name box, enter the name of your new app. “Check Availability” might be appropriate. Click Save.

  6. If you would like to use a different icon than the default crossed spotlights, you’ll need to have prepared an image to use and saved it on your computer. The image should be 111 px wide by 74 px high. Other sizes will be resized to fit. To use your image, click the Change link next to Custom Tab Image. Then upload your custom image and return to your page.

  7. Click on the icon for your new app (not the edit icon, just the button, itself). You may need to click the down arrow at right again, if your app isn’t in the first row.

  8. Grant permissions if necessary and click the install button again, if necessary (I know!). You should now see the admin screen for your new app.

  9. Just below the top line, which says, “Tab Settings” is a setting to use the new wider “Timeline” page width. Select “Enable”.

  10. Scroll down to the line which reads “Page Source” and is followed by four radio buttons, “URL”, “Redirect”, “Image”, and “HTML”.

  11. Select the “URL” radio button. Then grab the full URL of your booking page and paste it in the URL field (your booking engine URL should look something like: http://www.webervations.com/magic-scripts/resbook.asp?memberid=YOURINN (where YOURINN is actually your member id for Webervations). Click “Save Settings”.

  12. Return to your page and click the new app’s icon. You should see your booking page inside your Facebook page. If not, double-check everything. If you are using Webervations, this should work correctly. With others, it is possible that there is something in the web page that Facebook is stopping before the page can load.

  13. If you want to move the icon to a different location, click the down arrow at the right side of the icon row, and from the dropdown menu, in the top section below “Swap Position With” select the app currently in the position where you want your new app to appear. Once it moves, you may need to rearrange some others, to get the apps all where you want them. Facebook only allows four apps in the top row – the default Photos app (which shows the most recently uploaded photo), and three others of your choosing.

Enjoy!