How to: Livebookings restaurant reservations tool on your Facebook Page using the Static FBML app (deprecated)

NOTE! Since this post was written Facebook has changed how Pages can be customised with added functionality. The application we used for this, the “Static FBML app”, is no longer available as Facebook has deprecated it. You now need to create what is called a “custom iframe app” (you got to love the user friendliness of this…) instead. You can find documentation about how to best do this here.

However, if you still have access to the “Static FBML app” (people who added it to their Page before Facebook deprecated it can still use it), these instructions are valid!

Lately we have been experimenting a lot with social media at Livebookings, and one of the projects we have completed is finding a way to embed our booking tool in a Facebook Page tab.

Studies have shown that a lot of people are reluctant to leave the cosy confines of Facebook, so if you are running a Facebook Page for your restaurant it makes sense to give your fans the opportunity to book your restaurant directly from your Page rather than send them to a page on your website.

Following these instructions you can add a tab to your Page in which the Livebookings tool shows up, just like it does on your website.

The main difference from how it behaves in your website is that due to extra security features in Facebook, a “preview image” has to be clicked to activate the booking tool. This is really an extra branding opportunity though as you can design your own image and use the space to emphasize your logotype, supply a message to the diner or even advertise upcoming events.

What you need before you start:

• A Facebook Page. Duh.
• Administrator rights to your Facebook Page…
• Basic HTML knowledge.
• No fear.
• A “preview image” with the dimensions 350 pixels high and 300 pixels wide (same as the Livebookings booking tool).
  • You can put whatever you like in this image, but it needs to make it clear that in order to see available tables and make a booking, it must be clicked. You need to upload this image to your website and get the full address to it (as if you would link to it).
• Your Livebookings Connection Id (looks like DEV-RES-EATFOOD:3925, if you don’t have it, contact your Account Executive).
  • As a special treat, it is possible to set up a special “booking channel” for you to be used exclusively in Facebook. Not only does this give you separate tracking of bookings coming in from Facebook (these are highlighted specifically in your restaurant diary), you can then also target special offers to your Facebook Page and give your loyal fans special treats not available to the public on your website!
• A special Facebook adapted embed code, called FBML code, to place the booking tool in the tab.
  • This is HTML-like code following a special format supplied by Facebook, and in order for our Flash based booking tool to work we have made some adaptations to it. You can not use the code you would embed in your normal website, it has to be this special FBML adapted code.

This is what the FBML code for embedding Livebookings’ booking tool looks like:

<fb:swf
imgsrc=http://www.YOUR_WEBSITE.co.uk/facebook/NAME_OF_PREVIEW_IMAGE.gif
flashvars=LBConnectionId=YOUR_CONNECTION_ID_HERE
width=300 height=350
swfsrc=https://secure.livebookings.com/LBDirect/fb-redirect.cfm></fb:swf>

NOTE! If you don’t want the booking tool to load in UK English, you will have to supply another string in the “flashvars” parameter. Due to the nature of FBML this parameter takes a URL encoded string of options, to make the booking tool load in Swedish you use:

• flashvars=LBConnectionId=YOUR_CONNECTION_ID_HERE&LBLanguageCode=sv-SE

Using this same method you can also make the booking tool start with a selection of restaurants. So if you are a smallish group (up to 8 restaurants fit in the window) you can start the booking tool with a prompt to first choose restaurant, and then continue on with the booking through the normal calendar. To do that, you add in a number of Restaurant Network Ids (up to 8 of them) in the “flashvars” parameter, like so:

• flashvars=LBConnectionId=YOUR_CONNECTION_ID_HERE&LBLanguageCode=sv-SE&LBRestaurantNetworkId=999999,888888

If you don’t know the Restaurant Network Ids of your restaurants, contact your Account Executive.

Step by step the process to embed Livebookings in your Facebook Page looks like this:

1. Log on to Facebook and go to your Facebook Page.
2. Click “Edit Page” in the left hand column to access the Administrator backend.
3. You now need to add the “static FBML application”. Scroll down the page to where you see “More applications”. You should see an app called “Static FBML”. If you don’t, click “Browse more” and search for “FBML” and you should see it in the top of the search result.
4. Click through to the FBML application and click “Add to my Page” in the left hand column. If you have more than one Page you need to choose which one to add the app to. Click “Add to Page” and then close the popup.
5. Go back to the Administrator section for your Page. You now need to configure the FBML application.
6. Locate the FBML application among your apps and click “Edit”. You will see a simple form with two fields: “Box Title” and “FBML”.
7. In “Box Title”, enter the text you want on your tab. I would recommend “Reservations” as it is short, clear and unambiguous.
8. In “FBML” you now need to add some code for what is to be displayed when people click through to the tab. This is where you need some HTML skill, as you must enter raw code into the form. You can basically add any HTML here, so you can design your tab with images, text, links to menus and so on. The very simplest implementation is to just drop the code for the booking tool in there, as displayed above, which would make the booking tool simply show up on a white background.
9. Click “Save Changes”.
10. Go back to the Administrator section for your Page. For the FBML app click “Application settings”. The FBML app can be added as a “Box” in your left hand column or as a “Tab” to display a tab along the top. The booking tool is to wide to be in a “Box”, so make sure that is removed, while the “Tab” is added. Then close the popup.
11. Go to your Facebook Page to make sure your new tab is visible. Click the tab to see your booking tool in its full glory.
12. Done! You can now take bookings via Facebook!

If you find it difficult to create the actual tab with the Static FBML application, here is another step by step blog post with a good explanation.

Since the tabs at the top of a Page are quite small and anonymous, you should now make it clear to your fans that the new tab exists. Post on your Wall to that effect, and to really make sure people notice, it may be a good idea to do some sort of little activity around it. Consider a freebie to the first 10 people to book via Facebook or something similar, or set up an offer available only to people on Facebook.

For a live example, search in Facebook for “Meza Bar & Grill Soho”, where you can book the restaurant directly.

There are other ways of adding the booking tool:

• Develop a Facebook app of your own, which enables you to make your custom tab the default tab for your Page, and the first thing a visitor will see. This is a neat way of making sure your fans see you take bookings in Facebook, and also customise the graphics presented to them to conform more to your branding.
• Use the Facebook CMS TabSite which allows you to create a really nice Facebook presence with multiple tabs and rich content without entering any code. They supply an editor with a “point and click” interface that allows you to design the contents of a custom tab in a graphical editor. To embed Flash movies like the Livebookings booking tool you need the Pro version though, so there is a cost involved. Recently I was in touch with the people at TabSite, helping a customer do just this, and they were incredibly helpful and quick in their responses so it seems like there is some value for money there.
  Update: The kind people from TabSite got in touch with me after publishing this post, saying that the function needed to publish a Flash movie (like our booking interface) using TabSite will be included in all price plans after a coming update. I also noticed that publishing the booking tool in this way seems to remove the need for a preview image, making the booking tool behave exactly as on your website.

This is a simple example, based on an individual restaurant.

Implementations can be seen on the Facebook Pages of Kettners in London, East West Sushi in Örebro and Fiddlers Irish Pub in Bonn.

If you are a restaurant group, running a single Facebook Page for more than one venue, you will need some additional code to build a way for a person to select which restaurant to book. For this you would use some dynamic FBML code, as explained at this excellent website with plenty of Facebook related code examples. That’s fodder for a more advanced tutorial though… For an example, check out the excellent Giraffe Facebook Page.

Please let me know how you get on, should you try this. Leave questions, comments and your experiences in the discussion section below. Good luck!

By Magnus Hultberg in Blog, How To:s, Code and Examples