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.
Related
This is not a scrollbars question. Here is the thing:
You load your Facebook canvas app and do a FB.Canvas.setSize({height:900}); (works)
You move to another section of your app (some link) and then do a FB.Canvas.setSize({height:1300});
The second step doesn't work. The app iframe remains at 900px height.
What I need, is to change the canvas height dynamically after it has already been set. According to the Facebook documentation, this should work. They do not specify if you can or cannot change the canvas height once it has been set.
I've tried the same method on page tabs and it works, I can properly resize the height of the tab using setSize(), however, it seems like canvas pages behave differently (?).
This is the code I am using, right after opening the body tag:
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
FB.init({appId: "XXXXXXXXXXXXXXXXXXXXX",
status: true,
cookie: true,
xfbml: true});
};
(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);
}());
window.fbAsyncInit = function() {
FB.Canvas.setSize({height:1300});
}
//-->
</script>
The designer made a Canvas app using different heights and so far its has been a pain to implement.
You're assigning different things to window.fbAsyncInit in two different places. You should just get rid of the second assignment and move the FB.Canvas.setSize call to right after the FB.init call (or replace the FB.init call, as you don't need it if you're only using the SDK for resizing; obviously keep it if you are doing auth stuff with it as well).
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/
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>
Why is the height of my Facebook Like button (technically the iframe that gets generated) always getting set to 80px? Example page is here: http://www.davidkasper.net/test.html I am using the javascript sdk and have had it work on other pages but for some reason the height will not change dynamically on this one! I can even do something like
<fb:like style="height:40px">
and that will indeed set the visible height, but the iframe will still be 80px, whereas I can see it changing in the demo at http://developers.facebook.com/docs/reference/plugins/like
The iframe being generated is allowing space for showing facebook profile pictures. Add the show-faces="false" attribute and it will collapse the height.
<fb:like show-faces="false"></fb:like>
I fix this problem with css
#fb-bar iframe{min-height:80px !important;}
where #fb-bar is wrapper for < fb:like >. In html
<div id="fb-bar">
<fb:like href="link"></fb:like>
</div>
I finally found the answer for this!!
The problem was having the wrong base domain set for the app that I specified in the FB.init javascript.
window.fbAsyncInit = function() {
FB.init({appId: '**131226520233112**', status: true, cookie: true,
xfbml: true});
};
(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);
}());
See the difference between http://davidkasper.net/test.html vs http://davidkasper.net/test2.html
By the way I would never have discovered this without the URL Linter from Facebook http://developers.facebook.com/tools/lint/ Clearing all the errors it detected solved the problem!
David,
I was having the same problem too. I simply put the fb:like tag inside of a DIV with an ID of 'facebook-like'. Then I setup a CSS rule to limit the height and/or width of any iframe that exists in the 'facebook-like' DIV. Worked for me!
From the reference it says
The most important social plugin is
the Like button, which enables users
to post pages from your site back to
their Facebook profile with one click.
You can add a Like button to any page
with an iframe tag:
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
There are a number of options for the
Like button, including the option to
include the names and profile pictures
of the user's friends who have also
liked the page. Here is a like button
for the Facebook Developers site...
To me that indicates you should just use the iframe and set the width/height properties in the style tag...
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:300px; height:25px"></iframe>
Go to http://developers.facebook.com/docs/reference/plugins/like
Uncheck the 'Show Faces' checkbox. This will reduce the height to 35px.