I am using Facebook C# SDK in my ASP.net application.
I have an iFrame application whose iFrame Size set to Showscrollbars.
The application was working fine till yesterday, but today the iFrame is not stretching to its width (From the documentation Facebook's iFrame width is 760px Link here). The page in my application's width is set to 95%. So I think its not a width problem in my application.
.
I have to use Showscrollbars option for my application.
Did facebook Changed any settings for the iFrame Apps? Help please.
UPDATE Looks like facebook broke something or they are trying to get rid of scrollbar options. I have to change my application to use AutoResize Option. I made the following changes to my asp.net application and it is working fine except one issue (see at the bottom of the question)
<head runat="server">
<title></title>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.Canvas.setAutoResize();
};
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '12345678', //replace with your facebook appid
cookie: true,
status: true,
xfbml: true
});
</script>
</body>
iFrame stretches vertically when the content increases. That's cool but the
ISSUE is Read Here on StackOverflow. I am working on it. If any one figures it out please let me know.
I had the same problem and fixed it with this simple bit of CSS in the iFrame page
body {overflow:hidden;}
everything still fits nicely, with nothing cut off. just gets rid of those pesky scrollbars!
it certainly sounds like a bug, worked fine in all other browsers but FF 3.6
adding the above also has the advantage of not having the srollbars momentarily show on load.
Use code below and it's works on all of my iframe apps :)
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: '123456789',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize();
FB.Array.forEach([200, 600, 1000, 2000, 5000, 10000], function(delay) {
setTimeout(function() {
FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
}, delay)
});
</script>
Related
Ive tried to be sneaky and written a FB app, for a tab on a Page... the app allows you to paste in some HTML code, and then displays it on your tab.
I then paste in the html code for an iframe (which I have given a specific height to). The iframe pulls in content from a Wordpress site. But because some pages are longer than others, and the iframe is set to 1400px to accomodate all page content without scroll bars appearing, you have to manually scroll up the page.
Ive tried the following the the APP code to scroll the FB page to the top...
<body style="overflow: hidden;">
<!-- echo out iframe page code -->
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 123456789,
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoGrow();
FB.Canvas.scrollTo(0,0);
};
//Load the JavaScript SDK asynchronously
(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>
but the scroll to top thing isnt working... any input appreciated!
Just occurred to me that FB.scrollTo might well be working, but because that App file is not being reloaded when i navigate within the embedded iframe, its not going to call it... so I need to trigger FB.scrollTo when the new iframe content loads...?
I think you want to use https://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/ (FB.Canvas.scrollTo)
However, this function has only one purpose: scrolling to a certain position on your canvas app (https://apps.facebook.com/yourapp). It doesn't work if you manually insert an iframe either. On a canvas app, your app is being loaded in an iframe automatically.
Also, this only works if you set your Canvas Height to Settable.
I'm working on a Facebook Page Tab app.
Can someone tell me how to get rid of the inner scrollbars?
My app looks like this: http://imageshack.us/f/39/52017175.jpg/ but it should look like this: http://imageshack.us/f/805/84116468.jpg/ . (notice that the second page scroller is on the right, not in the frame).
I tried changing the settings but that doesn't work...
Thanks a lot!
Sorted it out:
Apparently, FB made some changes again.
Adding this did the trick for me:
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function()
{
FB.init({ appId: '',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoResize();
FB.Canvas.setAutoGrow();
}
</script>
Don't forget to load the .js-file, off course.
Next, make sure your css-file blocks any scrollbars (overflow: hidden).
How can we resize a website which appears in an iFrame ? Is it possible if the website is wider than the Facebook page to make it appear a bit smaller so that we can see it all ?
Here is the code I used to avoid the scroll bar at least:
<html>
<head></head>
<body>
<iframe style="width:827px; height:1000px;" src="#"></iframe>
</body>
</html>
Thanks by advance !
Change the height and width for example for my facebook i changed it to
style="border:none; overflow:hidden; width:215px; height:290px;"
Just make sure to add the overflow hidden part so it hides any extra
Use this code just after your opening tag
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID', //Your facebook APP here
cookie : true, // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
also add this css statement to your header section.
<style>
body {overflow:hidden;} /*This is handy for removing horizontal/vertical scrollbars as we won't need them if we autosize; */
</style>
I know this topic has been asked about and answered multiple times but please believe that I have spend many hours searching for help and answers that work and/or I can actually understand.
It's the same ol' issue:
I have figured out how to add a custom tab and even a custom icon for it (and I am really happy to have been able to do even that!).
But, as per many other requests for help, it has the dreaded scroll bars.
I, like the others, want it to flow down past it's limited 800px size.
I have several different fixes for this, some I have tried unsuccessfully and some just go right over my head and I do not understand what is being written at all, where it goes and what needs to be edited in it.
I would really appreciate someone taking the time to walk me through the process and explaining the what's and how to's please.
View page here: http://www.bronts.com/bronts_facebook/index.html
View page within facebook here: http://www.facebook.com/pages/brontscom/191839754181703
You will need to use javascript sdk to autosize the iframe in a pagetab app. You will need to have an application id for this. Refer to https://developers.facebook.com/docs/reference/javascript/
the FB.Canvas.setAutoResize(); sets the height of the canvas.
here is working example on my app. http://www.facebook.com/apps/application.php?id=135669679827333&sk=app_135669679827333
NOTE: setAutoResize(); will be changing to setAutoGrow();
ALSO: you may need to reduce the width of your image, not sure until auto size is in place.
---------- i use this and add just below the < body > tags of my documents.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
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
//channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
/* sets auto size to app canvas and page tab app. */
FB.Canvas.setAutoResize();
};
(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>
Add overflow: hidden; to your body and use jQuery.ScrollTo to navigate inside iframe.
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function()
{
FB.init({ appId: '1375268019431848',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoGrow();
FB.Canvas.setAutoResize();
}
</script>
What is the maximum iframe width of a facebook page?
It was 520px.
As with a Canvas Page, the amount of space available to your app is
bounded by the outer context of Facebook. Since your app is also
loaded inside of Facebook Page, the space is smaller (520 pixels) than
what is available to on a Canvas Page.
from FB docs (yes i know that doc about canvas and it's only mentions iframes, but i cannot find quickly reference to full iframe documentation)
Important Update
On the March 30th 2012, Facebook changed this to 810px, to match the new design of timeline.
And here you have a screenshot of the Facebook app, with width 810px.
It's 810 px wide. You don't have to worry about scrollbars if you use the following code...
<!--in head section-->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
<!--at the bottom of your page right before the closing body tag-->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '320332891360172',
status : true, // check login status
cookie : true, // this allow the server to access the session
xfbml : true // parse XFBML
});
</script>
For future reference, you can set the frame width to be floating inside advanced settings of app. This allows you to have any width for your app.
See http://developers.facebook.com/blog/post/549/