How to resize the facebook iframe application window_问答_开发者

How to resize the facebook iframe application window

开发者 https://www.devze.com 2023-03-27 09:20 出处：网络

I have a facebook app which run only through a fan page. Go to app : http://apps.facebook.com/imageassistant/ (You should have a fan page to check this)

I have a facebook app which run only through a fan page.

Go to app : http://apps.facebook.com/imageassistant/ (You should have a fan page to check this)

I need to increase the height of my canvas page as much as I can with a fix width value(If you run my application you will see)

I have a index.php file which include fbmain.php file

//index.php
<?php
 include_once "fbmain.php"; // this file do all authentication parts
//some codes
?>

I need to resize my all pages in my app

I found some codes related to this from facebook developer page

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

// Do things that will sometimes call sizeChangeCallback()

function sizeChangeCallback() {
  FB.Canvas.setSize();
}

and this

FB.Canvas.setSize({ width: 640, height: 480 }); // Live in the past

But I don't know how to use these codes in my app and where should I put those? Do I have put this code in each and every file in my app?

Do I have to change the app settings in my developer 开发者_JAVA百科app page also? (IFrame Size to Show scrollbars or Auto-resize before do this)

Can anyone please post the complete answer including where should I put that?

Note : I am using php sdk

But I don't know how to use these codes in my app and where should I put those?

There are a number of valid ways of doing this the following is just one:

<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <!-- YOUR HEADER CONTENT -->
    </head>
    <body>
        <div id="fb-root"></div>

        <!-- You Page Content HERE -->

        <script>
          window.fbAsyncInit = function() {
            FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
            FB.Canvas.setSize();
          };
          (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>
    </body>
</html>

Do I have put this code in each and every file in my app?

If you want the iFrame to resize then you need to include this kind of code in each and every page.

Do I have to change the app settings in my developer app page also?

For this to work you need to select the auto-resize option in the developer app.

You man also want to consider FB.Canvas.setAutoResize if your content's size is dynamic.

You also may come accross issues where FB.Canvas.setSize fires too early in which case you can use setTimeout to delay it - from experience I've found 200ms to be about optimal:

          window.fbAsyncInit = function() {
            FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
            window.setTimeout(
                function() {
                    FB.Canvas.setAutoResize();
                },
                200
            );
          };

Just include javascript SDK file in your project.

And then using script tag src attribute include the above file in your index.php file and in index.php write this code :

<?php
       echo '<script type="text/javascript"> 
        window.fbAsyncInit = function() {
            FB.init({appId:'Your AppID here', status: true, cookie: true, 
                        xfbml: true});
            FB.Canvas.setSize({ width: 640, height: 720 });
          };
    </script>';                             
?>

This will set your canvas size to specified width and height for all webpages within your App.