iSimple – Graph API & IFrame Base Facebook Page Application Development

facebookOnce upon a time there were some FBML/FBJS terms used to develop facebook page application. That time you had to learn fbml and fbjs to make simple page application. But the good news is someday ago facebook added iframe support in page application. So facebook page application development now become much easier than ever.

I named this tutorial iSimple, because in this tutorial I’ll teach you how easily you could setup a facebook page application, add in your page, customize your code to make nice app. This is the first part of my 2 parts series tutorial, in the next part I’ll show you more advance techniques to get user’s data via facebook API.

So in this tutorial I’ll explain:

  1. Simple iframe app setup for facebook page
  2. Basic php files structure setup
  3. How to use jQuery javascript library in the app
  4. How to use facebook’s social plugins
  5. iframe size changing using javascript code
  6. Invite Request Box
  7. Stream Publish in your wall
  8. Ajax page loading
  9. How to add application in facebook page

Before proceeding:

Demo AppDownload Code

 

Recommended Reading

1. Simple iframe app setup for facebook page

Visit developer application and setup a new app. Give a name to your application and then click Facebook Integration. Now fill the red color selected area. Canvas URL is very important so carefully select your server’s path where you will keep the files. Don’t forget to give a trailing slash ‘/’ in Canvas URL. In the example, I give the name iSimple as tab name. At last click Save Changes.

appsetup

2. Basic php files structure setup

After download my codes, extract the zip and upload all the files in your application directory. There are total 5 files

isimple

  1. index.php is the main file that will load when user click the tab application. It should contains all types of php and business logic.
  2. config.php file contains facebook application settings and some more
  3. home.php, template.php and other.php are template or ui files.

config.php – After uploading my codes, copy your facebook application’s app id, api key and secret key here. And also set the baseUrl, appBaseUrl, pageUrl and appPageUrl.

$fbconfig['appid' ] = "";
$fbconfig['api']    = "";
$fbconfig['secret'] = "";

$fbconfig['baseUrl']    =   ""; //"http://thinkdiff.net/demo/newfbconnect1/iframe/isimple";
$fbconfig['appBaseUrl'] =   ""; //"http://apps.facebook.com/thinkdiffdemotwo/";
$fbconfig['pageUrl']    =   ""; //"http://www.facebook.com/thinkdiff.net";
$fbconfig['appPageUrl'] =   "{$fbconfig['pageUrl']}?sk=app_{$fbconfig['appid' ]}";

index.php – this file first includes the config.php and named the inner page is ‘home.php’. Then it loads the template.php file. If you write any business or data related php code, write that above the 2nd line.

    include_once "config.php";
    $page   =   "home.php";
    include_once "template.php";

template.php – this is the main front end file. Within it all other page should load.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>iSimple - Graph API & Iframe base Facebook Page App Development | Thinkdiff.net</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <style type="text/css">
            a{
                text-decoration: none;
                color: blue;
            }
            a:hover{
                text-decoration: underline;
                color: olive;
            }
        </style>
        <script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery("#tabs").tabs();
                jQuery("#invite").bind('click', invite);
                jQuery("#other").bind('click', other);
            });

            function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
                FB.ui(
                {
                    method: 'stream.publish',
                    message: '',
                    attachment: {
                        name: name,
                        caption: '',
                        description: (description),
                        href: hrefLink
                    },
                    action_links: [
                        { text: hrefTitle, href: hrefLink }
                    ],
                    user_prompt_message: userPrompt
                },
                function(response) {

                });
            }
            function publishStream(){
                streamPublish("Stream Publish", 'Thinkdiff.net is again awesome. I just learned how to develop Iframe base facebook page application development. ', 'Checkout the Tutorial', 'http://thinkdiff.net', "Demo Facebook Application Tutorial");
            }
            function increaseIframeSize(w,h){
                var obj =   new Object;
                obj.width=w;
                obj.height=h;
                FB.Canvas.setSize(obj);
            }

            function invite(){
                 FB.ui({ method: 'apprequests',
                 message: 'come on man checkout my application. visit http://thinkdiff.net'});
                return false;
            }

            function other(){
                jQuery("#pageload").load('other.php');
            }
        </script>
    </head>
