Develop customize facebook application for fan page
Posted by mahmud ahsan on September 10, 2009 in
Facebook, PHP | 60 Comments
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
If you think this article kicked ass, subscribe to the RSS feed or follow me on Twitter! Share with your friends, or leave a comment below (or better still, do both!)Comments (60)
[...] When will you develop your customize application for facebook page? If you need to use any scripting language like php, asp, jsp. You may need to call some facebook api then you should choose this solution. Click here to see how to develop customize facebook application for fan page [...]
hi,
sorry i posted my question with wrong post.
i want to develop an application for fan page where i will have a form and store the data on the backend.
when i create the new application in facebook what render method should i choose : fbml or iframe?
can you provide a link to complete source code for this sample?
thanks
puneet
its very easy app. you have to pass data by javascript and ajax when user will click submit button. choose fbml.
Can I do what puneet is asking with an iFrame app? I already have written all the user input error checking in php for my “regular” website.
I’d like to just import the same form into my facebook app, but I am having tons of problems.
@Chris, in facebook fan page, i’m not sure whether iframe will work or not, please RnD about it.
Thanks for the info. I have a simple app with a flash banner and a wall below using fb:comments. I am getting an error when I place the app on my fan page. Do i have to create a separate php file for the tab? and if so do I link to the tab.php from my index page?
There are still some limitations in facebook page. So may be fb:comments will not work. You can develop your own commenting system using php/javascript. And create a separate php file like tab.php and set in the developer setting.
Thanks, been trying to figure out applications on facebook page tabs for a day now. This solved it.
hi,
i have been able to create a custom application for the fan page (thanks a lot for your post). now is it possible to have a web form on the page (eg. tab.php) that allows a user to upload a file in addition to other text data?
thanks
pundiv
@Puneet, ofcourse its possible. After file upload and entering text data your form action should be a specif url then you need to redirect the page, or in other way, you can upload file using iframe and form action might be a specific url.
i’m trying to add iframe inside facebook page i see it on this page
http://www.facebook.com/ifan.page.design
http://www.ifandesign.0fees.net/index.html
but still can’t figure out how they did it
ideas anyone?
@Fadi, please try fb:iframe and learn some techinques to work within iframe, i hope you can develop like that using iframe/javascript and ajax.
Ok. Can you give me any idea how to use the publish_stream the extended permission ?
@Arif, please check http://wiki.developers.facebook.com/index.php/Facebook.showPermissionDialog
Hi,
I created a canvas page for my application that can be used on fan pages, and thanks to your article it is actually showing up! Thanks. What I would like now is to have a link inside that canvas page that users can click to go to my application. The links I have now all try to go to the application but from within that tab, which doesn’t work. I need to the link to take them to my application like normal. Any ideas?
Thanks
Nevermind – I got it to work. Links need to point to a page that requires login, but because I had logic not to require login on a fan page that wasnt happening.
Other than fb_sig_profile_user, is ther a way to tell who the page admin or owner is? For instance if the page was a business page (Joe’s Plumbing) creatd by Joe, how can I get Joe’s ID?
Please check http://wiki.developers.facebook.com/index.php/Pages.isAdmin
Thanks, I diddnt know about that. But once I determine the ID is not the admin of the page how do I go about getting the admin of that page?
huh. nice style
Hi,
I have created a business page and added application to a tab.
I want to retrieve the uid of the users who visit the tab. I am using $_POST['fb_sig_profile_user']
But it give the page id not the uid.
Actually i want to check whether a visitor has actually voted on a particular issue. For that i have to retrieve uid.
I used another alternative that is $_REQUEST['fb_sig_user'] but the uid is available after visitor has voted.
I cannot check whether he has already voted.
Please help me on this.
Thanks
Pankaj
@Pankaj, yeah you couldn’t get uid of visitor until they interact with your application. So make a button like Proceed and when user will click it make an ajax call, and you’ll get user id and based on that show him what you want.
Good blogpost, thanks so much!
This is currently bugged, everyone please go vote for it to get fixed
http://bugs.developers.facebook.com/show_bug.cgi?id=9703
thanks for your excelente guide
i created a aplication for facebook page how to use twitter in my app ? i don´t have jquery?
@ccarrasco, please checkout the following links
http://www.facebook.com/topic.php?uid=2231777543&topic=6543
http://www.insidefacebook.com/2009/08/20/indeed-facebook-launches-tool-for-facebook-pages-to-syndicate-their-posts-to-twitter/
can we add multiple FBML tabs to a fan page? how is it possible? or is there another similar application that allows to customize the Fan Page
@Andy, no if you develop customize application for fan page you can only add one tab. But facebook developed an application named Static FBML only that application has the facility to add multiple tabs in the same page.
@Andy, I’ve installed 10+ FBML tabs on my fan page.
@Jonny Chan, listen you misunderstood us. Using Static FBML application you can create more than 1 Tab and add in your facebook page. But if you develop a application you can get only one tab for that application for a single facebook page. It doesn’t mean that you can’t add 10 different types of tab in a page.
Thanks a lot for your answers. I found it! I actually overlooked the link at the bottom of the application where it says “add another fbml tab”
Yeah, I guess I overlooked at the conversations. You are right, Mahmud. Thanks for pointing that out =)
The mock ajax example works great. The normal ajax example…not so much. I present the form in the tab, get a user to submit it, but no fb_sig_user in the $_REQUEST. Has facebook changed this policy? I had already built my own normal ajax tab that was running into this issue and I felt like I was going nuts.
Please check this out as well…I might still be going nuts.
Does Facebook still send POST data to the tab PHP page from the fan page? I am getting nothing from:
print_r($_SESSION);
Any ideas?
Are you using ajax to send data to server ? And it would be print_r($_REQUEST); not $_SESSION.
No, it’s PHP. I tried this to test and am getting no POST data at all:
<?php if ($_POST) { echo htmlspecialchars(print_r($_POST, true)).'\n'; } else echo "No POST "; if ($_GET) { echo htmlspecialchars(print_r($_GET, true)).'\n'; } else echo "No GET "; } ?>Facebook claims that POST data is sent to the tab page from the profile (http://developers.facebook.com/docs/guides/canvas/#tabs) and I am hoping to be getting data from a fan page tab. Bottom line – I am trying to get the ID of the fan page that is calling the app from it’s tab!
Mahmud – I just discovered what is going on. If the application is added from the Facebook directory to the fan page tab, the POST data is being sent. In the case where the application has not been submitted to the directory, but added to the fan page via http://www.facebook.com/add.php?api_key=YOURAPIKEY&pages then Facebook is not sending any POST data.
Thank you for the response and fine article!
Jeff
Addendum: in the application’s settings under Migrations, you need to disable the “new SDKs” option for the POST data to come through from the fan page to the application. I don’t what this means for future functionality, but disabling it enables the application to work, whether or not it was loaded from the Facebook directory.
Confusing situation! Lets see what happen next. Thanks for your information.
In normal ajax example, you must include this code:
ajax.requireLogin = true;
ehm, normal ajax, not mock ajax!
(mahmud, could you fix my blog comment?)
Thanks Michele for your information. I fixed your comment.
I’m using social plugins on a fanpage app.
App is displaying news from a remote site.
I use mock ajax calls to display previous news. After the mock ajax content update the social plugins are not loading.
Any ideas?
Hi Mahmus,
Excellent article..
the mock ajax sample worked like a cham.. when i click submit it automatically asked for permission using a fb popup.. and when I allowed i got user id..
But when I tried the Normal Ajax sample it didnt ask for permission or given the user id.. I followed article exactly as you mentioned.. can you plz check whether the Normal Ajax sample work as the way you mentioned and correct me if am doing anything wrong..
Thanks and Best Regards,
Anz
I got the Normal Ajax also working by simply adding
ajax.requireLogin = true;
Thanks again for the nice article.. I wish I could see this article earlier.. I spent hours searching on how to get the user id in fan page tab.. and finally i reached in ur site…
Mahmud,
Your above article is really great.
One last question. I am not able to get the tab.php to work.
I copied the code given by your blog and replaced the callbackurl, but when I click on submit, nothing happens.
Not able to figure out what I missed. Will greatly appreciate your help.
regards,
Javed
Mahmud,
I think I know why ajax does not run on my app. I contacted my web hosting and they said the hosting is done on unix and they do not support AJAX. So is it true that I would need windows hosting to support ajax?
is there any way to run ajax on unix/linux based hosting. My hosting is done with fatcow.com
thanks for your answers
Nope, I’m not agree with you. I also use linux server and any type of ajax is working there. Ajax is nothing simply bypass the call using javascript, so your hosting guys also talked like fool. Or you can change hosting to hostgator, hostmonster, umbrahosting all are linux based and will work.
Mahmud,
also wanted to know if I can get this (that is session established on fan page) working without using AJAX, because my hosting is on linux server.
without ajax it’s not possible
Mahmud,
thank you for the answers. I am sorry to disturb you again. But I tried it on hostgator and the mock ajax again had the same result (nothing happens on click). Maybe I am missing something. Request you to please help.
Below link is the actual code in text format:
http://www.stoppullinghairout.com/wp-admin/acess/fb_coolres/tab.php.txt
My app settings:
Canvas Callback URL
http://www.stoppullinghairout.com/wp-admin/acess/fb_coolres/
Connect URL
http://www.stoppullinghairout.com/wp-admin/acess/fb_coolres/
Canvas URL
http://apps.facebook.com/coolres/
FBML/iframe
FBML
Tab URL:
http://apps.facebook.com/coolres/tab.php
Mahmud,
Just following up to check if you have any other suggestions for me. Hopefully you had a few minutes to look at the above mock ajax, which is not working for me even on host gator. I am new to facebook programming and Ajax and any advice will be a lot of help for me….
thanks in advance, Javed
your link showed me
Warning: mysql_connect() [function.mysql-connect]: Unknown MySQL server host ‘valuessscom1.fatcowmysql.com’ (2) in /home/drchad14/public_html/stoppullinghairout.com/wp-admin/acess/fb_coolres/index.php on line 221
Unknown MySQL server host ‘valuessscom1.fatcowmysql.com’ (2)
Why you’re using wordpress url, just use plain url for the app like http://yoursite.com/yourfacebookurl, sometimes may be some problem happen for .htaccess file if you used that for wordpress.
I’m very busy for some days as I’m working in iPhone. Otherwise I may want to look your code. But lets try to use plain url not wordpress url.
My app does not work on customer’s page. It works great on several test pages so I think the code is ok.
Checking customer’s page with firebug I get this response for the tab request:
for (;;);{“error”:1346001,”errorSummary”:”Validation Error”,”errorDescription”:”",”errorIsWarning”:false,”silentError”:1,”payload”:null}
I guess it has to do with some privacy setting, but can not find any useful information.
Any ideas?
thanks
check the server and server setting of your customer and compare those settings with your own server.
It’s running on same server but is installed to several pages. I think it was some cache problem, next morning it worked also on customers page.
Thanks
Can you show us how to do an API call once you get the userid and session key?
facebook.php library has a method setSession() using that you could set session for user if you know the user’s uid, session key. I think in new php sdk you have to generate session key based on user’s uid and session_key and then using setSession() you’ve to set the session.
I assume that the user must have already authorized the application for it to transmit a user ID in the request. When I submit an Ajax request there is no ID in the $_Request. Is there a way to get the user ID without the user authorizing the application?
Hello,
Thanks for this great post, i was looking for this information since long time, you gave me the most necessary, logic.
I wanted to integrate http://apps.facebook.com/onlineconfessions/ in my fan page, but i am not able to do it.
So can you please tell me how can I integrate this application in my fan page as an extra tab.
Your help will be a great help to me.
Ashish