Setting the height of iframe Tabs for Facebook profile Pages

前端 未结 6 1548
深忆病人
深忆病人 2021-02-05 09:04

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

相关标签:
6条回答
  • 2021-02-05 09:14

    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>
    
    0 讨论(0)
  • 2021-02-05 09:18

    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.

    0 讨论(0)
  • 2021-02-05 09:19

    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> 
    
    0 讨论(0)
  • 2021-02-05 09:23

    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!

    0 讨论(0)
  • 2021-02-05 09:24

    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>
    
    0 讨论(0)
  • 2021-02-05 09:25

    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.

    0 讨论(0)
提交回复
热议问题