<body>
    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
     <script type="text/javascript">
       FB.init({
         appId  : '<?=$fbconfig['appid']?>',
         status : true, // check login status
         cookie : true, // enable cookies to allow the server to access the session
         xfbml  : true  // parse XFBML
       });

     </script>

    <?php echo $tutorialLink; ?>
    <br /><br />

    <a href="<?=$fbconfig['appPageUrl']?>" target="_top">Home</a> |
    <a id="invite" href="#">Invite</a> |
    <a id="other"  href="#">Other Iframe</a>

    <br /><br />
    <div id="pageload">
         <?php
            if (isset($page)) {
                include_once $page;
            }
        ?>
    </div>
    </body>
</html>

home.php -inner page of template.php. We are using 2 page, home and other both of this inner pages are loading within template.

<style type="text/css">
    #tabs ul li{
        font-size: 80%;
    }
    #tabs pre{
        font-size: 138%;
    }
    #tabs{
        font-size: 70%;
    }
    #tabs div a{
        color: blue;
    }
</style>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>Tab A</span></a></li>
        <li><a href="#fragment-3"><span>Stream Publish</span></a></li>
    </ul>
    <div id="fragment-1">
        <a href="#" onclick="increaseIframeSize(300, 500); return false;">Click Here Iframe width=300,height=500</a>
        <br />
        <a href="#" onclick="increaseIframeSize(500, 1800); return false;">Click Here Iframe width=500,height=1800</a>
        <br />
        <strong>Aishwarya Krishnaraj Rai </strong>
        <br />

        <strong>Nickname</strong>
        <br />
        Ash
        Gullu
        The Queen of Bollywood

        <br />
        <strong>
        Height
        </strong>
        <br />
        5' 7" (1.70 m)
        <br />
        <br />
        <strong>
        Mini Biography
        </strong>
        <br />
        Born into a traditional south Indian family, Aishwarya started modeling at a young age. This green-blue-eyed beauty appeared in advertisements for many prestigious firms; the ones that brought her into the limelight were the garden sari and the Pepsi ad. Crowned Miss India 1994 runner-up, she was a hot favorite in the run for miss world title, which she won, her beauty and charm made her India's darling. Ash stormed into the Indian movie industry, where she has proven herself a brilliant & genuine actress.
        <img src="http://www.elsaelsa.com/wp-content/uploads/2009/08/aishwarya_rai.jpg" alt="Aishwarya Rai" />

        <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=<?=$fbconfig['appid']?>&amp;xfbml=1"></script><fb:comments xid="aiwsh" numposts="10" width="425" publish_feed="true"></fb:comments>
    </div>
    <div id="fragment-3">
        <a href="#" onclick="publishStream(); return false;">Click here and see the publish prompt</a>
    </div>
</div>

other.php -other page that will load a site in iframe

<iframe src="http://thinkdiff.net" height="700" width="470" ></iframe>

3. How to use jQuery javascript library in the app

In template.php you’ll see, in the head tag jQuery library is loading.

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

And in template.php line number 20 you’ll see, jQuery functions are calling. You’ll see all the javascript functions are written in template.php

         jQuery(document).ready(function () {
                jQuery("#tabs").tabs();
                jQuery("#invite").bind('click', invite);
                jQuery("#other").bind('click', other);
            });

4. How to use facebook’s social plugins

In the demo I’m using facebook comment plugin. You can generate comment plugin code from here

comment

In home.php line number 49 you’ll see the code for this plugin. Please keep in mind that, if you already loaded the facebook javascript sdk then you need to just use the xfbml code. As in template.php we already loaded the javascript sdk so we are using only the xfbml parts here.

     <fb:comments xid="aiwsh" numposts="10" width="425" publish_feed="true"></fb:comments>

