« Previous | Home | Next »

Facebook Fan Pages and Static FBML Part 2

May 17, 2010

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:

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

<script type="text/javascript">
<!-- function submitAjaxForm() 
{ 
// this part sets up a new FBJS (facebook javascript) AJAX object to do the submission of the form to the server
var ajax = new Ajax(); 
ajax.responseType = Ajax.FBML;
ajax.requireLogin=false;
// this section makes a callback to process what the server sends us back
	ajax.ondone = function(data) 
	{ 
		//put the returned data in the object
		document.getElementById('ajaxMessage').setInnerFBML(data);
		//let the user know we got data back and what it was... if you don't want this to happen, comment out (//) the next 2 lines
		var msgdialog = new Dialog();
		msgdialog.showMessage("Status:", data);		
	}
	//process an error if it should occur
	ajax.onerror = function() 
	{
		var msgdialog = new Dialog();
		msgdialog.showMessage("Error", "An error has occurred while trying to submit your comment.");
	}
	
	// tell the user that we're getting ready to try and submit the data they've entered
	//document.getElementById('ajaxMessage').setInnerXHTML("Processing Your Input and Sending your information to our server, please wait...");
	
 	// get the data the user has entered in the field on the form and put together into a query string
	var queryParams = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue(), 'txt1' : document.getElementById('txt1').getValue(), 'emailto' : document.getElementById('emailto').getValue()};
	
	// now that we have the field data in a string called queryParams, submit the form (post it)...
	ajax.post('http://www.pqinternet.com/facebook_comment.php', queryParams);
	return false;
}
//--></script>

<div style="border:1px gray solid; width:177px; margin:0px; padding:2px">
<a href="http://www.pqInternet.com" target="_blank"><img src="http://www.pqinternet.com/images/internetbusiness-175.gif"/></a>
<h1 style="text-align:center">Static-FBML</h1>
<h2 style="margin: 5px 0px">How to Submit a Form Without the User Leaving Your Facebook Fan Page!</h2>
<h3 id="ajaxMessage" style="color:red">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.</h3>
<form action="http://www.pqinternet.com/facebook_comment.php" method="post" style="width:177px; margin:0px; padding:0px">
<table style="border: 1px gray solid; background-color:#F5F5F5; width:177px; margin:5px 0px 0px 0px; padding:0px">
<tr><td><p style="margin:1px;"><label for="name">Name:</label></p></td>
    <td><p style="margin:1px;"><input type="text" name="name" id="name" size="14" maxlength="60"/></p></td></tr>
<tr><td><p style="margin:1px;"><label for="email">From Email:</label></p></td>
    <td><p style="margin:1px;"><input type="text" name="email" id="email" size="14" maxlength="70"/></p></td></tr>
<tr><td><p style="margin:1px;"><label for="emailto">To Email:</label></p></td>
    <td><p style="margin:1px;"><input type="text" name="emailto" id="emailto" size="14" maxlength="70"/></p></td></tr>	
<tr><td colspan="2"><p style="margin:1px;"><label for="txt1">Comment:</label></p></td></tr>
<tr><td colspan="2"><p style="margin:1px;"><input type="text" name="txt1" id="txt1" size="23" maxlength="500" /></p></td></tr>	
<tr><td colspan="2"><p style="margin:1px; text-align:center"><input class="button" type="submit" value="Submit" id="Submit_Button" onclick="submitAjaxForm();return false;"/></p></td></tr>
</table>
</form>
<p><b>To ensure you receive the test email, please enter a valid email address.</b></p>
<p>Note: I am not storing or saving any email addresses processed with this test.</p>
</div>

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.

<?php
	$sName = $_POST['name'];
	$sEmail = $_POST['email'];
	$sEmailTo = $_POST['emailto'];
	$sTxt1 = $_POST['txt1'];
	
	//Test to make sure all fields are populated by user
	if (($sName != "") && ($sEmail != "") && ($sTxt1 != "") && ($sEmailTo != ""))
	{
		$sBody = "Test Comment from Facebook:\n\n";
		$sBody = $sBody."Name: $sName\n";
		$sBody = $sBody."EMail From: $sEmail\n";
		$sBody = $sBody."EMail To: $sEmailTo\n";
		$sBody = $sBody."Comment: $sTxt1\n\n";
		$sHeaders = "From: $sEmail";
		//in a production environment  you would probably hardcode the to address vs. passing it from the form
		//$sTo = "actual@emailaddress.com";
		$sTo = $sEmailTo;
		
		mail($sTo, "Test Comment From pqInternet Facebook Fan Page", $sBody, $sHeaders);
		echo "Thank you for your Comment!";
	}
	else
	{
		echo "You must fill in All the Fields...";
	}
