You have a Facebook Page to promote your Hotel or you company/organization. That’s excellent! Your Hotel is doing well… But what about this booking form you have on your site? Can you embed such a booking form in your Hotel’s Facebook Page?
Well, yes you can. It’s easy and most of the time (unless you have a lot of javascipt) is not time-consuming.
And here is how:
First of all make sure you have such a Facebook Page. Not, the usual personal profile page but what FB names as a Facebook Page. If your Hotel or Company appears in FB as a simple user… well you have to make a new one Facebook Page. As FB says "Pages are special profiles that may only be used to promote a business or other commercial, political, or charitable organization or endeavor (including non-profit organizations, political campaigns, bands, and celebrities)." And you have to use that.
Don’t continue unless you are sure you have such a page. FB does not allow you to use the static-FBML (more about this later) in a simple personal profile page. To see how you’ll create one see here.
Now you have to understand a little bit what the whole procedure is. Let me explain: You have your booking form ready in your site. This is just html. In most of the cases you might have a little bit of javascript there. What would be ideal is that you could copy all this code, paste it in FB somehow and you are finished… Kind of.
Let’s continue: Copy your form (the html) in your editor. Keep it there. Please have a look for any spaces in hrefs or select options etc.
i.e. if your action of your form is " http://somewhere.com/something.php" it won’t work. (can you see the little space in between the quote and http?) the parsing engine of FB will not forgive you for that and you’ll end by trying to figure out what’s wrong…
Now you need a way to tell FB that you want this html appear in a box in the left sidebar under your profile image. But how?
You need a FB application to do the work for you, and hopefully there is one. The static-FBML application. This will give you the tool to embed your html code in your FB page. So you need to add this app in your FB page. Go to the "Edit Page" link under your profile image, click the "Browse more" under More applications. Search for ‘static-FBML’, in the results list click on static-FBML and at last "Add to my Page". You now have this app ‘installed’ on your fan FB page.
When you go to "Edit Page" in your FB Page you can now see it in your Applications listing. Click "Edit" and voila…here is where you’ll paste in your form’s html (and any javascript you have – more on this later).
So edit Box Title field with the title you want to appear above your form and paste your form’s html in the FBML texture. Click "Save Changes" and you are almost finished. Go again to your applications listing ("Edit Page") and you’ll see now your static-FBML application has changed its name. It will appear with the title you gave it in your previous step. Click on "Application settings" and make sure you’ve added it in Box and Tab as well.
If your form has no javascript and your html is ok you should have right now your booking form working.
But in many cases you have some little javascript there. And this will not work as it is in FB. The reason is FB has its ‘own’ javascript dialect. You’ll most probably have to tweak your form’s javascript in order to work. But fear not. Most of the time the changes are minor. See more details in here.
Depending on the complexity of javascript you already have you might choose to abandon some of it or else you have to change the getters and setters of your javascript code, replacing them with FBJS getters and setters.
But what about styling my form? Well there are some small tips I can give you. First of all wrap your form in a div. And give your div a width of 180px as this is the width of the left sidebar in your FB page. You can also use inline styles. But keep it simple…
So we came to an end. Our booking form now works and everyone is happy. But "am I supposed to make all these changes in a live FB page? what about a sandbox where I can see what I’m doing without worrying if my changes appear in my Hotel’s FB page?". Well there is a solution to that: Facebook Test Console. You can go there and run your code to ensure everything works fine. Then you can go ahead and follow the procedure as was described.
Go ahead… Make your Facebook pages give you more…
Leave a Reply