I want to set up Page Plugin on my website to display nicely on screens with a variety of resolutions and pixel densities. In order to truly achieve that, I'd have to have to possibility to use rems in data-width attribute. Unfortunately, when I enter a rem value, the data-width attribute is ignored.
Is there a way to make the plugin behave nicely with rems?
To make the Facebook Page Plugin responsive on initial page load, instead of using rems, you'll want to remove the data-width attribute and instead add
data-adapt-container-width="true"
This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.
I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).
No Dynamic Resizing
The Page plugin works with responsive, fluid and static layouts. You
can use media queries or other methods to set the width of the parent
element, yet:
The plugin will determine its width on page load.
It will not react changes to the box model after page load.
If you want to adjust the
plugin's width on window resize, you manually need to rerender the
plugin.
Source: https://developers.facebook.com/docs/plugins/page-plugin
You could make it dynamically responsive by reinitializing the widget on browser resize, but by doing that you run the risk of eating up memory very quickly.
There is some other stuff you can try here as well
Responsive width Facebook Page Plugin
Related
In my flutter application, there is an image I would like to show that comes from another website. On that website, the image is actually a <canvas> element in HTML. I have seen resources about turning the Flutter Canvas into an image, or turning one's own <canvas> element into an image in JavaScript, but never anything about getting it from an external page.
The site I am trying to use is the NOAA Radar view. I could use a WebView to show the entire site but that seems needlessly heavy when I just need a still image.
What would be the best way about getting a still image from the site's <canvas> tag. I tried performing a http GET on the URL but there is no <canvas> tag present there when I do it in curl (via the html package). I believe this is because the canvas is rendered with JavaScript after the page loads.
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 am an iOS developer and i do not have any knowledge about web development.I am trying to load an HTML page on UIWebView since the content size of web page is larger then the iOS device screen size,the webview shows scroll bars which has to be avoided in my case.I want to fit the page to the webview width.
I did read some posts here and understood that i should change the viewport of HTML to get things work as i desired.When i manually change the width and height properties of meta tag in HTML its fitting to my webview.What is the best method to change the view port before loading page.
(I have seen approaches to set scale using stringByEvaluatingJavaScriptFromString: in webViewDidFinishLoading: and i can not prefer doing this because the webview takes time to load the content till then it shows the scalled page then it refreshes.)
Is there any better method to change meta propertied then reading HTML file in to NSString and do poor string level manipulations?The HTML pages are always available locally on the device.
Please help,i need to get it fixed as soon as possible.
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.
I've done the prerequisite searching of stackoverflow and looking on the internet. I suspect that the answer is ' This can't be done. ' but I'm hoping someone here might have a solution.
My page loads fine, but many of my YUI components don't fully load before being displayed. For example, my DataTable will resize itself when displaying or my buttons will appear in their native form and then get YUI-fied.
Is there a way to delay the displaying of the page until all the Javascript is finished (i.e. all my YUI components are finished rendering)? I don't know how this would happen, as a lot of the JS depends on the DOM being present to manipulate it.
Is there a way to delay the displaying
of the page
If I understand correctly you would like to hide it until it's done?
If that's the case I have an idea:
add a wrapper around the element you
want to hide (or use
position:absolute to cover it)
give that div a background which use
the color of the surrounding with a
positive z-index
when all your javascript has loaded remove the
z-index or change the color of the background to transparent
Your javascript code would look like this:
do 1. and 2.
load your js
do 3.
Of course it needs to be synchrone.
As an alternative you could use visibility:hidden / visible on the element itself but I dunno for sure if it's well supported.
Try putting your Javascript in the head section of the page, as if it's near the end of the page, it'll load later (making the first elements load faster). OR, better yet, serve up your Javascript compressed and via a CDN, such as Amazon CloudFront so that it loads quickly.