?>

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

Stay tuned for part 3...

Until next time,
Fred

About the Author

Fred Black is an experienced online business operator, programmer, web site developer, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.

You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact.

Tip Jar: Leave a Donation

Comments: 29, TrackBacks: 0.

Posted by Fred on May 17, 2010 | Printer-Friendly

TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/229

Assigned Categories: Social Media

Related Entries:

Comments and TrackBacks

Comments:

From: Web Host

Fred-

I'm not able to see the example on the facebook fan page you posted. Is this just me, or was there some error in the URL you gave us?
Posted by Web Host on June 1, 2010 4:27 PM
From Fred...

Thanks for letting me know... it's fixed now.
Posted by Fred Black on June 1, 2010 4:38 PM
From: Robert

Very good article, I've been searching for how to do this for some time (I knew it was possible), but thanks for the steps on optimizing a facebook page.
Posted by Robert on June 6, 2010 3:13 PM
From: nikesh

thanks for this aweome post.

One quick issue with the ajax function return value.

If I cut/paste your script "VERBATIM" and click the submit button on my page, I get the ajax response in new page, instead of a message box.

However when I go to your facebook page, which I assume is running the exact same script, I get the function return in a facebook message box.

Do you know what else you did to make the messagebox functionality happen ?

Thanks!
-ns
Posted by nikesh on June 16, 2010 12:16 PM
From Fred...

Nikesh;
Yes, you can't just copy and paste, you have to edit to use your server's address... "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)."

Also, read the last paragraph of the article, it explains why you're getting the new browser window.
Posted by Fred Black on June 16, 2010 12:26 PM
From: Lawrence

Thanks for this great post! I had no idea that you could actually optimize your facebook page. I'll be giving this a try.
Posted by Lawrence on June 18, 2010 12:28 PM
From: Roger

I am anxiously awaiting part 3 of this series...
Posted by Roger on June 18, 2010 2:23 PM
From: danny

hye Fred.

nice posts. thanks to u. thumbs up!
i need to edit the code abit to suit my page.

just want to check with you.
does facebook will take action, if we implement this code. i'm concerned later, my fan page will be deleted?. just curious.

many thanks.
Posted by danny on June 21, 2010 2:16 AM
From: Suhas

Dear Fred,
Thanks for the info. I am still don't understand how to put our php code in facebook which application I have to use
Just like U have created facebook_comment.php but where u have put it in facebook
So please help me and tell me the procedure of using the php code in facebook application
Posted by Suhas on June 25, 2010 1:41 AM
From Fred...

Suhas;
In this example, the file facebook_comment.php is on my server for this blog, pqInternet.com, not Facebook. You can't put PHP files on Facebook. So... here's how it works... you call a file on YOUR server to process the info submitted in the form.

The code you put in your Static_FBML page, in this example, has a form that when submitted uses AJAX to submit to the facebook_comment.php file on this server, hence the line in the first block of code example that says "ajax.post('http://www.pqinternet.com/facebook_comment.php', queryParams);" (note that it has this path in 2 places and you must change both of them to match your server and the file you create).

When the form is submitted, the Facebook Static_FBML page opens an AJAX connection to the file on my server to process the information that the user has submitted, in this example "facebook_comment.php", if everything is correct, my file sends back a message that says thank you for your comment, and that is picked up by the AJAX callback and displayed to the user.

Hope this helps.
Fred
Posted by Fred Black on June 25, 2010 10:00 AM
From:

Well, Thanks for sharing that facebook fan page share code. I was trying to find out that but cannot succeeded. Thanks Again.
Posted by on June 28, 2010 3:01 AM
From: Nicholas Turbanov

Hey Fred,

