Facebook iframe issues
- Started
- Last post
- 13 Responses
- ksv123
I just happend upon facebook.com/pepsi (I have not liked this page yet, so I still see the like image.) viewing on a mac and a pc. When viewing on the mac, I see the enitre image 520x1662, but on the pc the image is cuttoff at a bout the 800 max pixels for FB iframe. Is there anyway to get the iframe to extend without scroll on the pc side?
I tried it on a iframe I built but it does not show the entire 520x1040 height on the pc. I used this code
<style type="text/css">
<!-- body { width:520px; overflow:hidden; margin:0; padding:0; border:0; } -->
</style>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head><body>
<a href="http://www.domainhere.com"><img src="FaceBookTemplate_03.jpg" style="border-style: none" alt="Like US"/></a>
</map></a>
</body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'xxxxxxxxxxxxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
- ksv1230
Anyone?
- keiTai0
you should resize your app put this before your </body>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'your-appid', status: true, cookie: true, xfbml: true});
window.setTimeout(function() {
FB.Canvas.setAutoResize();
}, 200);
};
(function() {
var e = document.createElement('script... e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/al...
document.getElementById('fb-root...
}());
</script>
- popfodders0
I'd stop using that FBML and just use a 3rd party app like http://www.wildfireapp.com/, it's free and delicious. Facebook has recently said, they're changing their tune on FBML
- mekk0
you dont have to set up the height, fb does it for you
- ksv1230
mekk, I have tried everything, cannot get it to work on the pc without scrolls. Do you have some code that works?
- registe0
google is your friend, past that pay me.
- chalk0
That's a pretty janky wet floor. Poor perspective.
Sorry, I have nothing else to add here.
- EPtype0
I've run into this problem many times set it to display no scrollbars, not auto.
- watchamakalit0
use woobox..you declare the height
- mekk0
have you fixed it? works fine in firefox4@wind7 and IE9@win7
- elahon0
This is my magic combination that I use, works to remove scroll bars and fixes the height so if your content is longer than the right sidebar, it extends with no problem:
<body style="overflow: hidden"><!-- WHEN DEVELOPING A LONG PAGE, REMOVE THIS STYLE CLASS. PUT IT BACK IN BEFORE YOU PUBLISH -->
<div id="container">
<!-- PUT DIV AND JS CODE HERE FOR IFRAME HEIGHT FIX -->
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXXXXXXXXXXX', status: true, cookie: true, xfbml: true});
window.setTimeout(function() {
FB.Canvas.setAutoResize();
}, 250);
};
(function() {
var e = document.createElement('script... e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/al...
document.getElementById('fb-root...
}());
</script>
<div id="content">
MY FACEBOOK IFRAME CODE STARTS HERE............
- ksv1230
thanks guys, will check into all of this. I hope I get something to work.