We are having problems with Facebook not showing images, which we noticed from 17 May.
We have images tagged in og:image, and this is showing up as a blank white space in the object debugger. Clicking on this blank white image/space shows the actual image expected in a new browser window, there are no issues with viewing the image within or outside the network (we tested using different devices and proxies to simulate access from outside Singapore, which is our main audience). The image is 300x225, but the debugger also show the "image not big enough" warning.
Sample scenario (HTTP removed from some links):
URL in question: www.hungrygowhere.com/dining-guide/what-to-eat/5-family-friendly-restaurants-to-book-online-*aid-53763f00/
og:image meta on the page: <meta property="og:image" content="http://staticc04.insing.com/images/f3/e0/10/00/pc_300x225.jpg" />
Warning on the debugger page: "Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'staticc04.insing.com/images/f3/e0/10/00/pc_300x225.jpg' will be used instead."
Noticeably the src attribute on the debugger is similar to this: fbexternal-a.akamaihd.net/safe_image.php?d=AQAfsdJpTPWk1IqW&url=http%3A%2F%2Fstaticc05.insing.com%2Fimages%2Fe2%2Fdb%2F10%2F00%2Fpc_300x225.jpg and going directly to this image via the browser shows a blank 1x1 gif. We tested using a 600x600 image (after seeing a post about maintaining aspect ratio) but it's the same: external.ak.fbcdn.net/safe_image.php?d=AQDZBb-0AZjyOp_B&url=http%3A%2F%2Fstaticc03.insing.com%2Fimages%2F57%2Fde%2F10%2F00%2Fstb_600x600.jpg
Our hypothesis is that safe_image.php is not accepting the image it retrieves, but we have no idea what or why this is happening.
We have a ticket open on the Facebook bugs support forum for this (developers.facebook.com/bugs/647132798635052) but no response after the initial round of clarifications, but we are hard pressed to find a solution.
There were no changes to our image storage solution over this timeframe. No rewrites or redirects, the image URLs are files by their own right.
Edited to add:
It is strictly safe_image.php that is choking on our image. See a screenshot from the object debugger: http://i.imgur.com/kl336l9.png
The image on the right is the same og:image, but since it's accessed directly by FB (not going through safe_image.php), it shows up.
We have been checking logs and we are returning HTTP status 206 to Facebook (we have been doing this for a while now) but this was changed to return 200 at all times. No change, we are still not getting any images.
Related
Backstory to the below issue:
I'm using the jQuery plugin Cropit to produce an image which I get in data URL form (the user uploads an image and Cropit allows them to manipulate it, when the user is happy, Cropit exports the final image).
This data URL is attached to the product (this is a Shopify website) via Shopify properties (in a similar way you would attach text for an engraved product) and then when the order is created, I have an app listening for new orders and I pull the data URL from the order.
From testing, I can confirm that the data URL is wrong / corrupted / broken at the time the order is placed and not being broken in transit.
Original Question
I have a bit of a weird situation and I can't find any similar situations online.
I'm being sent an image in data URL format (from Shopify if it's relevant, I have written a private app and their webhook is sending me an image)
The image is in a data URL format that starts with, as an example,
data:image/png;base64,iVBORw0KGgoAAAANSU.....
The problem I am having is sometimes (and it's maybe less than 10% of the time) when I get the image and try to print it, it's missing the bottom chunk of the image. In a PDF, it considers the image corrupt, and in a web browser, it just sees the bottom of the image as transparent, however much is missing.
This is what it looks like in Inspect Element on Google Chrome when you hover over the image URL (image has been purpled out for anonymity)
My question is, does anyone know why?
We can't find a correlation with browser or device type. And I'm not sure if it's because part of the data URL is somehow missing (maybe a character limit, because it's a really long string!) or if it's the type of image. Might possibly be something going wrong in the upload process?
Is anyone able to shed any light? It's such a weird issue I'm not even sure what to google!
And just to confirm, the image absolutely has to be sent in this format for a whole series of reasons, mainly Shopify restrictions so I can't send the image in file format.
Our app shares a custom open graph story that included a 1200x630px preview image. The preview image however always displays as a small square when posted to the Facebook timeline.
As mentioned here, the header of the website I'm linking to already contains og:image and og:image:width and og:image:height. Still the image is cropped and only a square on the left is visible.
Is there any trick to make the image use the full width? User generated images are not the solution to go for because it removes the link from the open graph object and also stores the image in the user's photo albums.
I know that this has to be possible somehow because it works for apps such as Runtastic Results.
I'm building a project in ASP/MVC, and I'm having an issue with some of my images. I pull them out of a database as bytecode, convert them into Base 64, then render them. This process works fine with about 90% of the images I have to upload, but for certain images for some reason, they render cut off, as here:
Unfortunately, this only seems to happen in Chrome/Firefox, so I have to assume it's an issue with rendering. In fact, here's the image as the base 64, you can view it by using it like a url in your browser, if security allows. Otherwise you can put it in html tags and try to view it that way. This will only render correctly on IE as far as I can tell.
http://pastebin.com/RYasvfj0
If I view this image, right click, then save it, the saved image will be correct:
I'm at a total loss here. It's A) Inconsistent that the images won't work correctly, but
B) Consistent at when in the image it gets cut off. It's always the same portion through the image that it ceases loading on FF/Chrome
Any ideas on what's triggering those browsers to fail, and how I can check for it?
e; The base 64 here is padded; it's generated by C# via Convert.ToBase64String
We are using the og:image property to supply facebook with the correct image, but in some instances it get's more images which it parses from the DOM. eg:
http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ffunda.nl%2Fkoop%2Futrecht%2Fappartement-48611144-breedstraat-122%2F&t=Woning+te+koop%3A+Breedstraat+122%2C+Utrecht
Only the first image should be shown there. If you look in the debugger it looks fine:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.funda.nl%2Fkoop%2Futrecht%2Fappartement-48611144-breedstraat-122%2F
Anyone knows whats going on here?
I've just encountered this issue in a site I maintain.
It appears that bloody Facebook changed again things without notifying anything to developers..
Image for og:image must be now at least 200x200px.
If it is smaller, than facebook will take other images that it parses from the same URL, even if these images have nothing to do as leading image for that URL.
Just take care that og:image is big enough and it will be ok.
* Notice that even after you change it, it may appear wrong for some time, if the URL is already cached in FB. To solve it immediately, just pass again the URL to the FB debugger.
As of this morning (12th July) a server script we used to automatically add updates to a facebook page is including a thumbail of the website logo.
We add an image ourselves if there is a suitable one - but leave the picture variable as blank otherwise.
As of today Facebook grabs the image set in the webpage og:image setting (or the first off the page if that is disabled) and adds it to the post update.
Net result, every single post this morning has the site logo as an image, and it looks a right mess.
Question - how can I set the image variable to NULL (or equiv) so that it wont try to generate a thumbnail where one is not explicitly defined?
Thanks
(Every help search I make returns results explaining how to add a thumbail - I want to get rid of it!)
A slight workaround has been to define the thumbnail image as a 1x1 png file, which forces it to use that instead of grabbing the site logo off the linked webpage.
Would still prefer to find a way of forcing it to not use a thumbnail at all though - as was the default behaviour until a couple of days ago.