We have a site here: http://blistergearreview.com/ which we recently setup the open graph meta tags on. The issue that we cannot figure out is on the homepage we have the Facebook recommendations plugin and even though the og:image displays correctly using Facebook's lint tool (https://developers.facebook.com/tools/debug) for all of the posts in the recommendations box they don't actually display in the box itself. We've tried several things and are stuck. Has anyone else had an issue similar to this?
I also recommend using a jpeg/jpg image instead of png.
You may be able to see it using facebook debugging tools but when a user shares one of your links it may still be showing an outdated image.
It seems that facebook doesnt like png files...
I see your image (http://blistergearreview.com/wp-content/uploads/2011/07/012011_BlisterLogo_white2.png) is 309px x 73px. This is larger than the acceptable 3:1 aspect ratio maximum Facebook accepts. Get the width/height aspect ratio less than 3.0 and your image should appear.
I just wish Facebook would check the size in the linter tool so it would error out on images that don't comply (as you would have seen the error there).
For additional requirements, please see: https://developers.facebook.com/docs/reference/plugins/like/
Related
I've been working on an Android game, and I wanted to setup a webpage to redirect to the download page. This part was easy.
So I share it on my facebook timeline. Ok, my screenshot gets cropped horribly. Spend 30 minutes reading all sorts of guides on how to point facebook to the proper image for a thumbnail ...
No matter what I do, facebook always, always, always shows a horribly cropped image. I would like to simply specify the correct image to facebook using og:image but it seems to always ignore this. I've tried many different combinations of properties and it's always wrong. I've tried making the og:image square, doesn't matter. I've tried making it smaller, doesn't matter.
It's also hard to figure out if facebook is caching an old image or not, no matter how many times I go on the debug link and tell it to scrape things again.
Can anyone tell me any change I can make to show the entire image instead of the horrible cropped version?
I went to http://validator.w3.org and made sure the page didn't have errors beyond the og ones you apparently can't avoid.
The page is: www.playlunapuma.com
There must be a way to convince facebook to show a different image that looks good.
The thing that finally worked was resizing the og:image to 600x315 exactly.
For some reason the object debugger displays all the data that I want to share with no issues but the share dialog fails to display the image. I have searched the site looking for answers and most of the solutions recommend clearing the browser cache. I've done this countless times but I still cannot make the share dialog display the image.
According to the open graph specs my image is valid so I do not know what the hell is going on.
How could I approach this? Should I report it as a bug to Facebook?
Is it because my image is not a square?
I have been testing this in a QA environment so it is not because of localhost.
Thanks!
I run a Wordpress blog. Here's the URL to our main page: http://theoriginalsocitey.com
For some reason, when links to posts on our site are shared, the featured image is not correctly detected. When I put a link to a post through the Facebook debugger, some of the usual minor errors come up that do for all sites, including those that work perfectly. I've tried fixing the "tags in body" error with success, but it didn't fix the problem, so it is not the issue.
All other OG tags are displaying correctly, just the og:image has the issue. The debugger even acts like it knows what image to use, but refuses to do so. It will say the correct image but say "the image is not large enough" when it clearly is, for all posts.
Can someone please help me figure this out? It's been days of countless different attempts of fixing this including plugin deactivation, reactivation and new installations and nothing has worked.
Here's an example of a post URL to use for debugging: http://theoriginalsociety.com/quest-castro-jon-bellion-logic-24-freestyle/
It seems like the open graph image is too small (150x150), therefor Facebook is using the larger image it found on the page. It's in your best interest to give Facebook as large an image as possible.
[https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/][1]
og:image – This is an image associated with your media. We suggest
that you use an image of at least 1200x630 pixels.
Try providing a much larger image and see if that solves the problem.
I am having one problem in my Facebook share button.
I have 8 images in my current post and all the images are greater than the size of 200x200.
But when i click on the Facebook share button it will only displayed 3 images out of 8 from which we can choose thumbnail.
I have also googled for this problem and according to many suggestion I have also reviewed
https://developers.facebook.com/tools/debug link for the debugging the problem. But there also all the 8 images are displayed properly.
Any help would be appreciable.
Thanks.
This is a great question, but I think the answer can disappoint you.
Short answer: far I know and searched, you can't do that.
Long answer: you can optimize this scenario with some good static images - or if you can be more creative, dinamically images.
The first tip
Add a static image to every share. You can do that adding Open Graph Meta Tags inside your head section of HTML:
<meta property="og:image" content="http://www.myawesomesite.com/logo.jpg"/>
With the code above you'll say to Facebook always show this image as an option in Share button. According to Facebook documentation is recomended use images with at least 1200 x 640 pixels, because this will share a post with a large image. Following is the preview of one post with the recomended dimensions:
And now a post with a small image:
The second tip
In this post I found a possible good solution for your problem. The author used the same principles of the previous tip, but he used another practical way to do that.
He used the following tag:
<link rel="image_src" href="http://myawesomesite.com/logo.png" />
This tag is almost the same the previous one, but I think rel="images_src" can be a interesting thing. The link tag is applied in the head section of the website too (acording to W3C page), but I think you can lie to Facebook, because they're bad guys and don't provide a good API.
I was wondering - and this is just a supposition - why not try apply image_src as ID of your post / website images? I can't test this currently, but for now is the best thing I can think.
Conclusion:
Facebook isn't very good in a lot of different ways, and they don't provide everything we need - like this interesting function. But maybe we can fool the Facebook using some strange techniques.
If you don't want test things like this, the only way you can choose images to share is giving to your page the static OpenGraph Meta Tags of the first tip.
I expect it helped something - sadly I think this is the best answer for your question.
Our website was recently redesigned and since then I have been unable to get the correct image to appear when I choose link.
For instance:
If I post this link:
http://www.horrormovienews.net/article1184.html
It does not show the image of Ethan Hawke as one of the choices for me to post along with this story. I have asked a few other people (co-workers) and some friends who live around the USA, PA, NC, etc. and they can not get that pic as a choice either. One person who lives in MA can see it when he posts a link.
(This happens to every news story in our network of sites since the theme was changed on the sites)
Another bizarre thing is it WILL show the image for this story:
http://www.horrormovienews.net/article1160.html
but not the one at the top of this post.
I have even used the Facebook lint tool about a week ago to try to refresh the cache.
I have tried to many different things to try to fix thing. I changed the image path, the size of the images, etc. Nothing seems to work.
Does anyone have any idea what could be causing it? Any help would be much appreciated.
You need to specify og:image tag. See your results here: http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.horrormovienews.net%2Farticle1184.html
Fix up those warnings and then you should be able to share the link much more consistent.