Setting the height of iframe Tabs for Facebook profile Pages

Asked 14/2, 2011 at 23:27 Answered 29/1, 2013 at 14:52

As we know that Facebook has introduced iframe Tabs for Pages. I have developed an application and added the tab of the application in a profile page, application tab is opened in an iframe according to the update "iframe Tabs for Pages". The problem is that height of the page is not adjusted and unable to remove the scrollbars to display the fully page without scrollbars. All the solutions which I found work for the Application canvas page but not for the Application Tab page.

How can we do that?

Bayreuth answered 14/2, 2011 at 23:27 Comment(0)

It's quite easy to achieve. You have to set up the application in the Facebook Integration tab as an IFRAME and the size of the frame as "Auto-resize".

Now, on your server, you have to add the following code before the </BODY> tag:

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setSize();
</script>

This will auto resize it. It also helps if you add overflow:hidden to the BODY tag.

Cowell answered 2/3, 2011 at 1:32 Comment(1)

FYI: I had to use an explicit size like: "FB.Canvas.setSize({ width: 520, height: 620 });". Don't forget to read the documentation: developers.facebook.com/docs/reference/javascript/… – Hypocorism 23/11, 2011 at 17:25

The following guide helped me through the same problem:

http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

In short, do the following:

Change your "IFrame Size" to "Auto-resize"
Load Facebook's Javascript SDK

add the following code just before the </body> tag of your index page:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

Use FB.Canvas.setSize()

Put the following code before the </head> tag:

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

That should do it, hope it helps!

Democratize answered 5/4, 2011 at 7:42 Comment(0)

facebook recently changed something, now your tab file also needs the fb.init method. otherwise the resize wont work. so use this in your tab page as well

    <script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() 
{
    FB.init({ appId: 'YOUR APP ID', 
    status: true, 
    cookie: true,
    xfbml: true,
    oauth: true});

    FB.Canvas.setAutoResize();
    FB.Canvas.setAutoGrow();
}
    </script>

Ralaigh answered 13/4, 2012 at 14:19 Comment(3)

This sorted it for me, I just needed to add the two FB.Canvas method calls as listed above. – Tilsit 3/5, 2012 at 11:54

setAutoGrow is the new name for setAutoResize. Having both is not necessary. – Ravi 4/7, 2012 at 13:38

This worked a charm. I hate that Facebook keeps changing things and letting out of date documentation roam free in the wild. – Surrejoinder 11/10, 2012 at 8:32

Updated code for everyone having issues:

1) Set your application "Canvas Height" to "Fluid".

2) Copy + paste the following code before the closing <body> tag.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  // Called when FB SDK has been loaded
  window.fbAsyncInit = function () {
    // Initialize the FB javascript SDK
    FB.init({
      appId: '[YOUR APP ID]',
      status: true,
      cookie: true,
      xfbml: true
    });

    // Auto resize FB Canvas
    FB.Canvas.setAutoGrow();
  };

  // Load the FB SDK Asynchronously
  (function (d) {
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
  } (document));

</script>

Equitation answered 1/11, 2012 at 16:27 Comment(1)

I tried a combination of the code provided by Gergely Varga (directly above this comment) AND changing the javascript library to 1.5.1. Poifect. – Ensile 20/11, 2012 at 14:44

Hey guys... I was having problems with it as well.. i have tried a myriad of solutions and suggestions and they never worked for me. After I changed the jquery library 1.6 to the 1.5.1 it worked. Check if that is your problem.

Now I am trying to know why the hell it does not work with the version 1.6 of jquery.

Humes answered 20/5, 2011 at 12:43 Comment(0)

For anyone like me who tried all of the above to no avail, here's what finally worked for me. Taken from this page: https://www.facebook.com/note.php?note_id=10150149060995844

Before </head> :

<script type="text/javascript">

window.fbAsyncInit = function() {

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });

}

// Do things that will sometimes call sizeChangeCallback()

function sizeChangeCallback() {

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });

}

</script>

Then before </body>:

<script type="text/javascript">

                FB.init({
                    appId: 'XXXXXXXXXXX', //Your facebook APP here
                    status: true, // check login status
                    cookie: true, // enable cookies to allow the server to access the session
                    xfbml: true// parse XFBML
                });

        </script>

Equi answered 29/1, 2013 at 14:52 Comment(0)

Recommended topics

Hot tags