For some reason, facebook's safe_image.php script isn't generating thumbnails, properly. It's generating a 1x1 image... even though the correct image is linked in the script's parameters.
Example:
<img class="img" alt="" src="https://s-external.ak.fbcdn.net
/safe_image.php?d=AQBtrCt_Es_KsED0&w=90&h=90&url=http%3A%2F
%2Fwww.southlapatriots.info%2Fimages%2FScamra%2FJayCastilleCouncil2.jpg"
The linked image is correct, but it is still only generating a 1x1 image.
Got the same problem today, in my case was an https issue.
I automatically redirect every http requests to https, and while the browser works this out normally, FB's safe_image.php doesn't. If you have such redirect as well, you may want to disable it for just your og:image file.
I also get into a similar problem. My problem is because of the image name has a "space" in it. so it is not appear in the facebook debugger and also in sharing.
So i fixed the issue by replace space with hyphen("-") through coding part. After that i debug the url in facebook debugger, it appears. That means Facebook wont show the image name with "space". But there is no logical reason behind this. Anyway it will help someone.
For more information check this answer posted by Patrick D'appollonio. It helps me.
Are you using any sort of gzip compression for your images? We are seeing a similar issue, but we compress our image with gzip and set the headers. Browsers are rendering fine, but Facebook is essentially displaying nothing.
safe_image script code doesn't support having a % in the app's image url (which is probably why the image turns into a 1x1 transparent pixel)
so the solution is here . Try to follow the instruction in the first comment by chris
In my case, the directory including genuine targeted images is under ".htaccess" control, in which images being called from external server is prohibited.
Example of blocking ".htaccess" file such as:
<FilesMatch "\.(jpg)$">
SetEnvIf Referer "^http://www.mysite.jp" ref_ok
order deny,allow
deny from all
allow from env=ref_ok
</FilesMatch>
Related
We've had news articles sharing to facebook correctly for a long time but as of last weekend we are starting to see the wrong og:image when shared to facebook. Using the debugger tool, the first time it is fetched I get a warning "image too small" which is probably why it defaults to another image. But the image in question is not too small. Could this be some issue with headers of my images in Amazon Bucket maybe? Cannot pin point the problem yet.
Pressing scrape again 2 times then I get the correct og:image
As an attempt to fix this I have added og:image:width and og:image:height but so far to no avail.
Debugger url: https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fwww.maltatoday.com.mt%2Fnews%2Fworld%2F79568%2Fsicily_firefighters_caused_fires_for_cash
Adding Height & Width is NOT enough for everyone.
I've done the same for my websites and it didn't fixed it. It always needed a second Scraping, and then it will re-fetch the correct image.
Even after adding all of the meta OG tags didn't improve the situation.
I've noticed A LOT of other people experiencing this same issue, and adding height & width meta doesn't solve it.
In this case you'll need to add an iframe in your footer, and set it to be invisible and on page load to go to the facebook debugger, and scrape the url one more time for you automatically.
This is the solution according to Facebook. You'll need to scrape a second time (reference best practises under "Pre-caching images"). This is counter productive to be done manually, so just add the following code in your footer and you're done.
<iframe style="width:0; height:0; margin:0; padding:0; border:0; position:absolute;" src="https://developers.facebook.com/tools/debug/sharing/?q=<?php the_permalink(); ?>"></iframe>
A few notes to keep in mind:
This link leading to the debugger tool is valid in the time of writing this (August 2017). I've seen the link being different in the past, so if the link has changed in the future, just change the link in the iframe appropriately.
The part of the url right after "?q=" is the place where you place your link that you're posting to Facebook. I've used the_permalink() because it automatically checks the page's url and puts it in the link. If you'll like to do this for a single post, then just replace this with your actual link. This is for a WordPress php page. If this is not the correct code for your page, then change it into the language you're using.
I hope this helps everyone looking for an answer of this weird Facebook bug. It could have saved me ~6h of my life.
Cheers
Credit to user Dan for giving a clue on how to solve this.
Adding og:image:width and og:image:height as additional meta tags solved the issue for me. User nunsy_grey mentioned that this doesn't solve it for some user so worth looking at this alternative solution
Images aren't being shown when a person shares a URL to our site.
Using the debugger at https://developers.facebook.com/tools/debug and putting in the URL of http://www.muscleandfitness.com/videos/training/workout-101-overhead-pullover-video It shows that the meta tags are correct and an image is shown.
However share this link on Facebook.com and no image is shown.
Using Firebug I can see that the image scraper only returns a 1x1 pixel.
https://www.facebook.com/ajax/composerx/attachment/link/scraper/?scrape_url=http%253A%252F%252Fwww.muscleandfitness.com%252Fvideos%252Ftraining%252Fworkout-101-overhead-pullover-video&composerurihash=2
composerurihash 2
scrape_url http%3A%2F%2Fwww.muscleandfitness.com%2Fvideos%2Ftraining%2Fworkout-101-overhead-pullover-video
Safe Image returns a 1x1 pixel: https://fbexternal-a.akamaihd.net/safe_image.php?d=AQBBILbPW7Po7Cds&url=http%3A%2F%2Fwww.muscleandfitness.com%2Fsites%2Fmuscleandfitness.com%2Ffiles%2FOverhead-Pullover_rotator_0.jpg
I need help in fixing this issue so that we can easily share URL's with the image.
Found that adding a trailing slash on the URL makes it work. It also seems to work better if the link comes after some words.
Example:
Wasn't working: http://www.muscleandfitness.com/news-and-features/features/everything-arnold-february-mf
but this worked: http://www.muscleandfitness.com/news-and-features/features/everything-arnold-february-mf/
I also get into a similar problem. My problem is because of the image name has a "space" in it. so it is not appear in the facebook debugger and also in sharing.
So i fixed the issue by replace space with hyphen("-") through coding part. After that i debug the url in facebook debugger, it appears. That means Facebook wont show the image name with "space". But there is no logical reason behind this. Anyway it will help someone.
For more information check this answer posted by Patrick D'appollonio. It helps me.
I'm trying to create a landing page on facebook with the Static HTML application, but the image does not appear in IE8 show only at 9 and other browsers like Chrome and Firefox.
The application link is: https://www.facebook.com/hyundainic/app_128953167177144.
Yet another application that looks like:
https://www.facebook.com/SomosEskimo/app_367456286664440.
This if displayed in all browsers, except that technically I do not know if it's the same.
I'm editing the html / css and occupy absolute and relative positioning, I thought that this could affect and remove it, but the problem persists forever.
Can someone help me with this?
I think the issue is probably that you are using an absolute, non-SSL URL for the image source, and the links you posted to the app use SSL. If you leave the protocol off (example: "//whatever.com/myimage.jpg" instead of "http://whatever" or "https://whatever") the browser will use https when needed.
However, it looks like your image doesn't work over SSL:
https://hyundai.com.ni/img/quickservice-fb.jpg?id=3
You can try viewing your app using http:// and confirm it displays ok in all targeted browsers to see if this is really your issue.
The Goal: There will be a Facebook [like] and [send] option underneath all our products and it will show the proper thumbnail image.
The problem: All the OG (open graph) tags are in place. According to Facebook's test, it works. I can see the preview image (as I should) on their test site. There, it works! In reality, this doesn't work at all. Outside of Facebook's test page.. it NEVER has worked.
Direct link to an example page showing the problem
The Open Graph tags are in place, including this:
`<meta property="og:image" content="http://img.loveculture.com/ProductImages/1044214_15_1.jpg" />`
Now it's randomly choosing images through out the page. I am beyond frustrated.
I'd like to rule out a few things.
Yes, the images are on a subdomain. Even using images on the same domain gives random thumbnails.
Yes, I've contacted Facebook about this and the issue was ignored. I'm losing hope on this issue.
UPDATE
Great.... Now it decided to use one of the pink arrows for the thumbnail image.
No, according to the Facebook debugger it doesn't work:
Open Graph Warnings That Should Be Fixed:
Tiny og:image: All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.
The file you are passing is 180x258px. Pass the full size image and it should be fine.
Ok, problem solved. Thank you all.
The issue was within the URL used within the HTML.
<div class='fb-like' data-send='true' data-width='450' data-href='http://www.loveculture.com/Item/ItemDetailView.aspx?StyleId=1043361' data-show-faces='true'></div>
It was a war between two legit urls.
http://www.loveculture.com/Item/ItemDetailView.aspx?StyleId=1043361
vs
http://www.loveculture.com/Item/ItemDetail.aspx?StyleId=1043361
I'm glad this has been resolved.
I've been at this for almost 3 days straight and now I can't even think clearly anymore.
All I'm trying to do is to get my featured image thumbnail to appear when I paste the link in Facebook.
I'm using the Wordpress Facebook Open Graph protocol plugin which generates all the correct og meta properties.
My thumbnail images are 240x200px which respects the minimum requirements and also respects the 3:1 ratio
I've made sure there's no trailing slash at the end of my post URLs
When I use the Facebook Object Debugger, the only warning is in regards to my locale, but that shouldn't affect it.
Facebook appears to be pulling the right image, at least the URL is correct, but the image appears as a blank square
I've gone through pretty much every thread I could find in forums, but all the information available is about using the correct og tags, which I believe I'm already doing.
Thank you very very much for any help, I'm desperate!! :)
You can troubleshoot the OpenGraph meta tags with the Debugger https://developers.facebook.com/tools/debug - this can at least show if you're using the meta tags properly and if Facebook can 'read' the image.
I finally figured out that the root of my issue was the fact that I was using an addon domain (which is really a subdomain being redirected to the top level domain) and I read on eHow (of all places :) ) that Facebook has trouble pulling data from redirected domains.
Not sure if there was another way around it, but I simply ended up creating a seperate hosting account and everything is loading properly now.
one problem youre going to run into testing is that often the first time your page or post gets liked, fb keeps whatever img it finds in your meta tags or by searching your page. so, you'll keep changing your img meta tag and still it wont show the right pic. it's very anoying. One way to get around it is to change the slug of your post. now, it has a different url and to fb, it's a different page. The downside is you lose all the likes that go with your orig url. Not a problem with a new site.
I ended here googling another problem. Maybe this might help someone:
Please bear in mind that the facebook scraper works asynchronously and will need some time (during my tests around 10 minutes) to be able to display an image after seeing it for the first time.
For more information, here's a more thorough answer on a similar problem.
Indeed, as Andy Wibbels points out the FB debugger is a really handy tool.
I faced a similar issue with a server's og:image tag pointing to a secure subdomain which actually mirrors a CDN server,
<meta property="og:image" content="https://subdomain.pathToImage.jpg" />
<meta property="og:image_secure" content="https://subdomain.pathToImage.jpg" />
The FB debugging tool allows you to see the errors that FB encounters when trying to pull the image.
In my case the subdomain was not registered under the SSL certificate used by the HTTPS protocol. Hence FB was getting the following error,
Curl Error : SSL_CACERT SSL certificate problem: unable to get local issuer certificate