12 Replies - 48818 Views - Last Post: 21 November 2011 - 02:05 AM Rate Topic: -----

#1 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5182
  • View blog
  • Posts: 26,879
  • Joined: 10-May 07

FaceBook FBML Ajax / PHP interaction

Posted 02 September 2010 - 09:17 PM

FaceBook FBML Ajax / PHP interaction

Wow! Where to begin?

Well, 1st off, you'll need to make certain that you have installed the fbml onto your facebook page or application. This is simply done by visiting Static FBML & clicking "add to my page" under the icon in the upper left. Once installed click edit & it's listed as FBML under your options.

Once you are editing your FBML code, there are two simple boxes. The 1st is "Box Title". This is the label text for the tab across the top. Keep is short as the text will be truncated if you try to enter too much. The 2nd box is where you input the fbml code.

The 1st chunk of code that we need is our Ajax script. We could just use standard PHP get or post, but then our viewers would possibly get confused or worried that something is happening that shouldn't. Ajax is the solution :)

<script><!--
function submitAjaxForm() { 
	// declare a new FBJS AJAX object
	var ajax = new Ajax(); 
	ajax.responseType = Ajax.FBML;
 
	ajax.ondone = function(data) { document.getElementById('ajaxMessage').setInnerFBML(data);
	}
	document.getElementById('ajaxMessage').setInnerXHTML('Submitting your information, please wait...');

	var queryParams = { 'Comments' : document.getElementById('Comments').getValue(), 'name' : document.getElementById('name').getValue(), 'Organization' : document.getElementById('Organization').getValue(), 'email' : document.getElementById('email').getValue(), 'Telephone' : document.getElementById('Telephone').getValue() };
	ajax.post('http://akroncdnr.com/ajaxemail.php', queryParams);
	return false;
}
//--></script>



This is really quote simple. Each input is gathered individually with document.getElementById & sent to PHP $_POST array over Ajax. Rather than have a submit button, we're going to use Facebook's Javascript (FBJS) to call submitAjaxForm() on the button click. This will gather the input values, just like the $_POST array, & pass them to the url value provided in ajax.post.

Now we can just use simply html to display a quick set of input values :

<p><b><h2>Need a service? Get a quote!</h2></b></p>
<p><b>
Welcome to our FaceBook Quote Request Page!</b></p>
<p>
<b>Get a quote by email</b>:<br>Just fill out this form, & a customer support representative will quickly reply to your question & advice on an action along with a quoted price & time frame.
</p><p>
<table border=0>
<tr><td>
<form method="post" action="http://akroncdnr.com/ajaxemail.php">	  
<div class="fc-tbx"><label for="subject">Subject:</label><br />
	<select name="subject" id="subject">
	  <option value="hardware">PC/Laptop hardware repair</option>
	  <option value="software">Virus, Malware, or other software errors</option>
	  <option value="windows">Boot, reboot, Blue Screen errors</option>
	  <option value="dslite">Nintendo DS Lite</option>
	  <option value="web">Web Design & Web Hosting</option>
	  <option value="development">Software Development</option>
	  <option value="other">Other...</option>
	</select>
</div>
<div class="fc-tbx"><label for="Comments">Comments and Questions:</label><br />
<textarea name="Comments" id="Comments" rows="11" cols="50" ></textarea></div>

<div class="fc-tbx"><label for="Name">Name (Optional):</label><br />
  <input type="text" size="41" maxlength="400" name="name" id="name" /></div>
  
<div class="fc-tbx"><label for="Organization">Organization (Optional):</label><br />
  <input type="text" size="41" maxlength="400" name="Organization" id="Organization" /></div>
  
<div class="fc-tbx"><label for="email">E-mail address (Optional):</label><br />
  <input type="text" size="41" maxlength="400" name="email" id="email" /></div>
  
<div class="fc-tbx"><label for="Telephone">Telephone: (Optional)</label><br />
  <input type="text" size="41" maxlength="400" name="Telephone" id="Telephone" /></div>



& each id is used as you would with the $_POST array, except over Ajax.

Now here is the part I was talking about earlier. The onclick for submitAjaxForm().

     <button type="submit" onclick="return submitAjaxForm();">Submit</button><input type="reset" value="Clear" />



Simple enough :)

Then finish the form :

</div>
</form></td>




& we are ready for collecting input. But wait, there's more!

We can supply a blank paragraph tag, & be certain to label it ajaxMessage. This way we can fill it upon return from Ajax.

