I have a Facebook Like/Share box (copied from the code on Facebook) in between my Twitter and Google+ icons.
On the browser version of my page (scroll most of the way down to see the buttons), everything is aligned perfectly. On my iPhone, the Facebook box is about 20px below the rest. I have tried all sorts of HTML and CSS coding, and nothing seems to get the mobile version to look right.
I was able to set up a class to move the Facebook box up by 20px, which made it look great on the iPhone but way too high on the Chrome version.
Check by adding the width attribute to the anchor tags of p element,
p a {
width: 30%;
}
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.
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;}
I've got a Facebook App that I've created. I want it to be 760 px. wide however it seems to be stuck at 520 px. When I view the source generated by Facebook I see this.
<-- <iframe name="app_runner_fb_https4fa04becb1d045950954937" id="app_runner_fb_https4fa04becb1d045950954937" style="width:520px;height:800px;" frameborder="0" src="https://s-static.ak.facebook.com/platform/page_proxy.php?v=4#app_runner_fb_https4fa04becb1d045950954937"></iframe> -->
That seems to indicate that it is using 520. Yet, the settings seem correct in the Advanced Developer panel.
Using Google I see a bunch of reported problems from years ago with 760 px; however, the option is still in the settings. Does this option work? Recently Facebook moved pages to timeline which freed up the left nav-bar. My app looks stupid without that space taken. It sits in the center of the page with 100+ white pixels on each side.
That screenshot is a setting for the width of your canvas app (apps.facebook.com/something), and the options are fixed to 760 or fluid width (which is dependent on your own CSS too, of course)
However in your post you mentioned Timeline and Pages, which implies your app is a page tab app accessed as a tab on a Facebook page.
If that's the case, the width setting which applies isn't there, it's under Page Tab on the front page of App settings and can be set to either 520px or 810px
I noticed that yesterday all the Fixed-width canvas apps started looking strange: the Facebook chrome is pushed away from the canvas and takes up all the browser page's width, as it does for Fluid-width apps (see Farmville for example).
Is this a permanent behavior, or a bug?
If it's not a bug, is it documented anywhere? I could not find any info on that on Facebook's developer documentation.
(Most fixed width apps look kind of strange right now)
Cheers,
Julien
Facebook have added fluid width to all canvas applications.
You can find it if you go to:
https://developers.facebook.com/apps
Edit Settings
Settings -> Advanced
Canvas Settings -> Canvas Width (Fixed sets the canvas page width to 760 pixels. Fluid left aligns the canvas page and sets the width dynamically to fill the page.)
Interesting links:
Blogpost from Facebook devs on the subject.
Showcase of games that use fluid width
This was indeed a permanent behavior, though not documented beforehand.
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