Lets same you have a fan page on Facebook and want to add a contact form or a questionnaire there. Answers will be stored in PHPRunner database on another website.
[size="3"]1. Create PHPRunner application. [/size]
We are going to use one of Add pages as a contact form. In our example this contact form address is http://demo.asprunner.net/volinrok_yahoo_com/Project288/Cars_add.php
[size="3"]2. A few minor tweaks in PHPRunner application[/size]
Facebook gives us a window of about 520 pixels wide. We need to make sure our form fits there. For this purpose proceed to the Add page in Visual Editor and switch to HTML mode. Make sure that main table is left aligned:
<TABLE id="center_block{$id}" border=0 cellSpacing=0 cellPadding=0 align=left>
in visual mode on the same page remove 'Cancel' and 'Back to List' buttons.
then add the following code to AfterAdd event of the same table:
echo "Thank you for your submission!";
exit();
[size="3"]3. Facebook integration. [/size]
I assume you have a fan page already. Make sure you upgraded it to new layout. Many Pages will see a big banner at the top of their Page announcing the upgrade. If you don't, you can click here to upgrade your Fan Page.
Now you need to install the Facebook Developer Application. You can do so proceeding to http://facebook.com/developers URL.
If this is your first time installed the Developer Application, you will see the Request for Permission dialog. Click 'Allow' to proceed. You'll have to verify your developer account providing either your credit card or a mobile phone number. It only takes a few seconds.
[size="3"]4. Create Facebook Application. [/size]
Facebook recently announced iframe support in Facebook apps which makes PHPRunner form integration really easy.
While you are on developer page click '+ Set Up New App' button.
Enter your app name and agree to Facebook Terms.
After Security Check your application is created.
[size="3"]5. Setup your application.[/size]
On About tab you can modify general application settings (optional). The most important stuff is located under Facebook Integration tab.
Under 'Canvas URL' enter your application path. If our Add page URL is http://demo.asprunner.net/volinrok_yahoo_com/Project288/Cars_add.php type http://demo.asprunner.net/volinrok_yahoo_com/Project288/ into 'Canvas URL' field.
Under 'Page Tabs' enter 'Tab Name' and 'Tab URL'. Tab Name is the name to appear on your Fan Page as a separate tab. URL is the Add page name, Cars_add.php in our example.
Save changes.
[size="3"]6. Add Facebook application to your Fan Page[/size]
Once your application is saved click Application Profile Page link on the right side of your application page.
Now click the Add to My Page link on the left. In the popup window click Add to page link next to your fan page name.
[size="3"]7. This is it.[/size]
Now you can proceed to your fan page and see your form under My custom tab tab.
Here is how it looks on PHPRunner Fan Page:
http://www.facebook.com/apps/application.php?id=192137404153103#!/pages/PHPRunner/101291953274682?sk=app_166913666691502
Enjoy!
This article uses parts of excellent Add an iFrame Application to your Facebook Fan Page tutorial by HyperArts.
Sergey Kornilov admin