Facebook Fan Pages and Static FBML Part 2

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

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.

If CSS, HTML, Inline Styles sound like a foreign language to you, get my FREE courses:

* Web Site Creation Course: HTML, CSS
* Interactive Web Site Course: PHP, JavaScript, Forms

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

Static-FBML

How to Submit a Form Without the User Leaving Your Facebook Fan Page!

Enter your Information Below. This form will send an AJAX post to our server and send an email with the comment you enter to the email address you specify.

Name:
From Email:
To Email:
Comment:

To ensure you receive the test email, please enter a valid email address.

Note: I am not storing or saving any email addresses processed with this test.

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.