Facebook Fan Pages and Static FBML Part 2

Facebook Fan Pages and Static FBML Part 2Facebook Fan Pages and Static FBML Part 2

In Facebook Fan Pages and Static FBML Part 1 I covered the basics of adding a tab and or box to your Fan Page using the Static FBML app to create custom landing pages and information boxes.

Note: Facebook has disabled putting FBML boxes in the left column… so ignore those parts of my post below. It shows up as a tab on the fanpage.

In this article I’ll cover using AJAX (AJAX is NOT a cleaning product! AJAX stands for Asynchronous JavaScript + XML) to allow you to get information from, or to interact with, a visitor to your Fan Page without the visitor ever leaving your Fan Page. The operation appears seamless and totally integrated… because it is! If you don’t know anything about AJAX don’t worry – I’ll give good examples.

Exactly what does AJAX do? It enables a web browser to communicate with a web server without having to constantly reload pages. This communication allows information exchange to occur with the web server behind the scenes and then update the page and information the user is viewing, usually in response to user input.

The example I’m going to use is a simple form that sends an email to yourself. In a real world example, you may setup something to allow a visitor to ask you a question, sign up to your mailing list, order something… the ideas are as endless as your needs and imagination.

Static FBML can create a Tab or a Box in the left column of a Facebook Fan Page. My example is live and working as a Box in the left column of My Fan Page here: www.facebook.com/InternetBusinessBlog – go ahead give it a try, it works.

The image at the top of this article is what the box looks like. Below is the code. The top part of the code is the JavaScript / AJAX portion and it’s pretty well commented and should be easy to follow. The bottom portion is the HTML portion that makes the visible part. Basically when you click the submit button an AJAX object is created to communicate to the web server. Then we create a call-back function (fancy way to say a function that the server calls when it’s done) to do whatever we need to do with the results returned from the server, and, a function to handle any errors that may occur. Then we tell the user we’re submitting the form and we then submit it. That’s it… when the results come back we update our page with that info. If you use this example, or follow it, you will need to replace my server and my file with your own (note that it is in multiple places).

So much for the Facebook side of things, what about the code that runs on the web server? Here is the PHP file (in this example: facebook_comment.php) that gets executed to send the test email. This is pretty simple code that just sends an email. The sky is the limit as far as what you can do with your code.

Note: I cannot support everyone out there who may try this. If you run into a particular problem, post about it here and maybe someone will help you out.

The Trouble with Boxes…

Note: Facebook has disabled putting FBML boxes in the left column… so ignore those parts of my post. It shows up as a tab on the fanpage only.

Static FBML can create a box in the left column or a full page tab on your Fan Page. You can create multiple occurrences of Static FBML on the same fan page. See Part 1 for instructions for both. One note, I had trouble getting it to show up in the left column. I finally fixed it by clicking the “Boxes” Tab and my Static FBML form what there… Next I clicked on the little pencil looking icon in the top right corner and selected “Move to Wall Tab” and it showed where I wanted it.

Debugging Static FBML

Debugging your code for a Static-FBML page can be tricky. Facebook obfuscates the HTML and JavaScript that it renders so that if you look at a View Source it’s hard to read. I use Firefox and watch the error console for clues as to where my problem may be. I also use the FireBug Plugin for Firefox as well to help with debugging both code and CSS.

When debugging, if instead of AJAX handling the return from you web page on the server and it staying hidden it suddenly pops up as a new browser window, you’ll know that something with the AJAX call or call-back has a syntax error. If you’re really stuck, removed as much of your code and functionality as possible until you get a very simple version working and then add back a little at a time until you find the line of code that is causing problems.

Note: Facebook has disabled putting FBML boxes in the left column… so ignore those parts of my post. It shows up as a tab on the fanpage.

Stay tuned for part 3…

Until next time,