But if you don’t load the javascript sdk then the code will look like

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=<?=$fbconfig['appid']?>&amp;xfbml=1"></script><fb:comments xid="aiwsh" numposts="10" width="425" publish_feed="true"></fb:comments>

Where dynamically replace the appId from config.php .

appId=<?=$fbconfig['appid']?>

You can also generate other plugins code and use like it.

5. iframe size changing using javascript code

To call facebook javascript library function, we will first load the library. In template.php line number 68 you’ll see

<div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
     <script type="text/javascript">
       FB.init({
         appId  : '<?=$fbconfig['appid']?>',
         status : true, // check login status
         cookie : true, // enable cookies to allow the server to access the session
         xfbml  : true  // parse XFBML
       });

     </script>

Facebook javascript library is loading here. This is mandatory to parse XFBML codes or to call facebook javascript api.

In template.php line number 49, you’ll see a function. This is used to dynamically change iframe size.

       function increaseIframeSize(w,h){
                var obj =   new Object;
                obj.width=w;
                obj.height=h;
                FB.Canvas.setSize(obj);
            }

This function is called in home.php line number 21

<a href="#" onclick="increaseIframeSize(300, 500); return false;">Click Here Iframe width=300,height=500</a>
        <br />
        <a href="#" onclick="increaseIframeSize(500, 1800); return false;">Click Here Iframe width=500,height=1800</a>
        <br />

6. Invite Request Box

Now you can send request easily from application.

function invite(){
                 FB.ui({ method: 'apprequests',
                 message: 'come on man checkout my application. visit http://thinkdiff.net'});
                return false;
            }

This function is assigned to id=”invite” at line number 22 in template.php.

jQuery("#invite").bind('click', invite);

7. Stream Publish in your wall

Stream publish is very important feature for any type of facebook application. In template.php line number 26 I defined the function

function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
                FB.ui(
                {
                    method: 'stream.publish',
                    message: '',
                    attachment: {
                        name: name,
                        caption: '',
                        description: (description),
                        href: hrefLink
                    },
                    action_links: [
                        { text: hrefTitle, href: hrefLink }
                    ],
                    user_prompt_message: userPrompt
                },
                function(response) {

                });
            }

This function is called from home.php line number 52.

 <a href="#" onclick="publishStream(); return false;">Click here and see the publish prompt</a>

8. Ajax page loading

jQuery minimizes ajax functionality by providing some simple functions.
In template.php 62 number line you’ll see

function other(){
                jQuery("#pageload").load('other.php');
            }

And this function is assigned to a anchor id=other in 23 number line in template.php

jQuery("#other").bind('click', other);

9. How to add application in facebook page

So finally you learned the basic coding structure of facebook page app. Now when you want to add the application in your page just visit the application’s about page and in the lower left side you’ll see below links. Then click Add to my page and select your page to add the app. Now visit your page and click the tab name, in my case iSimple.

addapp

I hope this tutorial will help you to use the facebook’s latest feature, iframe support in page application. In my next tutorial I’ll describe some more advance features like:

  1. fan detection
  2. facebook’s php official sdk loading and how to use
  3. graph api usage
  4. and more

Here is the 2nd part of the series. iAdvance – Graph API & Iframe base facebook page application development

About mahmud ahsan

Founder And Lead Programmer at iThinkdiff.net

, , , , ,

