I spotted that one (just one, rest is ok) shared link on wall of group I am in isn't look properly. It's just grey rectangle, you can see it on included image. I wonder why it's displayed this way because I copied url and pasted it to facebook open graph object debugger. There are no warnings and preview generated by tool is ok (so image pass dimension requirements). I also tried to put that url on my profile and I can see image. Sorry that I don't paste urls here but I don't think I'm allowed to do this. I hope someone still want to answer my qestion. What is reason of this behaviour?
Grey rectangle on shared link
There can be several reasons for this situation.
I assume you use some service provider to generate image.
Facebook crawler visits your site and make POST request which uses no cache content, which also makes your site fresh render for facebook request but also may cause timeout error in some cases. If image thumbnail is generated with some service provider it can be the cause.
Thumbnail service providers often causes mistakes by themselves. Take under consideration that what you see on facebook wall is the very first render of the image in the thumbnail provider. Check twice parameters that you send to the service and maybe there is some problem with alpha channel (if it's PNG image).
That's for my guesses. Hope it will help you.
Related
When I request a photo from Facebook, some urls are like this:
https://{hidden_for_privacy}79141548_n.jpg
And others are like this:
https://{hidden_for_privacy}23364315_n.jpg?oh=c566c56ca9fd7eb1ed5d8bfca4255e84&oe=544AF123&__gda__=1414682395_6d2cb778f5b2c857d1be1c781e81cdfa
The second one has a few extra GET parameters (oh, oe and __gda_ _ (space is there to prevent bold).
When these parameters exist, the image will be invalid after a few days because those values will be different (you can check this by doing a new API call to get the same photo).
What do these parameters mean and how are they linked to the maximum timeframe?
Thanks!
I know some history and its purpose.
Originally facebook image url look like this
https://{*snipped*}/XXXXXXXXXXX_b.jpg
but there are more than on size of image available so people have access to thumbnail image can simply replace suffix _b with _n
(So now it is https://{*snipped*}/XXXXXXXXXXX_n.jpg)
to access to larger version of the image (if available).
Some time later facebook implements central image system that can dynamically crop and resize image on the fly upon request.
The url provided by facebook at this point of time may look like this:
https://{*snipped*}.fbcdn.net/hprofile-xxx1/v/t1.0-1/p32x32/12345678_123412341234123_4123412341234123412_n.jpg
And when people see the url their curiosity arise.
Let's try remove some parameter from the url.
https://{*snipped*}.fbcdn.net/hprofile-xxx1/v/12345678_123412341234123_4123412341234123412_n.jpg
And what they get is the largest and most complete version of the image they can possibly get from facebook server.
This method was working for a long time.
When people see image in their email (mostly profile picture) they can get complete version of image without even log into facebook.
It was working everywhere include private profile picture.
The quick fix and cheapest solution for facebook is to sign request path with some signature algorithm.
I guess they use HMAC as the core algorithm and derive HMAC input from various source including request path.
This will ensure that the only party who can generate valid url is the one who have HMAC key. (presumably just facebook)
Now old issue is fixed you can not use it anymore but there are more than one issue that can be fixed by adding MAC.
It is invalidation of access to images.
Let say people once publish their photo (now other can have both valid request path plus signed signature from facebook) and later on they change their mind and make the photo private.
However, people with valid url and signature can still fetch the image from facebook server.
To solve this issue with super cheap resource considered that they already implements HMAC calculation.
(And to obscure the fact that facebook does not actually delete your image from their system when you delete it.)
They decided to mix value derived from timestamp into input of HMAC.
(See RFC-6238 for similar usage)
So signature refreshing from facebook is periodically required to gain access to photo.
This solved the latter issue with very cheap additional resource.
And here you have it.
Some of history and rationale behind facebook's parameters.
I'm certain that there is no official document about the time frame but it should not be difficult to do some experiment yourself considered that now you know that the value of time frame you want is fixed and predictable.
I think they are facebook image session keys and they produced by facebook on every image showing. So fb servers consider that the request for an image is allowed and known by facebook itself.
Sorry for my bad English and my shallow comment, but i think the solution of this problem may be that fetch a url for a new image session when old one expired. Or i don't know your whole system but maybe you can connect to that assign-keys-for-images mechanism of facebook directly and get all fresh links.
If I am right about those parameters' working mechanisms purposes, i think there is no second solution.
Sorry for my bad English again.
I found the answer (finally). The point is that the photos are not public. If you request a private photo through the API they add a query string so that the url is not valid anymore after some time. Therefore the photo is still somewhat "private". The feature is understandable and there is no workaround other than downloading the image to some other place.
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.
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
Is there a url we can src for the FB logo that will be the same src as what gets generated after FB.init completes?
I doubt that I can hard-code the FB CDN link below and expect it to work for all users and also stay up-to-date.
https://s-static.ak.fbcdn.net/rsrc.php/v1/yL/r/FGFbc80dUKj.png
I basically want to reduce another image request for a FB logo sprite that already gets loaded with any other social plugin I have on my site.
Try using font-awesome's icons.
fa-facebook-official: Font Awesome Icons
and apply facebook logo's official color in css ( #3B5999 ).
Given that the URL still (after 5 months) resolves to the image correctly, I would say that you are probably OK using the link you have.
As a fall-back, though, you may want to consider hitting the link with an ajax call and changing your usage of that URL to a locally cached copy just incase the link ever goes dead. It's slightly more work, but it's a functional way to use a 3rd party's image and still fall back to your own version if theirs goes away.