Setting the height of iframe Tabs for Facebook profile Pages

前端未结

关注

 6  1559

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)
发布评论:

提交评论
- 加载中...