CODEWITHSUNDEEP
facebook
Rahul Thakur
Rahul Thakur

Reputation: 821

setAutoGrow to set canvas length

I was trying to implement fluid canvas for my facebook app. I am using the script

window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}

just after i initialize my app but it is still set to 800px. How should i use this function?

Upvotes: 0

Views: 2209

Answers (5)

Loko Web Design
Loko Web Design

Reputation: 491

Just for the sake of possibly helping someone else, try removing the http or https from your code. Here's mine (notice the ChannelUrl line):

    <div id="fb-root"></div>
    <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'YOUR_APP_ID', // App ID
        channelUrl : '//WWW.YOURURL.COM/FOLDER', // Channel File    
        status: true, 
        cookie: true, 
        xfbml: true
      });
      FB.Canvas.setAutoGrow();
    }
    </script>

After I removed the http/https, it worked on all browsers.

Upvotes: 2

gautamlakum
gautamlakum

Reputation: 12015

Before </body> tag, I have written following code.

<div id="fb-root"></div>
<script type="text/javascript">
            window.fbAsyncInit = function() {
                FB.init({
                    appId: '<?php echo YOUR_APP_ID ?>',
                    cookie: true,
                    xfbml: true,
                    oauth: true
                });
                FB.Canvas.setAutoGrow(true);
            };
            (function() {
                var e = document.createElement('script'); e.async = true;
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                document.getElementById('fb-root').appendChild(e);
            }());
</script>

And it is working fine for me.

It doesn't matter whether height is Fixed or Fluid in Advanced application settings.

FB.Canvas.setAutoGrow(true); was not working in my application, but I found that I missed the <div id="fb-root"></div> code. I just put it before <script type="text/javascript"> and got the issue resolved.

Upvotes: 1

slashwhatever
slashwhatever

Reputation: 731

If you're trying to use a fluid canvas then there is no need to set the size of the iframe. In fact you shouldn't call it because there is a bug in FB; when set to fluid, calls to size the iframe should do nothing - in fact this isn't the case and the call does get processed. There is a bug logged against this here: http://developers.facebook.com/bugs/272509486115193 but FB have deemed this Low priority (much to my annoyance!)

In order to get fluid working correctly, check the docs here: https://developers.facebook.com/blog/post/549

You will need to make sure the content container on your page has it's height set to 100% as per the instructions on the doc page linked above.

Upvotes: 0

Suj
Suj

Reputation: 31

Try with following.It will auto resize your iframe.

<html>
<head>
<script src="./includes/js/jquery.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">

window.fbAsyncInit = function(){
FB.init({appId: 'appid', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();};
function setSize(){
FB.Canvas.setAutoResize();}

</script>
</head>
<body style="overflow: hidden" onload="setSize()">

Upvotes: 0

twister_void
twister_void

Reputation: 1389

Refer to this page:

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

"This function is useful if you know your content will change size, but you don't know when. There will be a slight delay, so if you know when your content changes size, you should call setSize yourself (and save your user's CPU cycles)."

So, if you have some javascript functions that increase the height you can call the setSize method, otherwise setAutoGrow and specify a longer or shorter interva

Upvotes: 0

Related Questions