Guest Post: Put Your Facebook Page to Work (for making guest bookings)

Instructions for integrating Webervations availability tab (top) courtesy of Scott and Availability Online Tab (below) from H.T.

Put Your Facebook Page to Work

By Scott Thomas

Some innkeepers frequently question the value of social media, especially Facebook and Twitter, as being too time-consuming, all entertainment, annoying, or simply not producing any return on the time invested. We recently came across an idea from a large hotel chain that many bed and breakfasts can put to work immediately.

Online booking app for FacebookA hotel marketing newsletter mentioned recently that a large chain had added booking capability to its Facebook fan page. That triggered a memory that we had seen articles on customizing your Facebook fan page, but had never really pursued it, as the changes we were thinking about would have taken more time than we were willing to devote to the effort. Digging up the article, we put together the idea, and with a bit of cut-and-paste, had a working booking and availability app on our Facebook fan page in under 30 minutes. If your online booking source allows you to integrate the availability form into web pages, you can have on on your Facebook fan page, too. We’ll show you the step-by-step process, no programming needed!

The ‘How To’ Section

First of all, this will work with any online booking system that allows you to embed a form into a web page for checking availability and booking. Webervations is an example of one that does allow this, and we will use it as the example, since that’s what we used to create ours. If you’re not sure if you online booking service allows that, check their website (the internal site, where you go after logging in) or contact their support. In the case of Webervations (we’re not promoting Webervations, or anyone else, but since they do allow you to embed the form in web pages, it works for this purpose), the have a page with the exact code to cut and paste, located at Configuration -> Web Page Setup, then click on the link that says “To add a search form to webpages…”.

A word of caution – you can only add this type of custom application to Facebook fan pages (i.e., business pages). If you created a personal page for your business (you do know that violates Facebook’s Terms of Service, don’t you?), you will not be able to do this.

Now to create the custom app for your Facebook page…

1. On your Facebook fan page, click the Edit Page link, just below your large profile picture.

2. Under Applications, scroll down to More Applications, then click the Browse More link. In the Search Apps box, type “FBML” (without the quotes). Click Static FBML. On the next page click Add to My Page.

3. Go back to your fan page, and again click Edit Page.

4. Find the Static FBML application and click Edit.

5. Enter the name you want to appear in the Box Title field (we used “Book Your Visit” but you can call it anything you like).

6. Copy the code from your online booking form and paste it into the large FBML field. Just a suggestion: if the code from your online booking provider starts with “<form” you will probably want to add “<div>” before it starts and “</div>” (all without the quotes) at the very end.

Update: One other word of caution. The default code on the Webervations site includes a JavaScript that must be run when the page it is on first loads. That won’t work on Facebook pages, so if you’re copying and pasting, copy from <FORM all the way to </form>, then put <div style=”width:180px;”> before the <FORM and put </div> after the </form>. Don’t forget to change the “memberid” value to your member ID.

7. If you want the new custom app to appear in the left sidebar (the narrow left column) on your page, set the width to 180 pixels. To do that, where you have the “<div>” at the beginning of the FBML field, change it to read ‘<div style=”width:180px;”>’. In this example, the single quotes before <div and after > are not typed, the double quotes are mandatory.

8. When you have finished editing the FBML field, click Save Changes.

9. On your main Facebook fan page, click Edit Page (again!).

10. Find the new application – it will be called whatever you entered into the Box Title field plus FBML (ours is “Book Your Visit – FBML”). Click Application Settings.

11. Make sure “Box” is “Added” and “Tab” is “Added”, then click Okay.

12. On the Wall tab of your Facebook fan page, click on the Boxes tab. To add the new application to the left column of your page, find the new FBML box entry, and click the little pencil icon in the upper right corner. Then select “Move to Wall Tab”.

When you view your page now, you should see the new application in the left column. If you like, you can drag it to a new position, higher or lower than other items in that column (except for the items that Facebook won’t let you move).

