When I load up my app, either stand-alone or inside Facebook canvas, theres an iframe with a inline height and width property that's basically blocking all app links and functions because It's somehow sitting on top of everything.
I'm not an experienced Facebook app developer and was wondering what's going on and how to handle it? I've identified the css in Google Chrome but don't know how to remove or prevent the styles since the iframe is not part of the dev package I cloned. The app is up on Facebook and should be viewable using facebook.apps.com/datingfordummies
Thanks in advance
Fixed it. I simply removed the width and height property in my css. I would have done this initially but was afraid it would effect the other iframes on the page. Needless to say, it didn't and is now working.
for future reference:
iframe{width:0 !important; height:0 !important;}
Related
I implemented html5 version of the like button on the header of my page.
once i navigate to another page and press the back button on the browser the FB button renders the iframe the size of 1000px * 1000px and masks the page content.
any solutions for this ? is this a known issue?
I can confirm this is happening for myself as well across multiple sites.
Facebook is aware of the issue which may take some time to fix according to https://developers.facebook.com/x/bugs/663421210369743/
In the short-term, many other developers seems to be suggesting to target the iframe specifically through css (or timeout javascript call) to force the height back to about 20px.
When using css, ensure you use !important to override the style attribute that ends up on the iframe from facebook.
I know this is an old post but it's still happening.
Add this inline to the code facebook gives you:
data-height="30px" data-width="130px"
And this to the CSS
.fb-like {
width: 130px !important;
}
Of course, you can change the width to whatever you want.
So your code should look like this (where XX is replaced with your parameters):
<div class="fb-like" data-href="XX" data-send="XX" data-layout="XX" data-show-faces="XX" data-height="30px" data-width="130px">
This is only a temporary solution until it is fixed as the facebook button disappears after a minute or so.
Probably not the best solution out there but adding the following css could work for now:
.fb-like iframe {
width: 500px!important;
height: 50px!important;
}
For me this is happening when the facebook like button is wrapped in "position relative" element with "z-index" higher then the content wrapper.
Check the position and the z-index of your elements.
My Facebook app (iframe / fluid / Fluid) shows a horizontal scrollbar. All attempts to remove it have failed.
I've tried all the solutions posted here, regarding FB.setAutoGrow(), FB.setSize(), etc... with no luck, but I found something interesting:
The scrollbars that appear are not related to my application, but related to the commercials at the side.
In the image you can see what I'm talking about:
To the left is a portion of my Iframe App. While the Iframe has been correctly resized (I've checked with Firebug - right) and their sizes are all right, there's that horizontal scrollbar at the bottom that affects the whole facebook window (not just my iframe).
The highlighted item on Firebug is what causes the horizontal scrollbar. They don't belong to the pagelet div (the div where the iframe resides): It's part of the carousel of recommended games to the right ! (and its width is > 5000 pixels).
When I first launch my app, there are no scrollbars fora little time interval, like 500ms, then they suddenly appear.
FB.Canvas.setSize , FB.Canvas.setAutoGrow seem to work, if I invoke them manually, they do resize the iframe, etc. but they don't remove the scrollbar.
I have body:overflow=hidden.
(may be related?) My app uses itself another iframe, width and height 100%, that is where the action takes place. That other iframe also has overflow=hidden.
This has traditionally worked. I stopped paying attention to Facebook for a couple months, then I saw this yesterday :(
What can be happening? My guess is somehow Facebook thinks my app needs horizontal scrolling, removes overflow-x:hidden in the main body in order to allow it, but this intererferes with their carousel that expects a hidden overflow... I don't know if this problem is at all my fault or a Facebook Bug.
Fortunately, this bug has been solved by Facebook. Everything is working now.
I have tried various solutions to get the iframe to adjust according to the website's content height, so that I can do away with vertical scrollbars, but cannot get a satisfactory solution.
Many solutions ask for a section of code to be added on the 'server side'. If that means I have to edit lines of code within my Wordpress files, where would I do this?
Here is a link to the iframe in question.
Rather than try to adjust the Facebook page to fit your WordPress install, you're better off changing your WordPress theme to deal with being shown in a Facebook iframe.
When displayed in the iframe, you should have a theme that is fixed-width to your canvas, and no sidebars. Just a content pane. You would then have your regular theme for when visitors arrive outside of a Facebook frame.
The Virtual Theme plugin looks like it could help with this. I've never used it personally.
Our Facebook app displays unwanted scrollbars, even though we defined the width as 500px. This app appears within the context of Facebook fan pages.
We originally set the width at 520px with side padding of 10px on the left and right. We used the CSS3 box-sizing property (and its browser variants) and set it to border-box.
Then we weren't sure if Facebook somehow stripped out the box-sizing property, so we set the width to 500px. Still the scrollbars won't go away.
Here's an example: http://www.facebook.com/coboak?sk=app_198939416792674
1) How to eliminate the scrollbars? (Yes, the app is configured with Auto-Resize.)
2) Does Facebook support the box-sizing property (and its browser variants)?
Thanks!
1) remove width: 520px; from #main_box
2) box-sizing will affect only browsers which support it, no matter if it's on facebook
I'm working on a simple Facebook application and for the canvas page I'm using an iFrame. I need to make the width of the iframe wider to fit my site. Is there a way to control this and what would I need to do to support that?
There are two supported canvas page sizes (760px and 646px). These can be set on the developer settings for your application.
You can not make your canvas page wider, however you could make it narrower by making your application and FBML application and then putting your content inside of an fb:iframe tag with a reduced width.
Here is the fb developer's wiki entry on canvas. They set the width it in the canvas tag.
e.g. <canvas id="Canvas1" width=200 height=270></canvas>
fb mark up for iFrame