77 Responses to iSimple – Graph API & IFrame Base Facebook Page Application Development

  1. Zaman-A-Piri Pasa February 16, 2011 at 2:59 am #

    thanks mahmud bahi.

  2. Ludo February 16, 2011 at 3:26 am #

    Great as usual. Thank you so much buddy

  3. MissEm February 16, 2011 at 4:58 am #

    Thanks Mahmud.
    Comprehensive as per usual.

    A great addition to your Application tutorial and very timely indeed ;)

  4. floen February 16, 2011 at 10:36 am #

    Good job!

  5. Ilex February 16, 2011 at 10:40 am #

    In the template.php (line 66-67) ready add

    I have a question about when add the facebook’s social plugins, need to add the “div” and “js” again (home.php line 49) ?

    • mahmud ahsan February 16, 2011 at 10:53 am #

      Thanks Ilex for noticing it. Yeah you don’t need to use the div and js again if you already load the facebook javascript sdk. And in the demo as we already loaded the javascript sdk, we can skip the div and js part in the plugin. So just use

      <fb:comments xid="aiwsh" numposts="10" width="425" publish_feed="true"></fb:comments>
      

      And I’m updating the post.

      • sony November 16, 2011 at 1:22 am #

        How can i remove the permission prompt while using Java script SDK for fangating in
        face book,I am using the below code,it shows the permission box,i want to remove
        that, any insights ?

        Below is my code

        FB.init({appId: ‘myappid’, status: true, cookie: true, xfbml: true});

        //FB login check

        FB.login(function(response) {
        if (response.session) {
        var user_id = response.session.uid;
        var page_id = “117058896692”;
        var fql_query =
        “SELECT uid FROM page_fan WHERE page_id = “+page_id+”and uid=”+user_id;
        var the_query = FB.Data.query(fql_query);
        the_query.wait(function(rows) {
        if (rows.length == 1 && rows[0].uid == user_id) {
        $(“#container_like”).show();
        $(“#container_notlike”).hide();
        } else {
        $(“#container_notlike”).show();
        }
        });
        } else {
        // user is not logged in
        }
        });

  6. steven February 17, 2011 at 2:38 pm #

    Simply amazing the help you give to the community,
    1,000,000 thanks to you, over and over again!.

    • mahmud ahsan February 17, 2011 at 3:16 pm #

      Glad you like it. Thank You.

  7. Jay February 17, 2011 at 8:35 pm #

    In div or iframe i want to open facebook wall of company by using only javascript. I tried with iframe but it does not directly open the wall in iframe, rather on iframe facebook logo is displaying and while clicking on it the wall is opening, i want it directly to open it..
    Please help me, its very urgent..

  8. Robin February 18, 2011 at 10:09 pm #

    Thanks a lot for this tutorial!
    However, when I try to display it in a facebook page, I have this error:

    “App temporarily unavailable
    Parse errors:

    FBML Error (line 67): illegal tag “body” under “fb:tab-position”

    Runtime errors:

    Cannot allow external script”

    But if I remove the element, nothing is formated…

    Any idea?

    • mahmud ahsan February 18, 2011 at 11:12 pm #

      Check your facebook application setting, make it iframe not fbml in the page tab type setting.

      • Robin February 20, 2011 at 4:55 am #

        Hi mahmud,
        Thanks for your reply. All settings are already set to iframe. That’s why I don’t understand this FBML Error…

        • Marek February 21, 2011 at 1:37 am #

          i have been having the same problem and no solution yet. have u been able to fix it?

          • harrynov simarmata February 21, 2011 at 6:35 am #

            @robin, @marek: maybe you can try to upgrade your page.

  9. Robin February 21, 2011 at 3:13 pm #

    @marek: Still not fixed…
    @marek: What do you mean by “upgrade”? I cannot find this option in settings.

  10. Tim Glenn February 22, 2011 at 1:30 am #

    Hi. just have a question about if it is possible to allow the app to add itself to a fan page/ welcome page?

    • mahmud ahsan February 22, 2011 at 1:03 pm #

      I’m surprised to hear your question. My example of this tutorial is in fanpage.

  11. Martin February 22, 2011 at 2:45 pm #

    Mahmud, you have explained one of the most essential techniques for the newly introduced Fan pages. Great job, man! Keep up the good work!!

  12. Amelia February 22, 2011 at 4:11 pm #

    Mahmud,

    With the comments plugin, when it posts to my wall the data is all linked to my ‘baseUrl’ and won’t link back to my appPageUrl.
    I’ve used the returnurl in the fb:comments, but no love.
    Any ideas??

  13. Ubuntu news February 23, 2011 at 10:17 pm #

    Thank you great work

  14. JohnDBB March 1, 2011 at 8:18 pm #

    Hello,

    Thank you for your great post. I have followed your tutorial, but I cannot get the comments plugin working, nor the Invite as well. And if I go to your demo page in Facebook I cannot see the comments area there and the invite link gives me an error message as well. What could be the reason? Thank you in advance.

    • mahmud ahsan March 1, 2011 at 10:49 pm #

      Sometimes if you visit the link directly the app doesn’t load, i don’t know why, so click the iSimple in the page again, then you’ll see the app in page.

      • Juan March 2, 2011 at 1:29 pm #

        Thanks a lot!

  15. chandrasekar March 2, 2011 at 12:50 pm #

    i have done my facebook appliction from your help… but i dunno what is this facebook application.. why we are used? i knew the question is stupid, but i want the answer, i dunno where i got the right answer thatsy i asked you, please reply me… thank u

  16. Amir Hamza March 8, 2011 at 11:07 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.
    Thanks
    Amir

  17. nakres March 12, 2011 at 11:04 am #

    great tutorial thank you a person like me can do this that means eveyone else can do it easy with your help.

    can you please help with Stream Publish on application user’s wall when each time they use the application? without asking them click or prompt for publish?

    thank you

  18. bon March 14, 2011 at 4:40 pm #

    Hi!

    I created a facebook app using your tutorial, however the AJAX is not working.. Even in your facebook app, the Update Status via AJAX and PHP API is not working. Pls help on how to make this work!

    Looking forward for your response asap.

    Thank you!:)

  19. Mika March 15, 2011 at 3:29 pm #

    Hi Mahmud,
    Thank you for the tutorial, it is great.

    How do you know the different method options of FB.ui?

    I can’t find it in FB documentation.

    Thanks,
    Mika

  20. anna March 16, 2011 at 7:36 pm #

    Hello,

    i am just getting a facebook logo in the iframe. if i click the fb logo i get redirect to the app url. can anybody help please. thanks…

  21. gamebit07 March 16, 2011 at 7:47 pm #

    great article. i am running a test app from wamp server. the url is : apps.facebook.com/****
    consider the following details :
    Canvas Page
    http://apps.facebook.com/gamebits/

    Canvas URL
    http://127.0.0.1/demo/

    how do i define the following things in your config.php :
    $fbconfig['baseUrl']
    $fbconfig['appBaseUrl']
    $fbconfig['pageUrl']

    • chandrasekar April 4, 2011 at 2:35 pm #

      hi gamebit07
      $fbconfig['baseUrl'] -> is your canvas url;
      $fbconfig['appBaseUrl'] -> is your canvas page url
      example
      $fbconfig['baseUrl'] =http://127.0.0.1/demo/
      $fbconfig['appBaseUrl'] =http://apps.facebook.com/gamebits/
      $fbconfig['appPageUrl'] = “{$fbconfig['pageUrl']}?sk=app_{$fbconfig['appid' ]}”;

      check it

  22. Jeremy March 21, 2011 at 8:09 pm #

    I am getting the same problem as Anna, any one got an idea please? If it makes a difference it’s on a business page rather than a fan page.

    • anna March 21, 2011 at 8:13 pm #

      @jeremy: use the CANVAS URL as TAB URL instead of the CANVAS PAGE URL…

  23. Jeremy March 21, 2011 at 10:20 pm #

    Bingo! Thank you very much Anna.

  24. chandrasekar March 22, 2011 at 4:04 pm #

    hi gamebit07

    $fbconfig['baseUrl'] -> is your canvas url;

    $fbconfig['appBaseUrl'] -> is your canvas page url

    example
    $fbconfig['baseUrl'] =http://127.0.0.1/demo/

    $fbconfig['appBaseUrl'] =http://apps.facebook.com/gamebits/

    $fbconfig['appPageUrl'] = “{$fbconfig['pageUrl']}?sk=app_{$fbconfig['appid' ]}”;

  25. Abhishek March 24, 2011 at 5:23 pm #

    Thanks for tutorial

    But i am not getting what to write in

    $fbconfig['pageUrl'] = “”; //””;

    and how to display this application in fan page i am getting this output
    http://outofthebox.in/facebook/cutting_chai_to_pilo/

    • chandrasekar April 4, 2011 at 2:35 pm #

      $fbconfig['appPageUrl'] = “{$fbconfig['pageUrl']}?sk=app_{$fbconfig['appid' ]}”;

      check it

  26. Polly March 29, 2011 at 1:19 pm #

    Hi, Great tutorial!

    In check demo, beside the “iSimple”, the below clickable button “Hyperlink”,”Fangpage Template”,”Comments” these function how to do it in FB.

    Before I checked in FB development page is nothing relate content. I saw Nike also used it:http://www.facebook.com/nike

    Please help, thank.

  27. Fire March 30, 2011 at 11:20 pm #

    I getting FB undefined

  28. onur April 2, 2011 at 11:39 pm #

    add mme publish stream

  29. Richard Cantwell April 15, 2011 at 5:27 pm #

    Hi Mahmud,

    I see when you set up this application – your tab URL is apps.facebook.com/blahblah/ – can you tell me how you prevent the BLUE facebook header from appearing in your iframe? – ie your basically loading the canvas page into your iframe? – but in your application on your page, you odn’t see this facebook header?

  30. Jayesh April 27, 2011 at 4:10 pm #

    Hi Mahmud,
    Facebook recently updated the FB.UI method where they are now using the “feed” instaed of stream.publish to post on users wall. can you please check the same and tell all of us how it works, since stream.publish falls under OLD REST API which will be soon depricated.
    http://developers.facebook.com/docs/reference/javascript/FB.ui/ Check out the link for more details

  31. John May 18, 2011 at 10:29 pm #

    I put some simple html code up on a page to try to get used to the new way to add tabs and I am having no luck. I get a 405 error. Here is the page with the code: http://www.freedomhair.com/iframetest

    Here is the page where the tab should show up: http://www.facebook.com/pages/Silkn-Pro/197123736964881#!/pages/Silkn-Pro/197123736964881?sk=app_172909219434481

    When I look at the tab, I get the 405 error. Can you help? Thanks.

  32. phil June 20, 2011 at 12:52 am #

    first of all, Mahmud, developing for facebook is not an easy task and your tutorial is amazing. great job, realy !
    now, i have a bit of a weird problem… when i put my facebook application in a fan page the application doesn’t get any parameters (POST and GET)… this is realy weird because i need the “code” parameter from facebook to get the access token but i just can’t get it in my code even though i can see it in the URL… i print the $_REQUEST, $_GET and $_POST parameters and they are all empty (except for the signed_request parameter)… when i go to the canvas page of the application it works fine…. any help would be greatly appreciated, thanks.

    • mahmud ahsan June 20, 2011 at 10:58 pm #

      Did you check if a form submit works or not and you can get $_GET or $_POST values from form ?

  33. Milan June 22, 2011 at 2:30 pm #

    Mahmud you rock!!! Thanks for all the articles.

    I’ve googled a lot and I’d need a bit of help. I have a canvas app. What I need to do is, that the app has to check whether it’s been installed (added) to the page when I click the button (the page is selected from dropdown) and add it to the page automatically if not. I suppose that I do the redirect to http://www.facebook.com/add.php?api_key=XXX&pages=1&page=PageID, What is that api_key? Could you point me somewhere where could I find more details pls? Thanks a lot, much appreciated

    Milan

    • mahmud ahsan June 23, 2011 at 12:10 am #

      When you create an application you’ll see API Key in the application setting

      • Milan June 23, 2011 at 3:05 am #

        Got you Mahmud, thanks. And how can I check whether the app has been added to the page pls?

  34. sanjay June 23, 2011 at 11:32 am #

    Hello Friends,

    i am getting problem while logout to my applcation

    using php sdk….
    in fbmain.php login and logout code is as per

    $loginUrl = $facebook->getLoginUrl(
    array(
    ‘scope’ => ‘email,offline_access,publish_stream,user_birthday,user_location,user_work_history,user_about_me,user_hometown’,’user_likes’,’friends_likes’,
    ‘redirect_uri’ => $fbconfig['baseurl']
    )
    );

    $logoutUrl = $facebook->getLogoutUrl();

    and using this code in index.php

    would u plz suggest me some solution

    thanks in advance

  35. Pankaj June 28, 2011 at 6:19 pm #

    Mahmud !! Thanks for all the articles. Can you send aspx code for this articles.

  36. Injektilo July 26, 2011 at 1:04 pm #

    Seems that the notification (after i invite someone) redirects to http://www.facebook.com/4oh4.php and not the fanpage :/

    Any help?

  37. Johan August 15, 2011 at 12:36 am #

    Hi,

    Is it possible to recommend a page to friends instead of the app itself? So that the URL the friends clicks does go to my page instead of my app page?

  38. Rajeshwari August 17, 2011 at 6:10 pm #

    Thanks a lot Mahmud for cool article.. Seems you have explored all api’s of FB. Glad I could get to your site.. Its a treasure ..

    I have added Like box plugin to my site because of which page load time has increased a lot.. Is there any way I can reduce this load time on page refresh as well as on first time loading?

    Thanks in advance,
    Rajeshwari

    • mahmud ahsan August 18, 2011 at 9:40 pm #

      Hi Rajeshwari,
      I think there is no way, as the like box load from facebook server. So depends on your network it may take time to load.

  39. sanjay August 19, 2011 at 11:20 am #

    How to track User on like..?

  40. maharajan August 29, 2011 at 3:05 pm #

    hi friend…

    How do i hide(or)remove “go tp app” button next to the like button in my facebook page.
    Is it possible?, i saw some apps page they only show like button. After likes only, apps will be displayed. but my page, if any user with out like the app they using “Go to App” button and access the applicetion.

    how do i fix that problem?

    Please help me..

    By
    Maharajan Ravi.

  41. maie September 26, 2011 at 4:14 pm #

    hello
    many thanks for your tutorial,but i have a problem i had a facebook application from past year but when i load it now again the application not load in facebook iframe it redirects me to my server when I enter back button it display in the facebook correctly pleeeease tell me how to solve it urgently

  42. Manish November 26, 2011 at 8:39 pm #

    FB.ui({ method: ‘apprequests’,
    message: ‘test message.});

    When I invoke this method I am getting prompt with friend list and send request button. In notification area “ABC” sent you request in “XYZ” is visible but Message is not visible. What to do?

  43. kalai January 24, 2012 at 11:11 am #

    Error

    Sorry, the application you were using is experiencing a problem. Please try again later.

    how to solve this error

  44. Shani Khan March 7, 2012 at 8:48 pm #

    Hi Bro, Thank for the lovely post i think i spent more than a day on searching resources fro FB application development. here i got lot of stuff which is helpfull to move forward.last thing i have done all setup and configuration but still getting error “API Error Code: 191″ i am new to FB dev so any help will be highly appreciated

    Thanks

  45. ksmith March 19, 2012 at 2:21 pm #

    Hi,
    I want to create a facebook fanpage and want to install application on that page,
    I have created application successfully but not be able to add it on my fan page so please help me how can I add it on fanpage , previously method of adding on fanpage was quit easy but the new look of facebook change add to page method so please let me know how this will…?

    • senthil April 24, 2012 at 7:44 pm #

      Facebook new version i can’t see the Add to my page in application settings page. I don’t know how to add into my page. please help me.

  46. senthil April 24, 2012 at 8:51 pm #

    hi,

    Finally i got it, see the documentation:
    https://developers.facebook.com/docs/reference/dialogs/add_to_page/

  47. Bakbak April 26, 2012 at 3:05 am #

    Every once in a while I get a pop up that says “To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.” I am trying to show the users name, photo, and invite box with friends listed. any ideas??

  48. chechtestmail July 20, 2012 at 5:28 pm #

    hey…Demo link not working here.