I have created a facebook apps. It works fine for me. But my problem is that always show vertical and horizontal scrollbar, when I use fluid for both width and height of my page from facebook settings. My page looks like this http://karen.webmascot.com/fb/fbone.jpg. What can I do now?
Set scroll=no and overflow:hidden to your body and use FB.Canvas.setAutoGrow() to remove the scrollbar.
<body scroll="no" style="overflow:hidden">
<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>
Try to use overflow:hidden in your body CSS style.
Related
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>
I just added a like button to my blogger, first it didn't work, but now it does,but it shows on all the pages I created on blogger Including the Contact Page http://scheissemag.blogspot.com/p/contact.html, which bothers me and I want to hide it or remove the div.
For the button code I use this one : (which I installed after <div class='post-footer-line post-footer-line2'/> )
<div>
<div id='fb-root'/>
<script>
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='standard' send='false' show_faces='false'/> </div>
I tried to remove with the code I found in this website after searching :
<div id="fr-root"> (I tired LikeDiv too)
my div
</div>
<script>
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
But it's always there !
Instead of removing it, can you just set its visible property to FALSE?
I have several Facebook like buttons on myself that are being rendered via XFBML. After clicking on them, they appear to work in that they change from the standard like button into the "thumbs up" icon that says "You like this". However, after a second or two (I assume the time it takes to hit FB's servers and come back), it automatically unlikes itself, turning back into the original like button.
See a video of what I mean here.
My code is pretty standard:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en">
...
<fb:like href="http://www.example.com/valid/path" layout="button_count" ref="recipe_preview" />
...
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
});
};
</script>
...
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXX', // my app ID is here
status: true,
cookie: true,
xfbml: true
});
if (typeof(fbAsyncInitExt) == 'function') {
fbAsyncInitExt();
}
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
})();
</script>
Edit: For what it's worth, I also attempted to see if Facebook was sending any log info, but it didn't appear to be:
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
console.debug(response);
});
FB.Event.subscribe('fb.log', function(response) {
alert('LOG: ' + response);
console.debug(response);
});
};
</script>
After a lot of digging, I finally discovered the source of the error. It turns out the page referenced by the href value in my fb:like tag required at least one of the fb:app_id or fb:admins META tags in the HEAD. For reference: http://developers.facebook.com/docs/opengraph
After trying all of the solutions I could find, none work, but I tried using the "Live feed" app ID rather than the default "Live Stream" when you're getting your code from the facebook developers page, which worked for me.
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!
Been running into an issue lately with Facebook canvas iframe applications. I've set our settings to "auto-resize" and implemented the correct FB JS call to do the resizing of the height (to avoid unwanted scrollbars), but it doesn't seem to be working.
Has anyone else had this issue or come up with a solution?
Thanks!
Erik
Before </body> tag, I have written following code.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo YOUR_APP_ID ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(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);
}());
</script>
And it is working fine for me.
It doesn't matter whether height is Fixed or Fluid in Advanced application settings.
FB.Canvas.setAutoGrow(true); was not working in my application, but I found that I missed the <div id="fb-root"></div> code. I just put it before <script type="text/javascript"> and got the issue resolved.
Expanding on a couple of points noted already:
window.fbAsyncInit = function () {
FB.init({
appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(true);
};
This will allow dynamic changes in the applications height. Also setting an explicit width in your css like so can help as well:
html {
width: 760px;
overflow: hidden;
}
FB.Canvas.setAutoResize will be deprecated and you should use FB.Canvas.setAutoGrow as it does exactly what you want.
Roozbeh is on the right path with his answer. However, his code will most likely produce an error (at least in Firefox), as both the old and new SDKs are being referenced (and they don't play well with each other).
Also, just using the new SDK to adjust the height is super simple:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
FB.Canvas.setSize({ height: 890 });
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
Official documentation available here.
Well ... auto-resize is buggy and only sometimes work
you can set it manually like this:
FB.Canvas.setSize({ height: $('body').height() });
If anyone is still having this problem, its because your FB.init() is never being called. In my case, I had it inside my jQuery document.ready function. dont do that!
Put this outside of your jQuery:
$(function() { ... jquery here... });
// do FB stuff
FB.init({appId: 'APP_ID', status: true, cookie: true });
FB.Canvas.setAutoGrow();
Auto-resize doesn't work. It's a major bug that facebook has not fixed yet.
However, here's the code work around for the problem:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
window.onload = function(){
FB_RequireFeatures(['CanvasUtil'], function(){
FB.CanvasClient.setCanvasHeight('1500px');
});
};
</script>