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

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.

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

Tip Jar: Leave a Donation

Comments: 48, TrackBacks: 0.

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

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

You may reprint or distribute this article as long as you leave the content intact, list me at the author, and include a link back to this web site... see this page: linking back to this blog.

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
From: andrew s.

it is a really good post, though i admit i am a noob in getting html done and in fb fan pages, i don't really know how to work with it, but thanks to you i will start :)
thanks so much,

Andrew.
Posted by andrew s. on September 4, 2010 3:32 AM
From: ellipsis dive

Hi. Thanks for sharing this information. Cheers:)
Posted by ellipsis dive on September 6, 2010 9:05 AM
From: Charlie

Hi there - I'm having an issue with a plain html form in a Static FBML tab.

My tab displays fine in IE and Chrome, (and incidentally the form works fine as well) but firefox is failing to display everything between the and tags.

Without redoing the whole thing are you aware of a workaround to make firefox display the code between those tags?

The page is here: http://www.facebook.com/pages/The-1-4-5s/153832507976409?v=app_4949752878&ref=sgm

And you want the welcome tab (should be the default landing page at the mo). Try viewing it in both IE/chrome and Firefox.

Hope you can help me out - this is driving me insane!

Cheers
Charlie
Posted by Charlie on September 12, 2010 4:21 PM
From: jfgrissom

Hi Fred,

Great instruction for Facebook Markup!

I was wondering how people did this...

The form submission has got to be great for your opt-in offers...

Killer post thanks for the info!

Sincerely,
Jay
Posted by jfgrissom on September 30, 2010 6:41 PM
From: Eyad

I have contact.php on my main site but its not working i was trying so hard to get it works
but i dont know how i know it depends on the host i tried to call them and everything they said it works
but not to me at all
so can you help and upload on working facebook_contact.php for us please !

thanks you
Eyad
Posted by Eyad on October 14, 2010 12:56 PM
From: shallum

hello this is a very nice tutorial im not a developer ut i want that the visitor should not input the 'TO' email address means thr form only contains followinf fields
Name
email address(visitor)
Message
Submit button
Posted by shallum on October 18, 2010 1:02 PM
From: John

Thanks for the great instruction!

I was having some errors, so I ran it through Dreamweaver to flag up any syntax errors, and it kept saying error on line 32, which was the last return false; in the top script tag. To fix that I just changed:
"!-- function submitAjaxForm()
{ "

to

"!--
function submitAjaxForm()
{ "

The submitAjaxForm function was being excluded, works great now!
Posted by John on October 19, 2010 3:02 PM
From: shallum

hello im using this tutorial on page, i used fb:captcha but the problem is that it shows captcha is present but not linked to that form the form submits even captcha is not entered and also tell that how to auto redirect after submitting the form because facebook_comment.php contains the code for sending that form an also thanks or error message if form is submitted successfully it shows the thanks message but after that if refreshed the page it submits another form to email automatically and so on if refreshed several times? im not a developer as i mentioned in my previous post... plz help
Posted by shallum on October 22, 2010 6:38 AM
From: Ben

The last comment from John, is a must. You must make sure the submitAjaxForm() line is not commented out for the callback to work correctly. Thanks for that tip John!
Posted by Ben on October 26, 2010 3:17 PM
From: Shovan

Thanks you for the post. It was useful. I am facing this problem

The Ajax doesn't seem to load within facebook
I entered default email address in the "To Email:" field.. for some reason I don't get the email since then.

Appreciate the tutorial

Shovan
Posted by Shovan on November 2, 2010 5:41 AM
From: Andy

test in your script is work, but away to junk mail, let me know how to fix
Posted by Andy on November 7, 2010 2:08 PM
From: leozzz

I think it has problem with IE7

invalid request page is directed, and the ajax call cannot be made
Posted by leozzz on November 22, 2010 9:09 PM
From: Laudez

Thank you!! Had the same syntax error as John, now it works a charm. Cheers mate, you all have saved me a lot of heart and head aches ;)
Posted by Laudez on January 19, 2011 3:48 PM
From: David

Regarding the junk mail problem, I think it is determined by your server's reliabilty (ip, webfarm, spam records and so on) so there's nothing you can do scriptwise.
I tried the script and it's working fine, but I had to change the submit button from type="submit" to type="button" to avoid redirection to my page.
Posted by David on January 24, 2011 5:15 AM
From: romi

Hi,
Thanks for your article & helpful example. I was able to get my fbml form to submit to an asp.net application.
Now I need to upload a file from the static fbml page. I am not getting any file posted to the server, only null object.
I am using a html input file control and change the enctype.
Please help! Thank you!
Posted by romi on February 1, 2011 8:28 PM
From: Reiki and Chakras

Facebook Fan Pages is very good for marketing your products and services. I really thank for giving such wonderful information.
Posted by Reiki and Chakras on February 3, 2011 1:41 PM
From: montascale

Is this still working with the new Fan Pages Layout?
Posted by montascale on March 9, 2011 3:09 AM
From: Vivekanand Saraswati

Hi.. Fred this code is not working when anybody fill up the form it goto new page(my facebook_comments.php). I also override server code but it still go to another page.
Please suggest me what is wrong with code.
Posted by Vivekanand Saraswati on March 11, 2011 1:52 AM
From: Chunnu

Dear Fred,

I am very new to these platforms. Just two question I want to ask:

My site is a education information portal. There is a search facility in my homepage.Can I send specific search queries from a facebook form to my search form and show results to user?

OR

I have to create search facility within facebook and I suppose that would be difficult for be because my site is in Joomla and got a large database.

Your help will be appreciated.

Thanks.

Posted by Chunnu on March 22, 2011 9:30 AM