I have image that is being generated in runtime on my website and I display it in html using
img src="data:image/jpeg;base64,<!-- base64 data -->"
Now, I want for Facebook to fetch this image, but if I do the same for og:image meta tag, facebook debugger gives me an error. Any solution?
meta property='og:image' content='data:image/jpeg;base64,<!-- base64 data -->'
Of course, I would like to avoid permanent saving of files since they are always different and it would get too crowded very quickly.
Reference URL: http://www.seemasandesh.com/epaper.aspx?blogid=9
Not possible. It have to be a public url so Facebook can download it when they need it. They will just cache it so there need to be a url to the original image
Related
I tried pdf, txt and png file url, only pdf url can't be open with browser if click the url, but trigger download.
I google this but only got how to fix, like instead with google doc or use pdf.js, or other html code.
What is the reason? the website ? Forgive me that i have no idea of website architecture.
When you get a file from a website, it has a content type sent along with it. Depending on the content type, the browser may choose to display it. For example, content type "application/pdf" might be shown in a browser, but "application/octet-stream" will be downloaded.
The raw URL on GitHub has content type "application/octet-stream" (a binary file) so that it will be downloaded.
The only way around this, since you can't change GitHub's code that sets the content type, is to get the data from JavaScript and parse it there -- by using pdf.js or something similar.
In the Facebook debugger, scraping the URL "https://www.givingway.com/organization/the-light-and-leadership-initiative" yields the error:
Corrupted Image
Provided og:image URL, https://d141thk7ygtt3c.cloudfront.net/043a7261-eb4f-48ce-9db6-8cbeefcf86df.jpg could not be processed as an image. It may be corrupted or may have an invalid format.
At the same time scraping the URL "https://www.givingway.com/organization/youth-in-action-against-poverty-and-hivaids-yaapha" works fine.
I can't figure out what causes this issue, as both pages:
are both produced from the same template, and share the same HTML structure.
have an og:image with the same structure.
<meta property="og:image" content="https://d141thk7ygtt3c.cloudfront.net/043a7261-eb4f-48ce-9db6-8cbeefcf86df.jpg" />
<meta property="og:image" content="https://d141thk7ygtt3c.cloudfront.net/b954d1df-57e6-4beb-acae-2916997a8e4e.jpg" />
Both images are JPEG.
Opening the image URL in a separate tab displays an image - which isn't the behavior I'd expect from a corrupted page.
This inconsistency occurs on various pages - certain pages are scraped successfully, while others aren't.
There is an open bug on Facebook (Opened Feb 8). When the og:image tag points to an image that is hosted on CloudFront the Facebook debugger behaves inconsistently - can process some and can't process others. Hopefully Facebook and CloudFront can solve this issue in the near future.
If you upload a image file to s3 by library(ex. python boto3), please check ContentType arguments.
I uploaded a image file with boto3 without ContentType arguments, the content-type of file in metadata set default value "binary/octet-stream".
After i passed ContentType="image/png" argument, metadata set well and facebook og tag looks good. (description below image, not aside)
I don't find a way how to like link to a file ? Is it even possible ?
Example:
https://example.com/somefile.jpg/zip
And i would like to share that link to, so title description etc. is very desirable but I don't know where to put tags for og:url etc. since there are no meta tags at this.
That is not directly possible; we can of course not put HTML meta elements into jpeg or zip file.
But you can try and tackle this either of those two ways:
Share an HTML document instead, that returns the meta data, and triggers the actual file download via meta refresh or JavaScript. Or,
make your server return an HTML document instead of the file, only when the requesting User-Agent is the Facebook scraper.
When the file picker is opened either using .pick or .pickAndStore, and an image is selected, a thumbnail of the original image is shown on the side.
I want to reuse that thumbnail, preferably from the already locally stored version. How can I access it e.g., with the filepicker API or other javascript library?
The thumbnail you see during uploading is generated by FilePicker javascript as a data URI (eg, src="data:image/jpeg;base64,...") it never really exists.
Once the file is uploaded you can use the image conversion rest API:
https://developers.inkfilepicker.com/docs/web/#inkblob-images
I have set Facebook metadata to let Facebook get the right data when sharing. But i am having troubles with the images. I have used the url linter tool from Facebook , but i dont know where is the error:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.agendaburgos.com%2Fagenda%2Ffiesta-curpillos-parral.aspx
The warning it shows is this:
The parser's result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input property =>content pairs that were not seen in the parsed result: og:image:url => http://www.agendaburgos.com/Imagen.ashx?url=uploads%5ceventos%5cfiestas-del-curpillos-en-el-parral_5417.jpg&h=200&estirar=true
The link from og:image is right, where is the problem?
It appears if the Facebook Debug Tool doesn't like the URL to your image. You are using a script to generate a resized version of the uploaded image. Try referencing the original image in your og:image tag and see if it helps:
<meta property="og:image" content="http://www.agendaburgos.com/uploads/eventos/fiestas-del-curpillos-en-el-parral_5417.jpg" />
Remember to scrape the page again to update Facebook's cache.
I think the reason you're getting this warning may be due to the way you are building the image URL using an ASHX handler.
Don't bother with the dynamic resize. Facebook will handle that once they get the image. Just send your image at full resolution to Facebook.
You also have a problem that you aren't explicitly defining an og:description tag. If you can, you should repeat your description tag as og:description.