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
Related
I'm having an issue with getting Googlebot to correctly render my webpage(s).
It's rendering the header and one "row" of my page (just the page's top background picture), and then failing to render anything beyond that, not even the footer, missing about 3/4 of the page.
My site is www.runparis.fr and screenshots of the rendered fetch are attached.
Other potentially relevant information includes:
The code that was fetched is missing nothing
The fetch status is complete (no missing resources)
The problem is site-wide; it happens on all my pages
When I check the cache the whole page is rendered perfectly
Fetch as Google (mobile) renders the site perfectly
The site looks fine in any of my browsers
There's nothing funky going on in my page; It's just background images and text. Easy stuff.
My questions are:
Will google's inability to render the page have an impact on how Google ranks it?
Is there any advice for solving the problem and having google render the page correctly?
Thanks for any help or advice anyone can offer!
Googlebot render 2
Edit:
I've done another Fetch as Google and render for a test page and found that Googlebot will stop rendering after it has rendered any background images that I've set to "full height" in my page builder in my Wordpress installation; that is, any image that is set to take up the full height of the browser window kills the render.
So, it will render everything until it hits this image, renders that, and then stops.
As stated before, my page isn't fancy; It's just simple background images and text. It surprises me that Googlebot has trouble rendering what any browser can render perfectly, especially given the simplicity of the pages!!
So, my questions are:
Will Google not being able to render my page impact the way Google ranks my site? (given that what's in the cache renders fine on my browser)
And, Is this a common problem? Are there any fixes that will let Google render my pages correctly?
Some new information supplied by an external source:
"validator.w3.org/nu/?doc=http%3A%2F%2Frunparis.fr%2F"
"jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Frunparis.fr%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en"
The various errors and warnings might explain why rendering is hampered in some tools such as Google Fetch and render.
Browsers are much more forgiving than all these validation and rendering tools.
I'm guessing that in Google's rendering tool the css rules that set the background image(s) and foreground image(s) and text content are being applied in the wrong order so background stuff ends up on top of foreground.
Does this new information help anyone understand why Googlebot would be having trouble to render the page?
I have experienced the same problem, the only viewable thing on the renderer was the hero section, and it was caused with defining height:100vh; for the hero section.This problem occur when using vh css units, or in some cases height:100%;
Here is the thread and discussion that really helped me out to understand the issue:
I believe that the google bot is doing this:
1. Looking at your website with a 1024x768 viewport.
2. Checks how tall the window.scrollHeight is
3. Resizes it's virtual browser to be the same height as the window.scrollHeight
4. Takes a screenshot and
5. Checks to see what elements are visible, and tallies SE score as appropriate. (Dinging content that is not visible.)
I partially solved this issue with inserting extra rules into mediaqueries: So for resolutions around 1024px width, I put max-height:800px; (rule height:100vh; stayed active) on my hero section, and on mediaquery for rules around 1280px width and up, I set max-height:none; (rule height:100vh; is active).
I'm still loosing around 30px of height in the renderer, but that's being cut off at the end of the page, with no text and any meaningfull content.
I have the similar issue with (Google Mobile-Friendly) tool and (Fetch as Google) mobile version is broken because Googlebot is not loading my style.css and affect my rankings
so I output my stlye.css code for mobile manually
add_action('wp_head','load_mobile_styles');
function load_mobile_styles () {
if( wp_is_mobile() )
{
ob_start(); ?>
<style>
enter code here
</style>
<style>
enter code here
</style>
<?php
echo ob_ob_get_clean();
}
}
I have read many similar posts here and tried the following but no luck:
Replaced og:image with larger image banner (larger than Facebook's required standard)
Commented out the <img> tag of that pencil icon image, yet Facebook debugger still showing that small tiny little icon. When I view source from browser, confirmed that pencil icon has been commented. (NOTE: I've put back the pencil icon image for editing convenience.)
Renamed large image file and update og:image.
Specified og:url of the current page.
All the above not working at all. Can somebody please help? Here is my URL: http://tringo-medical.blogspot.my/. Thanks in advance!
Ok guys, sorry for the impatience -- we just have to wait for Facebook to clear the cache. For my case, I had been waited for almost a week for them to get it cleared, which wasn't in 24 hours as what others claimed. But Facebook shouldn't defeat their own rules either by choosing tiny icon image as the post image. So the solution is to "wait".
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 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.
hey, i want to set a long page app without fb will limit the height of my app and append scroll
i did iframes& canvas and autoresize in settings and apply that code and its limits me in ie its shows scroll and in firefox its cuts the content:
the code is here:
http://pastebin.com/bmweWuTS
please help
I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - CSS + FireFox: hiding scrollbar on iframe with scrolling=yes) 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.
I am actually having the same issue, it started yesterday, but i have not changed the code. Facebook having some issues maybe?
I was using setAutoResize, but started getting the scrollbars, change to setSize (to something somewhat bigger then the content) and looks fine in firefox, but chrome still scrolls... odd but im thinking facebook problem.
Edit: Facebook forum thread on it: http://forum.developers.facebook.net/viewtopic.php?pid=315870#p315870