Develop customize facebook application for fan page

Posted by mahmud ahsan on September 10, 2009 Facebook, PHP

For many companies or individual, facebook fan page is an integral part of their social media campaign. They want to build up a large follower in their fan page.
Why?

Because, a company want to inform large number of people about their products. An individual want to make large network. As facebook fan page is a part of facebook, so building a large network is quite easy, but for this you have to make your fan page more dynamic, engaging.

In this article I’ll show you how to develop customize facebook application for fan page, that will be more dynamic and interesting for your fans!


Developing fan page application is almost same as developing canvas base application for facebook.  But there are certain limitations in fan page application. I hope you already know how to develop canvas base application, if you don’t know please visit here and learn how to develop canvas application for facebook.

When you’ll setup facebook app, please see the following figures:

* So, you must be set Facebook Pages as checked in the Authentication option.

* And then you’ve to provide a Tab Name and Tab URL, see the following figure. In this case I create tab.php in the app callback directory and set it here.

These twos are the only change when you setup a facebook app for fan page.

now if you want to see how to install an app in facebook fan page, please check this post. Here a procedure is shown to setup facebook app in fan page.

Now I’m describing the technical limitations for fan page app:

1. Fan page app only call to one page  that you provide in the setting like tab.php. So for any other tasks on this page must be done by ajax. So, you can use either Mock Ajax or Normal Ajax.

2. Please look the limitations and policies of Tab Behavior.

3. Remember: in tabbed profile when in fan page, “It doesn’t know who the viewing user is.” And If a viewing user interacts with the tab (like submits a form, takes an action that causes an AJAX load of new content, or follows a relative URL that loads on the tab), that user’s UID is sent to the application

now make a test, in your tab.php file write the following code:

echo '<pre>';
print_r($_SESSION);
echo '</pre>';

you’ll see the following output of your app in fb fan page:

Array
(
 [fb_sig_in_canvas] => 1
 [fb_sig_request_method] => GET
 [fb_sig_is_admin] => 0
 [fb_sig_type] => LOCAL_BUSINESS
 [fb_sig_is_fan] => 0
 [fb_sig_locale] => en_US
 [fb_sig_in_new_facebook] => 1
 [fb_sig_time] => 1252580004.372
 [fb_sig_added] => 0
 [fb_sig_page_id] => XXXXXXXXXX
 [fb_sig_page_added] => 1
 [fb_sig_profile_user] => XXXXXXXXXX
 [fb_sig_profile_id] => XXXXXXXXXXX
 [fb_sig_in_profile_tab] => 1
 [fb_sig_api_key] => XXXXXXXXXXX
 [fb_sig_app_id] => XXXXXXXXXXX
 [fb_sig] => XXXXXXXXXXXXXXXXX
)

look you’ll not get user id or session of the user.

now write this code in you tab.php file

<?php
 if (isset($_REQUEST['name'])){
 echo '<pre>';
 print_r($_REQUEST);
 echo '</pre>';
 return;
 }
?>
<div id="update">
 after form submit</div>
<textarea id="ta"></textarea>
<form action="" id="frm_test" method="post" onsubmit="return false;">
 <input type="text" name="name" size="50" />
 <input type="button" clickrewriteurl='http://callbackurl/tab.php' clickrewriteform='frm_test' clickrewriteid='update' value="submit"/>
</form>

*remember: callbackurl must be replaced by the full callback url that you set when setup the app.

Now check what shows in the page’s tab. You’ll see a form and input field. Now write something and click the submit button. you will see the following output:

Array
(
 [name] => a
 [fb_target_id] => 98736889907
 [post_form_id_source] => AsyncRequest
 [__a] => 1
 [fb_sig_app_id] => xxxxxxxxxxxxxx
 [fb_sig_api_key] => xxxxxxxxxxxxxxxxxxxx
 [fb_sig_page_added] => 1
 [fb_sig_page_id] => xxxxxxxxxxxxxx
 [fb_sig_ext_perms] => auto_publish_recent_activity
 [fb_sig_session_key] => xxxxxxxxxxxxxxxxxxxx
 [fb_sig_user] => xxxxxxxxxxxxx
 [fb_sig_expires] => xxxxxxxxxxxx
 [fb_sig_profile_update_time] => xxxxxxxxxxx
 [fb_sig_added] => 1
 [fb_sig_time] => xxxxxxxxxxxxx
 [fb_sig_in_new_facebook] => 1
 [fb_sig_locale] => en_US
 [fb_sig_is_fan] => 0
 [fb_sig_type] => LOCAL_BUSINESS
 [fb_sig_is_admin] => 1
 [fb_sig_profile] => xxxxxxxxxxxxxxxxxx
 [fb_sig_is_mockajax] => 1
 [fb_sig] => xxxxxxxxxxxxxxxxxxxx
)

look in the output you’ll see [fb_sig_user] and [fb_sig_session_key] of the viewing user. You’ll see the actual output I just replaced them by xxxxxxxxxxxxxx. As after user interaction you’ll get viewing user’s uid and session key, now you can do whatever you want. You can call facebook api or run FQL to get data behalf of user for your app purpose.

In the example i showed using mock ajax, you can also use normal ajax. Now i’m showing how to use normal ajax. Replace all the code of tab.php by the following:

<?php
 if (isset($_REQUEST['name'])){
 echo 'Your name is : ' . $_REQUEST['name'] . '<br />';
 echo 'Your user id is: ' . $_REQUEST['fb_sig_user'];
 }
?>

<script type="text/javascript">
 function sub(){
 var ajax                = new Ajax();
 ajax.responseType       = Ajax.RAW;

 ajax.ondone        = function(data){
 new Dialog(Dialog.DIALOG_POP).showMessage('Status', data, button_confirm = 'Okay');
 }

 ajax.onerror = function(){
 new Dialog(Dialog.DIALOG_POP).showMessage('Error', 'Loading error! Please try again!', button_confirm = 'Okay');
 }

 var params = {'name' : 'mahmud'};
 ajax.post('http://callbackurl/fbapp_test1/tab.php', params);
 return true;
 }
</script>

<form action="" id="frm_test" method="post" onsubmit="return false;">
 <input type="text" name="name" size="50" />
 <input type="button" value="submit 2" onclick="sub();"/>
</form>

now again write someting and click submit. You’ll see a popup dialog and some data where you’ll see user’s id and session key.

*remember: callbackurl must be replaced by the full callback url that you set when setup the app.

You can use html/css/fbml in your app to render in fan page. But always remember, unless user intereact you couldn’t retrieve user’s id. You can also connect your mysql database from php script and can store user’s id for later use, Suppose if you want to develop a quiz game for your fans, and each of the visitor can see the photo and name of users who already played the game. Then you must store the user’s id who played your game already.

So make dynamic app for your fan page, and make your fans more engaging.

Have fun!

Related Posts

• Customize facebook fan page by static fbml app

Tags: customize facebook app for fan page, fan page, fan page app, fan page app customization, fan page customization, hit fan page, how to make fan page app, more users in fan page, tips of fan page