How to remove scrollbars from Facebook iFrame application - facebook
I have created a facebook iframe application and set the dimensions to Auto Resize in the Facebook Application settings page but still a horizontal scrollbar is shown at the bottom in IE and Google Chrome. Works fine in Firefox. Any solution ?
It's explained how to do this here:
http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html
Basically you should use
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
};
plus make sure that your html and body tags are set to overflow:hidden so you don't get those briefly shown scroll bars that are so annoying
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
<head>
<!-- Header stuff -->
</head>
<body style="overflow: hidden">
You also need to start the timer to call autoresize code. In your applications HTML do:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize(50);
};
If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
You can even pass the desired size as parameter
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 600 });
}
Facebook must remove SCROLLING="YES" attribute of iframe of canvas app and append overflow:auto to style attribute
OR provide us with a function by which we can change scrolling attribute value to NO according to our apps.
I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.
What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).
I hope this help you.
Might sound obvious, but have you tried CSS overflow: hidden on the iFrame?
I have had this problem in the past. While resizing might work, there is a maximum width on the Facebook canvas. It is likely that your body element has some kind of default padding / margin, and therefore it's box is bigger than the max width.
Try using a reset style sheet that clears default styles: http://developer.yahoo.com/yui/3/cssreset/
I've tried many things listed here, but what really worked was:
Configurations -> Advanced -> Canvas Settings, set a fixed width and height
It's also important to notice that if you don't provide a privacy policy url, facebook won't save this configurations.
Being frustrated about this problem of Firefox for a long time, finally found the best solution, which is here from Roses Mark. She proposed several ways, however only the body onload stably removes scrollbar in Firefox 10.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Horizontal scrollbars are always caused by the width of your HTML page being larger than the area of the iframe.
Make sure you set the right width to your or containing .
Set the width in your CSS file and set the overflow property.
If it's a Tab iframe app you can set it like this:
body{
width:510px;
overflow:hidden;
}
Apart from this code:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
Also update Canvas Height setting in FB developer app settings:
Set canvas height to Fixed instead of Fluid. This will remove horizontal and vertical scroll bars.
Well, I will share some techniques collected from several resources that can be implemented to get rid of your unwanted scroll bars of your iframe facebook app. So, here is the first technique:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Using Latest Javascript Facebook SDK [Without using Body OnLoad]
window.fbAsyncInit = function() {
FB.init({
appId : '142388952486760',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize(); //set size according to iframe content size
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Using the Old Facebook Javascript SDK
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>
I might be late but I have very easy solution.
this might help
inside the page plugin div:
<div class="coverhack"></div>
and on css:
.coverhack {
position: absolute;
width: 520px;
height: 440px;
background-color: rgba(0, 0, 0, 0);
bottom: 0;
}
what have I done is only covering the scrollable part so it cant be scrolled. not might be the perfect answer but it works the same with the fastest delay among all answers.
I found the perfect solution! Make sure to put the following CSS code into the <head> area:
<style>*{margin:0;padding:0;}</style>
The scrollbars are actually shown because there is a default padding or margin given. Hope I could help!
Related
Facebook like box widget not recognizing data-width attribute?
I just noticed today that the data-width attribute for the Facebook Like Box widget does not appear to be working. It looks like it is reverting to the default width. An example of what I'm talking about can be seen on http://blog.christopherjonesart.com.
Here is the code I'm using (it's pretty standard):
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/christopherjonescomicart" data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div>
I am experiencing this issue on several websites. It is doing it in Chrome, Firefox, Safari and Internet Explorer. I have not recently updated Wordpress or made any changes to my css.
Help? It looks really crummy like this. :-(
Expanding on user2477225's answer, it might have problems with custom positioning that you set (relative or absolute somewhere on the page), so what I did was:
.fb_iframe_widget>span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }
Seems to be working so far.
Edit: For IE 8 (and lower), please use this instead:
.fb_iframe_widget span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }
I like to be as specific as possible in my selectors, but after checking this issue some more, I see no technical reason to use the > selector here.
i think we should tell fb to fix their dumb script, now fb like box must be at least 292 px in width. They state clearly on https://developers.facebook.com/docs/reference/plugins/like-box/ The minimum supported plugin width is 292 pixels.
I fixed the width with a little CSS hack but it is only temporary. My hack is this:
.fb-like-box iframe {
width: your_width_in_px !important;
}
Use the iframe settings, in my site using the iframe settings with a likebox of 236px width and it overrules the 292px width. Brainless thinking of FB, every site needs a sidebar of 292px width???? yeye
Simply Use iFrame instead of fbml and change width to whatever required. i.e.:(width:194px below) <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%sitename.com&width=194px&height=290px&show_faces=true&colorscheme=light&stream=false&show_border=true&header=true&appId=1234567890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:194px; height:290px;" allowTransparency="true"></iframe> Thanks!
I have face the same problem to you.
my solution is use jquery script to change width of like box in the like box ready time.
in head section
<script type="text/javascript">
function JS_wait(){
// wait until like box script load
if($("iframe[title='fb:like_box Facebook Social Plugin']").length == 0 && $("div[class='fb-like-box fb_iframe_widget'] span").length == 0){
window.setTimeout(JS_wait, 100);
}else{
// wait 5 seconds to like box rendered.
window.setTimeout(JS_ready, 5000);
}
}
function JS_ready() {
// resize facebook like box to 200 px
//alert("JS_ready");
$("iframe[title='fb:like_box Facebook Social Plugin']").css('width','200px');
$("iframe[title='fb:like_box Facebook Social Plugin']").attr('width','200');
$("div[class='fb-like-box fb_iframe_widget'] span").css('width','200px');
};
</script>
and in document ready add
<script type="text/javascript">
$(document).ready(function() {
JS_wait();
});
</script>
Cheers this must help you.
After the fb:like-box
add this script
change the 244px to your width
FB.Event.subscribe('xfbml.render', function(response) {
var el = document.querySelector(".fb_iframe_widget span");
el.style.width='244px';
el = document.querySelector(".fb_iframe_widget iframe");
el.style.width='244px';
});
According to Facebook official like box page, The minimum width is 292px.
Still, there is a little project on github to make facebook like box responsive and adapt to your website layout.
Applying this along with setting the width of the container to any width you prefer will force the facebook like box to fill that container and adapt to its width, no more, no less:
/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
Here is what I used to fix it, this is not the exact same since I don't show faces, but just adapt it to your code, the important part is the div #fb-like-container that I added, it lets me use css selectors to change required code.
CSS:
<script>
#fb-like-container div.fb-like-box>span,
#fb-like-container div.fb-like-box>span>iframe{
width: 173px!important;
}
</script>
HTML (data-width is not taken into account):
<div id="fb-like-container">
<div class="fb-like-box"
data-href="http://www.facebook.com/christopherjonescomicart"
data-width="273"
data-height="71"
data-show-faces="false"
data-stream="true"
data-header="false">
</div>
</div>
Tabs Resize Doesn't Work
I've tried several snippets of code I've found from various sources, including Facebook itself and stackoverflow, but none of them work to increase the default length of the custom tabs I created for a client. I've listed the methods I've tried below.
One variable I haven't been able to play with is the Canvas Height setting described on Facebook's FB.Canvas.setSize page. It is nowhere to be found on my App Dashboard. http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
It says: "Note: this method is only enabled when Canvas Height is set to "Settable (Default: 800px)" in the App Dashboard."
And here are the various methods I've tried to resize.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '215615521792601', status: true, cookie: true, xfbml: true});
<!-- EACH OF THESE THREE LINES BELOW WAS TRIED ONE AT A TIME.-->
FB.Canvas.setAutoResize(true);
// FB.Canvas.setAutoGrow(true);
// FB.Canvas.setSize({ width: 520, height: 1576 });
};
And here is another method I found:
<!-- FACEBOOK TAB LENGTH FIX HEADER START -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<!-- FACEBOOK TAB LENGTH FIX HEADER END -->
<!-- FACEBOOK TAB LENGTH FIX BODY START -->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize( 100 );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 2400 });
}
</script>
<!-- FACEBOOK TAB LENGTH FIX BODY END -->
Thanks for any and all help! I'm completely stumped and frustrated!
Canvas Height option is available in "App on Facebook" section under Basic Settings in App Dashboard.
Flash movie position in Facebook canvas
I have a little trouble regarding the positioning of a flash movie in the facebook canvas.
The flash movie has a size of 760x600 px. So i have set the facebook app advanced setting of the canvas width to fixed(760 px) and height to fixed (800 px).
The problem is, that i get a horizontal scroll bar and only 750 px of the flash movie are shown, because the flash movie seems to be aligned at canvas.x = 10 px and not at x = 0 px.
Is there a way to set the position of the flash movie? Preferably in Flash-As3?
Thanks in advance!
Update
Thanks for the input Niraj! Unfortunately i have never done anything with CSS. Here is my "index.html", would you tell me how to integrate your example into the html code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div><!-- required div -->
<div id="flashContent">
<h1>You need at least Flash Player 10.2 to view this page.</h1>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<script type="text/javascript">
//This example uses dynamic publishing with swfObject. Login is handled in the swf
//Note we are passing in attribute object with a 'name' property that is same value as the 'id'. This is REQUIRED for Chrome/Mozilla browsers
swfobject.embedSWF("example.swf", "flashContent", "760", "600", "10.1", null, null, null, {name:"flashContent"});
// redirect
function redirect(id,perms,uri)
{
var params =
window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params;
}
</script>
</body>
</html>
Thanks alot!
You problem lies in your Flash Page. You should remove margins from the HTML page that embeds the flash and use the Javacript SDK to resize the page using setAutoGrow() function. The overflow: hidden will remove the scrollbars too.
Example CSS:
body {
margin: 0;
overflow: hidden;
}
Edit:
In the <head> tag of your page, add in:
<style type="text/css">
html, body {
margin: 0;
overflow: hidden;
}
</style>
New FB Canvas (810px) is cut off
I am developing an app on facebook.
Since yesterday the resizing worked fine with the following snippets:
CSS:
body, html { overflow:hidden; width:810px;margin:0; padding:0; border:0; }
Right before the closing body tag:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoGrow(true,100);
</script>
On Facebook I chose fixed for height and width, but that should not matter due to the autoGrow.
Since today it is just cut off, I tried the fluid settings but it did not change anything. I can remove the css rules for body and html, but then scrollbars are added.
So in short:
The resizing does not work anymore at all.
Important to know (maybe) the app resizes dynamically (via JS) without a page reload.
The code did not change at all, so I am worried Facebook might have changed something?
Besides I also tried this js snippet without any effect (but it does the same anyway):
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
window.setTimeout(function () {
FB.Canvas.setAutoGrow()
}, 250)
};
(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>
UPDATE:
The question was answered correctly, but one more thing to notice:
Apply overflow:hidden just to the body, it worked after I removed html from the rule - worked with the old canvas, at least I used it before.
Also putting the code in the header did not change anything as well and is not the same as putting it at the beginning in the body area.
Try this
<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>
Stretch page width of the application
I need to stretch width of the used space of my app. The following image shows that there is space to be used. Image: http://imageshack.us/photo/my-images/834/imgbe.png/ An example of this action would be: http://apps.facebook.com/meucalendario/ Ps: I tried using: FB.Canvas.setAutoGrow, FB.Canvas.setSize () but no success. Thanks.
The Default Canvas Width is 760px, but Facebook has recently added the option for developers to use fluid widths. Which means your iframe will have a 100% width and will expand depending on the user's screen resolution/browser.
You can read the official blog post here, and an example (assuming you already set the option in your app settings):
<html>
<head>
<title>Fluid Width HTML Example </title>
</head>
<body style="margin:0; padding:0; border:0; background-color:#000000">
<div id="allContent" style="background-color: #0000FF; height:100%">
<div id="output" style="color: #FFFFFF;" />
</div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'APP ID',
});
function echoSize() {
document.getElementById('output').innerHTML =
"HTML Content Width: " + window.innerWidth +
" Height: " + window.innerHeight;
console.log(window.innerWidth + ' x ' + window.innerHeight);
}
echoSize();
window.onresize = echoSize;
</script>
</body>
</html>
P.S.: You can't override the live ticker on the right!
You cannot do it. It's max value is 760px, that is up-to how far you can stretch your application's view port.