<p id="ajaxMessage"></p>
<p>
<b>We look forward to hearing from you!</b>
</p>



Now onto the server code. Lets use PHP on our server to gather & use the data.

<?php
  $name = $_POST['name'];
  $email = $_POST['email'];
  $comments = $_POST['Comments'];
  $orgz = $_POST['Organization'];
  $phone = $_POST['Telephone'];

  if(log_submission($name, $email, $comments, $orgz, $phone)==0) {
    echo "Submission was sucesful!";
  }
  else {
    echo "There was an error processing your request.<br>Please try again later.<br>";
  }
?>



Gather the inputs from $_POST. Please be sure to scrub your data for nasty code :)

Then with everything gathered, validated, & prepared for usage, pass it to a function. I suggest using an email script, but really it's your call!

The two echo statements in the above code will be displayed in the paragraph labeled ajaxMessage. You now have a contact form, in it's own tab, on your facebook profile, that functions as a direct gateway to your own server for gathering, processing, & responding to the users input data.

To see this in action for your self, head over to my Facebook quote request page.

Enjoy!

Is This A Good Question/Topic? 1
  • +

Replies To: FaceBook FBML Ajax / PHP interaction

#2 Lydon  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 22-May 08

Re: FaceBook FBML Ajax / PHP interaction

Posted 03 September 2010 - 05:32 AM

That looks pretty cool. I've just made a website for someone starting a new PC repair company...I can see them wanting this added now lol.
Good stuff :)
Was This Post Helpful? 0
  • +
  • -

#3 Denis1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 32
  • View blog
  • Posts: 102
  • Joined: 29-July 09

Re: FaceBook FBML Ajax / PHP interaction

Posted 03 September 2010 - 11:46 AM

thank you so much for this. :D
Was This Post Helpful? 0
  • +
  • -

#4 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5182
  • View blog
  • Posts: 26,879
  • Joined: 10-May 07

Re: FaceBook FBML Ajax / PHP interaction

Posted 03 September 2010 - 12:06 PM

View PostLydon, on 03 September 2010 - 06:32 AM, said:

just made a website for someone starting a new PC repair company...I can see them wanting this

Exactly what I'm using it for ;)

I've also used it for a Facebook pizza ordering system.

View PostDenis1, on 03 September 2010 - 12:46 PM, said:

thank you so much for this. :D

Can you show us what you're doing with it? I'd be really interested to see the results!
Was This Post Helpful? 0
  • +
  • -

#5 Denis1  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 32
  • View blog
  • Posts: 102
  • Joined: 29-July 09

Re: FaceBook FBML Ajax / PHP interaction

Posted 05 September 2010 - 01:56 PM

View Postno2pencil, on 03 September 2010 - 06:06 PM, said:

View PostLydon, on 03 September 2010 - 06:32 AM, said:

just made a website for someone starting a new PC repair company...I can see them wanting this

Exactly what I'm using it for ;)

I've also used it for a Facebook pizza ordering system.

View PostDenis1, on 03 September 2010 - 12:46 PM, said:

thank you so much for this. :D

Can you show us what you're doing with it? I'd be really interested to see the results!

i am going to be using this to get users to sign up to my game. I have always seen customize tabs but never really knew how to create one. :) thanks again, now i have joined the fackbook developers i am going to look more in to FBML and try new things.
Was This Post Helpful? 1
  • +
  • -

#6 Guest_Breklin*


Reputation:

Re: FaceBook FBML Ajax / PHP interaction

Posted 08 December 2010 - 03:29 PM

How would this work if I was using an iFrame application that was using the Tab to submit an AJAX form as above? I need to use XFBML from what I understand. My form submits to my database table insertion on the PHP side but I get no return on the message data. Nothing displays.
Was This Post Helpful? 0

#7 Guest_Ryan*


Reputation:

Re: FaceBook FBML Ajax / PHP interaction

Posted 17 December 2010 - 01:42 PM

What is the "log_submission" function? This is not a valid PHP function and you have not provided a "log_submission" function for use in the code.

Can you clear this up for me? Otherwise, I can't get this working because PHP on my web server cannot process your function.
Was This Post Helpful? 0

#8 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5182
  • View blog
  • Posts: 26,879
  • Joined: 10-May 07

Re: FaceBook FBML Ajax / PHP interaction

Posted 05 January 2011 - 12:58 AM

View PostRyan, on 17 December 2010 - 02:42 PM, said:

What is the "log_submission" function? This is not a valid PHP function and you have not provided a "log_submission" function for use in the code.

