Develop customize facebook application for fan page


facebook_platformFor 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!

fb_page_develop0

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:

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


fb_page_develop2

* 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!

mahmud ahsan

Computer programmer and hobbyist photographer from Bangladesh, lives in Malaysia. My [Business | Twitter | Linkedin | Instagram | Flickr | 500px]

You may also like

120 Comments

  • puneet
    September 11, 2009 at 3:24 am

    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

  • Mahmud Ahsan
    September 11, 2009 at 3:33 am

    its very easy app. you have to pass data by javascript and ajax when user will click submit button. choose fbml.

  • Chris
    September 11, 2009 at 5:38 am

    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.

    • mahmud ahsan
      mahmud ahsan
      September 11, 2009 at 6:02 am

      @Chris, in facebook fan page, i’m not sure whether iframe will work or not, please RnD about it.

  • Scot
    September 18, 2009 at 9:39 am

    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?

    • mahmud ahsan
      mahmud ahsan
      September 23, 2009 at 10:45 pm

      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.

  • Stephen
    October 7, 2009 at 9:52 am

    Thanks, been trying to figure out applications on facebook page tabs for a day now. This solved it.

  • puneet
    October 14, 2009 at 3:50 am

    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

    • mahmud ahsan
      mahmud ahsan
      October 14, 2009 at 9:53 pm

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

  • Fadi
    October 20, 2009 at 12:31 pm

    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?

    • mahmud ahsan
      mahmud ahsan
      October 21, 2009 at 3:46 pm

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

  • Arif
    October 30, 2009 at 6:35 pm

    Ok. Can you give me any idea how to use the publish_stream the extended permission ?

  • Eric
    November 6, 2009 at 2:56 am

    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

  • Eric
    November 6, 2009 at 3:05 am

    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.

  • Eric
    November 7, 2009 at 2:06 am

    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?

  • mahmud ahsan
    mahmud ahsan
    November 7, 2009 at 2:21 am

    Other than fb_sig_profile_user….

    Please check http://wiki.developers.facebook.com/index.php/Pages.isAdmin

  • Eric
    November 7, 2009 at 2:30 am

    Other than fb_sig_profile_user….

    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?

  • PrellZex
    December 13, 2009 at 3:30 am

    huh. nice style 🙂

  • Pankaj
    December 29, 2009 at 4:50 pm

    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

    • mahmud ahsan
      Mahmud Ahsan
      December 30, 2009 at 12:01 am

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

  • Josiah Reinkemeyer
    March 27, 2010 at 8:32 am

    Good blogpost, thanks so much!

  • Rick
    April 27, 2010 at 6:43 pm

    This is currently bugged, everyone please go vote for it to get fixed

    http://bugs.developers.facebook.com/show_bug.cgi?id=9703

  • ccarrasco
    May 1, 2010 at 4:12 am

    thanks for your excelente guide 😀
    i created a aplication for facebook page how to use twitter in my app ? i don´t have jquery?

  • Andy Mutt
    May 6, 2010 at 7:12 pm

    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

  • mahmud ahsan
    mahmud ahsan
    May 6, 2010 at 8:26 pm

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

  • Jonny Chan
    May 7, 2010 at 2:33 am

    @Andy, I’ve installed 10+ FBML tabs on my fan page.

  • mahmud ahsan
    mahmud ahsan
    May 7, 2010 at 4:07 am

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

  • Andy Mutt
    May 7, 2010 at 1:25 pm

    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” 🙂

  • Jonny Chan
    May 8, 2010 at 12:00 am

    Yeah, I guess I overlooked at the conversations. You are right, Mahmud. Thanks for pointing that out =)

  • John Young
    May 13, 2010 at 12:19 am

    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.

  • Jeff Whitehead
    May 25, 2010 at 11:15 pm

    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?

    • mahmud ahsan
      mahmud ahsan
      May 25, 2010 at 11:54 pm

      Are you using ajax to send data to server ? And it would be print_r($_REQUEST); not $_SESSION.

      • Jeff Whitehead
        May 26, 2010 at 12:12 am

        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!

  • Jeff Whitehead
    May 26, 2010 at 1:00 am

    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

    • Jeff Whitehead
      May 26, 2010 at 2:16 am

      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.

      • mahmud ahsan
        mahmud ahsan
        May 26, 2010 at 3:02 am

        Confusing situation! Lets see what happen next. Thanks for your information.

  • michele
    May 26, 2010 at 4:27 pm

    In normal ajax example, you must include this code:

    ajax.requireLogin = true;

  • michele
    May 26, 2010 at 4:29 pm

    ehm, normal ajax, not mock ajax! 😀 (mahmud, could you fix my blog comment?)

    • mahmud ahsan
      mahmud ahsan
      May 26, 2010 at 6:31 pm

      Thanks Michele for your information. I fixed your comment.

  • garancsi
    June 1, 2010 at 3:24 pm

    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?

  • Anz
    June 7, 2010 at 4:07 pm

    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

  • Anz
    June 7, 2010 at 6:31 pm

    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…

  • Javed
    June 10, 2010 at 8:18 pm

    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

  • Javed
    June 11, 2010 at 12:56 pm

    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

    • mahmud ahsan
      mahmud ahsan
      June 11, 2010 at 4:17 pm

      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.

  • Javed
    June 11, 2010 at 2:04 pm

    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.

  • Javed
    June 12, 2010 at 1:49 pm

    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

  • Javed
    June 14, 2010 at 11:22 pm

    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

    • mahmud ahsan
      mahmud ahsan
      June 15, 2010 at 2:13 am

      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.

  • garancsi
    June 15, 2010 at 2:19 am

    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

    • mahmud ahsan
      mahmud ahsan
      June 16, 2010 at 12:37 am

      check the server and server setting of your customer and compare those settings with your own server.

      • garancsi
        June 18, 2010 at 3:04 am

        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

  • Rohan Dighe
    June 15, 2010 at 4:00 pm

    Can you show us how to do an API call once you get the userid and session key?

    • mahmud ahsan
      mahmud ahsan
      June 16, 2010 at 12:35 am

      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.

  • Dan Cathers
    July 2, 2010 at 12:04 pm

    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?

  • Ashish Kulkarni
    July 26, 2010 at 10:45 pm

    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

  • keitai
    September 8, 2010 at 3:23 pm

    Hi Mahmud,

    Tx for this piece of code it’s a good start for me.

    One question at the moment:
    for the .js part

    why doesn’t this work:

    var params = {‘name’ : ”};

    in the popup name is empty??

    regards

  • keitai
    September 8, 2010 at 4:14 pm

    1 more question

    how do i set the form action in tab.php? so the response is also in FB iframe??

    <form action="http://www.mydomain.com/newsletters/subscribe.php

    and deletting onsubmit="return false;" seems to work but the response is opened in a new browser window.

    Should i use jquery to post the data???

    regards

    • mahmud ahsan
      mahmud ahsan
      September 12, 2010 at 11:26 pm

      Tab application yet not supported iframe. So you can post user your server url to save form data and then redirect user to the tab page. Or you can use ajax to submit form data. In tab application currently you can’t use either iframe or jquery.

  • Naveen
    September 15, 2010 at 4:06 pm

    Hi Mahmud,

    Thank you for this great article. It helped me to get my fan page application up and running on many fan pages. I have a question though.

    Is it possible to know or fetch all the fan page ids which have added my application ? Like, Anyone can go to the application profile page and click on “Add to my page” and have my application on their page. But, How will I know, who all added my application to their fan pages ?

    I hope I am clear with my question.

    Cheers,
    Naveen

    • mahmud ahsan
      mahmud ahsan
      September 16, 2010 at 1:12 pm

      I’ve no idea if there is a way or not.

      • Naveen
        September 16, 2010 at 3:25 pm

        Okay, Thank you for responding.

  • Art
    September 22, 2010 at 8:00 am

    Hi, thanks for the info.

    I have one note to add: this will not work if you set “Canvas Session Parameter” to enabled in the advanced app settings ( no vars will be printed )

    • mahmud ahsan
      mahmud ahsan
      September 22, 2010 at 10:53 am

      Facebook is changing their authentication system and other things. Currently some are in beta stage. By the way, application development for fan page will be easier soon, because facebook will support iframe in tab application soon.

  • Waqar Alamgir
    October 11, 2010 at 4:11 pm

    Salam mahmud ahsan,

    I have a serious problem for fan pages. I am using Graph API and I have to use extended permissions like email, birthday, profile info and stream publish etc.

    So, I first create an splash screen, as we don’t have user info at that time, then I use simple ajax to navigate to next page where I can get user info using print_r($_REQUEST);

    But when I use simple Ajax (On continue button click) Fan page tab gives me basic info permission only and my application shows extended permissions.
    fbjsAjax(‘index.php’ , ‘mainDiv’ , ‘mainSpinner’ , ” , 0);

    And when I use
    /****************************************/
    onclick =”Facebook.showPermissionDialog(‘publish_stream,read_stream,user_photo_video_tags,email,user_birthday,user_location,user_likes,user_about_me,offline_access,user_photos’ , ondone , null , null);”

    function ondone(permissions)
    {
    if(permissions==’publish_stream,read_stream,user_photo_video_tags,email,user_birthday,user_location,user_likes,user_about_me,offline_access,user_photos’)
    {
    fbjsAjax(‘index.php’ , ‘mainDiv’ , ‘mainSpinner’ , ” , 0);
    }
    }

    /*******************************************/

    The ajax.post doesn’t not work (in fbjsAjax function), until I refresh fan page.

    Facebook documentation is not enough to solve such issue.

    What your strategy will be in this case. Looking for a solution that works for extended permissions. I am not facing issues for my Facebook app.

    Please Reply, Thanks in Advance!
    Best,
    WAQAR ALAMGIR.

  • Waqar Alamgir
    October 11, 2010 at 4:17 pm

    One more thing, when i use simple ajax, allow pop-up comes automatically regardless of include session file or not.

    and nobody wants to pop-ups to allow, one for joining application and other for extended permission.

  • Thomas Pfeiffer
    October 14, 2010 at 3:34 pm

    Hi Mahmud,

    great site. I’ve searched a lot for a great compendium like yours.

    I face the same problem as Waqar: How can I get extended permissions from within a fanpage app?

    I would appreciate to hear/read from you.

    Thanks in advance,

    Yours,
    Tom

  • Waqar Alamgir
    October 15, 2010 at 1:20 am

    Hey,
    I am still searching for that but no results! and I don’t understand why fanpage pop-up ask for basic info only, is there any way we can set permissions directly to fanpage app so that every times it ask for extended permissions.

    Thomas Let me know if you got the solution. I’ll appreciate it. Facebook has to put a sample code for fanpage like they give example.php for apps with PHP SDK.

    Thanks!
    Best,
    WAQAR ALAMGIR.

  • Thomas Pfeiffer
    October 15, 2010 at 1:43 pm

    Hi Waqar,

    have a look at this tread, maybe you can find a solution here:
    http://forum.developers.facebook.net/viewtopic.php?id=67267

    Let me know, if you get it.

    Tom

  • Thomas Pfeiffer
    October 15, 2010 at 4:13 pm

    Hi,

    finally, I got it to work, see my last comment for a link with all the details.

    As I go on, the next probs are coming up 🙂
    I would like to use e.g. FB.api, therefore I made a FB.init-call, but that didn’t work on a Fanpage-Tab.
    Any ideas?

    Thanks in advance,

    Tom

  • Waqar Alamgir
    October 15, 2010 at 5:02 pm

    Hi Tom,

    Its not working properly for me.
    First thing after clicking submit. Pop-up comes which is great but after allowing i can not navigate to next page. Unless i refresh the fan page.
    Secondly if user click on Don’t Allow another pop-up comes which is not good!

    Do you have any idea how to resolve this. I read the forum post. Is yours working. Below is the link.
    http://www.facebook.com/pages/Graph-Test-Page/142900469058000?v=app_155058497857893

    I have no idea for FB.api as I am not using it.

    Thanks,
    Waqar Alamgir

  • Thomas Pfeiffer
    October 15, 2010 at 5:06 pm

    Hi Waqar,

    it is the same for me as for you.
    First step is done, but the journey is long. :/

    Maybe, we should test the loginStatus (or whatsoever) and in the case, that the user is being logged in, we can ommit the DialogBox.
    About your other issue I have no idea, yet. Sorry,

    Tom

  • Waqar Alamgir
    October 15, 2010 at 6:43 pm

    Hi Tom,

    I actually do two things.
    1. ajax.requireLogin = false;
    2. added condition in callback of permission dialog
    if(permObj == ‘publish_stream,email,user_birthday,user_location,offline_access’)
    {
    // ajax code here
    }

    If i do so my Don’t Allow is working perfect. But the main problem i found in this line
    $fbme = $facebook->api(‘/me’);
    which is giving me exception after allowing it and says access token is invalid. At this step what we can do?

    Thanks Alot,
    I appreciate your feedback!

    Best,
    Waqar Alamgir

  • Thomas Pfeiffer
    October 15, 2010 at 6:50 pm

    @Waqar Well, I think, these are two different “doors” to the app. The first ist Javascript, the latter in php. Both need extra authentication.
    Try to find a way to interact via Javascript.
    This is the solution I’m working on, but I have nothing found yet.

  • Marco
    October 21, 2010 at 3:26 pm

    Hi,
    any ideas wether this “Installable To” option is still available?
    Regards

  • Waqar Alamgir
    October 22, 2010 at 12:51 am

    Hi,
    Are you talking about Extented perms Marco.

    Best,
    Waqar Alamgir

  • Matt
    October 27, 2010 at 11:28 am

    Great stuff, I’m learning all my FB coding from this site.

    Once the user interacts with the fan page, are they authenticated? Now that I have their user id on ajax postback, how do you get all of the user information?

  • cindy
    October 29, 2010 at 1:57 pm

    Hi
    I got a problem with add application on my fan page.
    when I click the tab, nothing will display.
    thanks

    • Shallum
      October 29, 2010 at 8:05 pm

      i have the same problem the application canvas contents not loading in fanpage tab?
      also im unable to set autoresize og canvas?

      • cindy
        November 30, 2010 at 9:45 am

        Hi, I just resolve this problem, The application you created must only contain the content you want to show. without , , tags.
        Good luck

  • Bibhash
    November 29, 2010 at 2:34 pm

    Hi Mahmud,

    Having a word with you after a long time. I am developing an application which will manage 2 fan pages. I want to know how to set the fan page’s status through the facebook application. Can you suggest any start ups from where I can think of developing this application ?

    Regards,
    Bibhash Das.

    • mahmud ahsan
      mahmud ahsan
      November 30, 2010 at 11:53 am

      You can use status update api to update status of your fan page.

  • udop
    December 2, 2010 at 1:06 pm

    Hi,
    I have a problem. I tried to check and understand the great example. When I try it as demo everything runs great, but when I try to use it in my app, I get the user information, but when i click on “invite” or “home” I get the 403 Error “access denied” and I can see my profil-pic. I don’tknow, what I could do.
    Regard, Udo

  • Breklin
    December 4, 2010 at 6:26 am

    Does this allow you to get the user id’s and liked “dates” of your page’s fans? I was trying to run a query against the page_fan table but it is only indexable by user_id.

    We are trying to run promotions with the winner who has liked our page between a set date range.

    I’m super frustrated that I cannot get it to work the way I need it to. Any suggestions would be helpful.

    Thanks in advance!

  • shrawan
    December 22, 2010 at 7:32 pm

    Hello,

    I have created my fanpage with submit form but form is not working. it’s not sending mail to my email addresss:

    facebook fanpage link:
    http://www.facebook.com/pages/Web-n-graphics/146029865437226?v=app_7146470109

    php code on my server:
    <?php

    $email.= "Name : “.trim($_POST[‘name’]).””;
    $email.= “Email : “.trim($_POST[’email’]).””;
    $email.= “Message : “.trim($_POST[‘message’]).””;
    $email.= print_r($_POST,true);

    $headers = “From: shrawankumarshrestha@hotmail.com\r\n”;
    $headers .= “Content-Type: text/html”;
    mail(
    “Shrawan”,
    “Contact from Facebook”,
    $email,
    $headers
    );

    echo “Mail Completed”;

    ?>

    ajax code in my fbml:

    my submit form code structure:

    Submit Quary

    Name

    E-mail

    Message
    Type your message

    Please anyone help me why I am not getting email from my submit form?

  • Erwan Ripoll
    December 28, 2010 at 4:59 pm

    Hello all!

    Looking through all the posts and being relatively new to the FB app world, I’m a bit confused regarding the whole Fan Page -> Tab -> App and User ID situation.
    Going through the posts here, you guys talk about various options that need to be set in App settings, some of which don’t seem to be present anymore…
    Anyway, here’s my question:

    – I have an app on a fan page tab (written in PHP and using the FB framework)
    – I understand I can get the user ID until the page’s visitor actually interacts with my app. So I have a form that is sent with AJAX back to my app.
    – I ONLY need the user ID, and I don’t want the user to have to authorize the app for me to get his ID.
    – I have followed various tips all over the net and I don’t seem to manage to get the user ID sent with the POST.

    The problem I face is that all the things posted here and everywhere else seem to reference methods or techniques either no deprecated or changed lately.

    Sooooo… Could anyone tell me as of today (Dec 28th 2010) how to get, through Ajax, without the user authorizing, the visitor’s ID back to my PHP app? Which methods to use and how to set the app within Facebook app settings?

    Would really appreciate a quick answer from anyone who can help… Thanks much in advance!!!

    • Breklin
      December 28, 2010 at 10:44 pm

      I believe it might be against the FB privacy policy to capture the user ID without explicit permission. Check the updated FB policy to confirm. You obviously do not want to violate the policy for risk of being banned from FB for illegal usage of a user’s data…

      However, once you receive your AJAX response you should be able to capture that UID of the user currently interacting with your page via the PHP FB API.

  • cygnis media
    December 30, 2010 at 3:49 pm

    Nice post, great detail. I would have liked to see the costs that are associated to it so I could add to my business case justifi cations to use the technology. Keep up the good work! Great Job!!! Informative and attention keeping!
    Your article is very informative and the use of graphics adds to understanding the process. I think some of your sentences are too long, and a few minor commas are missing. One thing I was taught, never end a sentence with a preposition.

  • Replica jeans
    December 30, 2010 at 5:29 pm

    This is very helpful website..

    This is very helpful and informative blog….

    Thanks for sharing information..

    nice one i really like it..

    It is really nice for me to see you and your great hardwork again.Every piece of your work look excellent.Looking forward to hearing more from you!

  • seo sem services
    January 3, 2011 at 2:35 pm

    nice posting and helpful info.

  • blagorod
    February 1, 2011 at 8:32 pm

    did anybody success getting user permissions in app…I mean in fan page tab?

  • Breklin
    February 1, 2011 at 11:14 pm

    @Blagorod: Facebook does not permit access to users’ data in the tab. You can get their userid but no other permissions. You would need a canvas app for that. You can place a form in a tab and use FB Ajax to submit it to your database without having to ask them for permissions.

  • Joy
    February 3, 2011 at 3:22 am

    Hello. I tried all your steps, but when I hit the submit button I didn’t receive the array with fb_sig stuff, instead the window with required basic permissions is asking me to allow the app to access my data. You said that It doesn’t know who the viewing user is, so there must be interact with my tab app – if a user like my page, is it possible to pass the fb_sig info to my script? Thanks

    • vinay nishad
      February 10, 2011 at 12:41 pm

      Hello Joy,

      Yes we can check the user only after when he will be interacting with our application (use ajax call).

      Thanks,
      Vinay Nishad

  • vinay nishad
    February 10, 2011 at 12:39 pm

    Hello Mahmud ahsan,

    Can you tell me weather image uploading on our server from fan page is possible or not? if so how , i have tried the same using MOCK ajax but not working for me. Please suggest me some alternative.

    Thanks.
    Vinay Nishad

    • mahmud ahsan
      mahmud ahsan
      February 10, 2011 at 10:47 pm

      As far as I know, you couldn’t upload file from fan page app. You’ve to redirect user to either facebook iframe app or your site to upload file.

      • Waqar Alamgir
        February 17, 2011 at 1:26 am

        Hi, You can use fb:iframe in your fanpage, the page will contain simple image uploading or you can create whole form.

  • Naresh Thakur
    February 11, 2011 at 11:22 am

    Hi
    I found your article http://thinkdiff.net/facebook/develop-customize-facebook-application-for-fan-page/ very much interesting and I want to do the same. But I am able to find Facebook Pages option under Aunthentication in facebook application. May be facbook has removed it. But now I don’t know how to start with it. Can help me please?

    Thanks!
    Naresh Thakur.

  • Amir Hamza
    March 8, 2011 at 11:08 am

    Hi,
    I need some help to customize “like” button functionality on an image.
    Here is a referece URL where you can see practical example.
    http://www.facebook.com/FanPageEngine
    When user press “Like FanpageEngine” button the functionality of like is done and the image is changed to “Continue” button.
    Can you give me such type of customization code or something.
    Thanks
    Amir

  • lior
    March 20, 2011 at 11:42 pm

    Hi,
    Great tutorial,
    i hope someone can help me with my problem,
    i dont know in witch fan page my app is added,
    i want to redirect users back to the tab they where after they accept my app but i can’t see anywhere the url of
    the tab and i don’t know if i can use the id of the page to get the url.

    thanks
    lior

  • Asanka
    April 5, 2011 at 7:14 pm

    Hello,
    Thank you for your article.
    Can I ask you a question about application for a fan page.
    I have made an application and I could successfully install to a user page.
    But I want to install it to my fan pages too.
    During the installation when even when I choose my fan page from a drop down menu, it installs but returns to a user page.

    I have read your article and saw that there should a check mark (image 2).
    I can not find it in the Appliaction settings page. It looks like facebook has changed dramatically.

    Could you please suggest how could I set that?
    Any advice is appreciated.
    Thank you
    Kindest regards
    Asanka

    • vinay
      April 5, 2011 at 10:40 pm

      Hello Asanka,

      I can help you on the same, Please share the url also you can mail me vinay.celeste@gmail.com for any kind of further help.

      Thanks,
      Vinay

  • คอนโด
    May 25, 2011 at 9:07 pm

    Good tutorial, and good writing, i like your “Remeber:” it’s very helpful

  • sanjay
    July 21, 2011 at 11:09 am

    I have to EDIT fbml page in my fanpage . But when i click on apps in fanpage it shows blank.

    i dont know why..
    Please help me.

  • iPhone Apps Review
    August 2, 2011 at 9:33 am

    I am not familiar with facebook application and facebook API but i know the importance of this tutorial.I shared this post on Twitter then all my followers follow this link and gain few knowledge

  • sanjay
    August 25, 2011 at 12:15 pm

    When I create facebook apps and add to mypage,
    it show in my fanpage, when i click on apps from fanpage
    it show FACEBOOK with blue background & go to Facebook.com when i click on it it shows my apps but not in fanpage.
    would you please help me.

  • Tass
    September 29, 2011 at 3:35 pm

    I tried your code in FB Apps , But i got Like

    ( ! ) Warning: Unknown: failed to open stream: Permission denied in Unknown on line 0

    ( ! ) Fatal error: Unknown: Failed opening required ‘D:/wamp/www/fb/app/iframeapp/index.php’ (include_path=’.;C:\php\pear’) in Unknown on line 0

    Please help me !

  • Muhammad touseef
    October 7, 2011 at 6:03 pm

    Awesome! only your article provide help to develop fb app for pages instead of users. and appreciate your consistent reply to comments

    my question is
    1. how people can add my application to their page. i think i need to submit it to app directory so people can search it and add to their page ??

    2. my app page will be only visible to page admins (may be its edit page)
    they will use this tab to post information on their page’s wall…

    but i dont want a tab viewable for their fans.

    is it possible?? any clue please?

  • nitin
    November 12, 2011 at 10:16 pm

    while developing a fb app for a fanpage can i get information about the people who have liked or follow the page……and i yes,how?

    • mahmud ahsan
      mahmud ahsan
      November 17, 2011 at 2:39 pm

      Please checkout the facebook documentation for this. I have not researched much.

  • Agile Software Developer
    April 25, 2012 at 12:32 am

    Please checkout the facebook documentation for this. I have not researched much.

  • how to gain weight fast
    October 19, 2013 at 1:05 am

    Instead work out for an fastest way to gain weight
    hour or less and boost those muscles. Builders should
    be sure to eat often. Step2: Get physically active for a minimum of eight hours per night.
    It is still important to take a well balanced diet for thin peoplewith exercising on a daily basis.

  • vincentR
    July 3, 2011 at 4:51 am

    Hi,

    Does anyone have the solution to replace pop_up dialogs FBJS with code in php or java in application or landing page Facebook.

    FBJS code that doesn’t work with the new version of Facebook:

    dialogue Pop-up fbjs à 1 bouton

LEAVE A COMMENT