Facebook "FB.Canvas.getPageInfo", how to use it properly

Question

I need help figuring out how to appropriately use the FB.Canvas.getPageInfo from Facebook's javascript sdk:

https://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/

I'm able to get the info and log/alert the data:

function getFbCanvasInfo() {
    FB.Canvas.getPageInfo(function(fbCanvasInfoObject) {
    console.log(fbCanvasInfoObject);
    });
}

$("a.GetScrollTest").live( "click", function() {
    getFbCanvasInfo();
    return false;
});

But I can't figure out how to set that data and then apply it to other elements or functions (i.e. like something below):

$("a#test-link").each(function() {
    var fbPosition = getFbCanvasInfo().scrollTop;
    $(this).append("<em>The scroll top value is " + fbPosition + "px");
}

I know its not right and I'm missing something here.

BTW these functions are all below my async init and FB root, which appears like so:

<div id="fb-root"></div>
<script type="text/javascript">//<!--
    window.fbAsyncInit = function()
        {
        FB.init({
            appId: '223615011031939',
            status: true, 
            cookie: true, 
            xfbml: true, 
            oauth:true, 
            channelUrl: '[MY PROJECTS CHANNEL URL]' 
        });
        var isLoaded = true;FB.Canvas.setSize();FB.Canvas.setAutoGrow(500);            
        };

        (function() {
            var e = document.createElement('script');
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        }());

        ;(function($){
            $(document).ready(function($){
                [THE JQUERY FROM ABOVE HERE]
            });
        })(jQuery);
    //--></script>

Much appreciation to anyone who has advice/expertise! Thanks!

Answer 1

The getPageInfo returns a readonly object. To "set" things, you would need to use the provided setter functions listed in the documentation. One of them to set the size of the canvas is setSize see https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/

Also you should cleanup your javascript so the async nature of working with their API is good.

$("a.GetScrollTest").live( "click", function() {
    FB.Canvas.getPageInfo(function(fbCanvasInfoObject) {
        var fbPosition = fbCanvasInfoObject.scrollTop;
        $(this).append("<em>The scroll top value is " + fbPosition + "px");
    });
    return false;
});