This function, log_submission, connects to the database to log the events. Its' a custom function.

Just simply remove it from your code.
Was This Post Helpful? 1
  • +
  • -

#9 League  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 09-January 11

Re: FaceBook FBML Ajax / PHP interaction

Posted 09 January 2011 - 05:35 PM

Thank you for the post it was intresting reading.
Considering in adding it into my repair site.
Was This Post Helpful? 0
  • +
  • -

#10 Guest_Erin Dalzell*


Reputation:

Re: FaceBook FBML Ajax / PHP interaction

Posted 19 January 2011 - 06:07 PM

Thanks for this, but I am having some difficulty. I made an FBML app and used your code, but when I submit, the results are not put in the page. My page is here: http://www.facebook....21185747952178. Just hit the submit button to see what I mean. Here is my index.php file:


<?php
// all DB and Facebook parameters
require './config.php';
?>
<script><!--
function submitAjaxForm() 
{ 
	// declare a new FBJS AJAX object
	var ajax = new Ajax(); 
	ajax.responseType = Ajax.FBML;
 
	// define a callback to handle the response from the server
	ajax.ondone = function(data) 
	{ 
		document.getElementById('ajaxMessage').setInnerFBML(data);
	}
 
 	alert('got here');
	// let the user know we're sending the data	
	document.getElementById('ajaxMessage').setInnerXHTML('Submitting your information, please wait...');
 
	// collect field values
	var queryParams = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue() };
	ajax.post(<?php echo $form_URL ?>, queryParams);
	return false;
}
--></script>
[snip]

    $html = nl2br($club->description).'<br/></br><form id="simpleForm" name="createLead" action="'.$form_URL.'" method="POST">

        <!-- successPage and failurePage must be correct addresses on your website -->
        <!-- Begin URLs to fix -->
        <!-- End URLs to fix -->
        
        <input type="hidden" name="leadSourceType" value="FACEBOOK"/>';
        
        if (isSingleLocation($club) == true)
        {
        	$html .= $locationHTML.'<table>';
        }
        else
        {
	        $html .= '<table>
            <tr>
                <td>Location</td>
                <td>'.$locationHTML.'</td>
            </tr>';
        }
        $html .= 
            '<tr>
                <td>First Name</td>
                <td><input name="firstName" type="text" size="40" /></td>
            </tr>
            <tr>
                <td>Last Name</td>
                <td><input name="lastName" type="text" size="40"/></td>
            </tr>
            <tr>
                <td>Telephone</td>
                <td><input name="tel1" type="text" size="16"></td>
            </tr>
            <tr>
                <td>Mobile</td>
                <td><input name="mobile" type="text" size="16"></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input name="email" type="text" size="30"/></td>
            </tr>
            <tr>
                <td></td>
                <td align="left"><button type="submit" onclick="return submitAjaxForm();">Submit</button><input type="reset" value="Clear" />
            </tr>
        </table>    
    </form>
	<p id="ajaxMessage"></p>';
    
    echo $html;



Any ideas?
Was This Post Helpful? 0

#11 Guest_Erin Dalzell*


Reputation:

Re: FaceBook FBML Ajax / PHP interaction

Posted 19 January 2011 - 06:10 PM

I just noticed that the JS was commented out (<!--) but if I remove that it doesn't help.

Thanks
Was This Post Helpful? 0

#12 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5182
  • View blog
  • Posts: 26,879
  • Joined: 10-May 07

Re: FaceBook FBML Ajax / PHP interaction

Posted 19 January 2011 - 07:22 PM

Please note I have not yet looked at your site, or the code you posted.

I just wanted to note that Javascript comments hide the Javascript code from old browsers. Removing the comments will not change anything.

A quick look at your code, & I have to ask. How does facebook have access to your php code?

Quote

require './config.php';


When you are coding for facebook fbml, you must remember that the ajax code is executed by the viewers browser. The ajax code will send GET or POST arrays to your php page for processing, & return with results that it can use dynamically. You can't write php code that is usable on the fbml canvas.
Was This Post Helpful? 0
  • +
  • -

#13 menukadevinda  Icon User is offline

  • D.I.C Regular

Reputation: -7
  • View blog
  • Posts: 470
  • Joined: 14-April 11

Re: FaceBook FBML Ajax / PHP interaction

Posted 21 November 2011 - 02:05 AM

hi ,

I want to passe data from my website to face book site. how to do that? I wish to use <form > to passe data to the site.

thanks in advance,
menunka
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1