When I paste https://testing.grabble.co.uk/user/index/user/ben.mu into Facebook, for some reason it's picking the banner image from the top of the page instead of the image indicated in the og:image meta tag.
However, https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Ftesting.grabble.co.uk%2Fuser%2Findex%2Fuser%2Fben.mu indicates that everything is being pulled through correctly. Anyone got any ideas why this might be? The image is 200x200, which as I understand it should be large enough for Facebook to not ignore it.
Additionally, Pinterest seems to ignore all our og:image tags as well, even when the images being set are 450x450 or larger. I suspect this is related.
Apparently Facebook will take a larger, more detailed image over the one you've indicated in the og:image property if the og:image URL doesn't appear in the page as an actual <img/> element. Solution to this was to switch the banner image from being an <img/> tag to a background-image:url() CSS property. Everything now works as expected, including on Pinterest.
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 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".
I want Facebook to ignore a particular image on a page. Is there any tag I can use that will hide an image from Facebook when users share a page?
We are using Joomla 3.4. The article pages that have an intro section that displays on category listing pages but is hidden on the actual article page. The intro section has a thumbnail 75 x 75.
In the main body of the article there is a larger image that we would like to display on Facebook but the og:image always selects the thumbnail first.
Is there any way I can add some parameter to the thumbnail so that it will be ignored?
Why don't you explicitly specify the larger image in your og:image tag? If you specify more than one og:image, as far as I know the first one is selected.
See
https://developers.facebook.com/docs/sharing/webmasters#images
https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
https://developers.facebook.com/docs/sharing/best-practices#images
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 set up a WordPress blog of mine and added a Facebook share button at the right sidebar, it's working but not showing the thumbnail image. I want to show only my default image as a thumbnail instead of my featured images. How can I set up a static (only my logo) thumbnail image for the share button ? I can see the
meta og:image tag and it varies with articles but I want only my logo to be posted. Can anyone help me ? Thanks in advance. Here is the url of my site- http://heera.it
When I lint your site: http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fheera.it
It shows that you have coded the og meta tags correctly.
Currently your og:image set to http://heera.it/wp-content/themes/shadows/images/hit.png
If you want to change this, change the meta tag's content parameter to something else.
Here's what the complete meta tag currently looks like:
<meta property="og:image" content="http://heera.it/wp-content/themes/shadows/images/hit.png" />
Update:
Actually the problem was image itself. Everything was fine but the image was smaller than 200px and Facebook didn't allow it. So increasing of the size of og image to 200px the image would be showed up.
All the images referenced by og:image must be at least 200px in both
dimensions.
Another ansower on SO.