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.
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.
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
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,