Thanks for the tutorial, helped me get my first FBML form done.

But I felt the need to point out that you're missing one crucial piece of markup here and that's the type definition for the script tag, i.e. 'type="text/javascript"'. Facebook didn't acknowledge my script at all until I added the type definition.

Cheers!
Posted by Nicholas Turbanov on June 29, 2010 11:34 AM
From Fred...

Nicholas;
Thanks for pointing that out, I've added it to the example code.
Posted by Fred Black on June 29, 2010 11:54 AM
From: TJ

I tried to copy the above tutorial exacltly as it is coded, changing the server and page information of course, and still ran into a snag.

It seems that my server isn't sending the response back to facebook as I am still receiving a new browser page instead of getting the status messages, or the updated ajaxMessage header on the page itself.

any clue as to what I need to have installed or configurations that need to be in place for the messages from my server to be sent back to facebook?

Any help is appreciated.
Posted by TJ on July 6, 2010 3:01 AM
From Fred...

TJ;
I can't help you debug it other than what I've put in the "Debugging Static FBML" section at the end of the article. It can be tricky!
Good Luck.
Fred
Posted by Fred Black on July 7, 2010 10:26 AM
From: Locksmith Sports Picks

This is definitely a helpful post. I have created a page on my fan page so the first thing a user sees when they come to it is my newsletter signup box. After all, it's all about the leads right? =)
Posted by Locksmith Sports Picks on July 7, 2010 2:42 PM
From: asaf

Hello Fred

I was looking for that kind of code for a long time,

I read the "Debugging Static FBML" section at the end of the article few times but still receiving a new browser page instead of getting the status messages.

Any new idea for fixing it?

Thank u

Asaf
Posted by asaf on July 15, 2010 6:09 PM
From: April

I don't have a way to do the facebook_comment.php file on a server. Is there another way?

Posted by April on August 2, 2010 6:45 PM
From: amruta

Hi, I had a question about the URL being sent in the ajax.post... can it have a call made to facebook itself? like"http://graph.facebook.com/btaylor" ??
Posted by amruta on August 3, 2010 3:49 PM
From Fred...

April & Amruta;
No, you have to have the file that's that source of the iFrame on a server other than Facebook. Free hosting accounts will sometimes work, depending on the host.
Posted by Fred Black on August 3, 2010 4:04 PM
From: mary

I couldn't get it to work either, until...

instead of this:
```
<script type="text/javascript"><!-- function submitAjaxForm()
```
i started function on another line
```
<script type="text/javascript">

<!--function submitAjaxForm()
```
Posted by mary on August 10, 2010 7:17 PM
From: Qamar

Nice article. Thank you very much
Posted by Qamar on August 11, 2010 3:41 AM
From Fred...

Mary - Thanks for the tip - I've updated the sample code.
Posted by Fred Black on August 11, 2010 1:42 PM
From: Abz

Hey Fred. Great article. But i'm wondering, isit possible to send this form as it is to an email adress once filled out? I want people to fill a particular form and when they click "submit", I want that form to be submitted to an email adress... Isit possible, if so how? Thanks.
Posted by Abz on August 12, 2010 11:05 AM
From: Abz

My bad, I've found it. However, "email to" instead of people writing the email, I want the "email to" section to be already filled with my email. I tried doing it but I didn't manage it. Help please...
Posted by Abz on August 12, 2010 9:01 PM
From: Bunny

Thanks for sharing very useful information. This is very helpful for me. when u will release next topic..see you soon
Posted by Bunny on August 14, 2010 12:14 PM
From: Steve

I noticed you published this on May 17th - it is my birthday and I consider your tutorial a great, late birthday present. I have been looking for sometime to customize the look of my Facebook page. Thank you.
Posted by Steve on August 16, 2010 5:17 PM
From: Maria Umar

Hi Fred, I know this might sound stupid but I am a complete html newbie. Can you tell me where exactly I am supposed to enter the first and second code? Is it in my FBML page or .... ?

Thanks in advance. Really appreciate the great posts - keep 'em coming.

Best,
Maria.
Posted by Maria Umar on August 18, 2010 4:02 PM
From: zac

Great stuff! Thank you for sharing this :)
Posted by zac on August 20, 2010 3:14 AM