Congratulations! Now Facebook can start helping you with your bookings!

Scott Thomas and his wife Ruth own Brewster House Bed & Breakfast in Freeport, Maine. Scott has been working with web sites and search optimization for over 15 years. He was a technical consultant and training manager with Oracle Corporation for its customer management and billing software. He now speaks frequently on technology issues for innkeepers including property management software, social media, reputation management and related issues, and blogs about these topics at


Added by Heather Turner:

This is the cheat for adding Availability Online as a reservations tab in your fan page.

On your Facebook fan page, click the Edit Page link, just below your large profile picture.

Under Applications, scroll down to More Applications, then click the Browse More link. In the Search Application box, type “FBML” (without the quotes). Click on Static FBML. On the next page (it will open up a popup box) click Add to My Page.

Click on the top left to return to your main personal settings (Facebook logo in blue will always return you to home)

Go back to your fan page, and again click Edit Page.

Find the Static FBML application and click Edit.

Enter the name you want to appear in the Box Title field , Reservations, Check Availability, Availability, Book a Room

Insert the following code with no changes except for this line: <input type=”hidden” value=”Your AO ID”>  its about 16 lines from the bottom, change the red to your AO unique identifer


Insert all of code below with the one change from above


<title>AO Date Selector</title>


function makeArray() {

for (i = 0; i<makeArray.arguments.length; i++)

this[i + 1] = makeArray.arguments[i];


function loadPage() {

if (document.layers) {

document.banner.visibility = ‘hidden’;

document.banner.left = ((window.innerWidth-800)/2);

document.banner.visibility = ‘visible’;


var months = new makeArray(‘January’,’February’,’March’,’April’,’May’,’June’,’July’,’August’,’September’,’October’,’November’,’December’);

var date = new Date();

var day = date.getDate();

var month = date.getMonth() + 1;

var yy = date.getYear();

var year = (yy < 1000) ? yy + 1900 : yy;






<form name=”availability” method=”GET” action=”; target=”_blank”>

<table border=”0″ cellpadding=”1″ cellspacing=”0″ bgcolor=”#d8cea7″ width=”562″>

<tr><td width=”558″>

<table border=”0″ cellpadding=”3″ cellspacing=”0″>


<font color=”#5b4e22″ face=”arial, verdana”><strong> To view Room

Availability enter your Arrival Date below:</strong></font><br>

<input type=”hidden” value=”Your AO ID“>

<select name=”monthselect”>

<option value=’1′>January<option value=’2′>February<option value=’3′>March<option value=’4′>April<option value=’5′>May<option value=’6′>June<option value=’7′>July<option value=’8′>August<option value=’9′>September<option value=’10’>October<option value=’11’>November<option value=’12’>December


<select name=”dayselect”>

<option value=’1′>1<option value=’2′>2<option value=’3′>3<option value=’4′>4<option value=’5′>5<option value=’6′>6<option value=’7′>7<option value=’8′>8<option value=’9′>9<option value=’10’>10<option value=’11’>11<option value=’12’>12<option value=’13’>13<option value=’14’>14<option value=’15’>15<option value=’16’>16<option value=’17’>17<option value=’18’>18<option value=’19’>19<option value=’20’>20<option value=’21’>21<option value=’22’>22<option value=’23’>23<option value=’24’>24<option value=’25’>25<option value=’26’>26<option value=’27’>27<option value=’28’>28<option value=’29’>29<option value=’30’>30<option value=’31’>31


<select name=”yearselect”>

<option value=’2008′>2008<option value=’2009′>2009<option value=’2010′>2010


<input type=”submit” value=”Search for Availability”>







end code



About Chef Forfeng

Innkeeping Tip and Tricks: Please check out some marketing ideas for Inns and B&Bs, Blogging ideas, Facebook Tips and Social Media Tutorials
This entry was posted in Hospitality News, How tos, marketing, Uncategorized and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s