4

I have been building a facebook tab using html and css and facebooks javascript SDK.

I having problems with the iframe resizing to the size of the content.

I've managed to get it to work on initial load which is cool, using this below script...

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

-

<div id="fb-root"></div>
<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '00000000000000', // App ID
      channelUrl : '//www.mywebsite.com/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    FB.Canvas.setAutoGrow();

  };

  // Load the 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>

and my channel.html looks like this...

<?php
 $cache_expire = 60*60*24*365;
 header("Pragma: public");
 header("Cache-Control: max-age=".$cache_expire);
 header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
 ?>
 <script src="//connect.facebook.net/en_US/all.js"></script>


Like I said the initial page load resizing is perfect, but as I navigate around the iframe, it does not autogrow to my content.

Can anyone advise as I'm very new to this facebook iframe biz.

Thanks in advance

Joshc
  • 3,825
  • 16
  • 79
  • 121

1 Answers1

1

Please check these:

A, Do you have <!DOCTYPE html> at the top of the HTML?

B, Do your app generates valid HTML? Here is the validator tool: http://validator.w3.org/

Sándor Tóth
  • 743
  • 4
  • 10
  • Thanks for your suggestion. I cleaned up all there errors so got green light and doctype was in place. Am I right in thinking the iframe should always resize to the content, not just on initial load? – Joshc Feb 08 '12 at 22:39
  • Do i have to put my content inside `
    `?     – Joshc Feb 08 '12 at 22:43
  • 1
    No it's a wrapper for Facebook. 1 year ago I solved my resize problem this way, but now the FB script works better. You can use the FB.Canvas.setAutoGrow() funciton to resize your iframe automatically. Full documentation here: https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/ . Obviously it is not continous, you have to set up the interval of resize. – Sándor Tóth Feb 08 '12 at 22:58
  • this how learnt how to do it. Though the documentation is not very clear on how to set parameters - Currently mine has no parameters, `FB.Canvas.setAutoGrow();` – Joshc Feb 08 '12 at 23:03
  • Yes, in this case the resize runs in every 100ms. – Sándor Tóth Feb 08 '12 at 23:09