I have a Facebook Like button on my website, for a half a year now. Used OG tags to visualize the like. Everything tested thoroughly, everything showed up well on the 'basic' wall, as well as the 'timeline' wall as well in the news feed.
But al of a sudden, when someone likes the page, the image is being cropped on the timeline wall. The original image is 200px x 200px, because the Facebook developer tool mentioned these dimensions.
I don't think it is a image dimension issue, because a 96x96 image is also being cropped. With cropped i mean that the top and bottom part of the logo are cut-off.
Now i have an old post (march 2012) where the image was not cropped and a post (few days ago) where the image is cropped. The difference between those two is the url of the image:
One where the original image is OK:
https://fbexternal-a.akamaihd.net/safe_image.php?d=AQCAhHvmadrTku6h&w=155&h=114&url=http%3A%2F%2Fwww.poobies.fr%2Fsite%2Fimg%2Fsocialmedia%2Fsocialmedia_logo_fr.png
And one where the image is cropped:
https://fbexternal-a.akamaihd.net/safe_image.php?d=AQCAhHvmadrTku6h&w=155&h=114&url=http%3A%2F%2Fwww.poobies.fr%2Fsite%2Fimg%2Fsocialmedia%2Fsocialmedia_logo_fr.png&cfs=1
see the parameter &cfs=1?
Is there some option or some OG parameter that makes sure that the image is not being cropped by Facebook?
Thank You
I did some research and found the problem is most likely a combination of using a PNG and having an image with a white background.
Here's my original PNG (90 x 90 px) with a white background that gets cropped:
logo2.png
Then the same PNG with a darkened background that uses the full image size
logo2dark.png
JPGs and GIFs with white BGs worked fine
logo2.gif
logo2.jpg
As a side note, Facebook didn't like when I served the images through https.
It would be nice if Facebook would document these changes they make, but alas.
I've noticed this too. I think it's just Facebook playing around with the way it displays images on newsfeeds / timelines. My images used to be cropped from the slides but all of a sudden Facebook stopped cropping then. It was either a bug or a temporary change that was later reverted.
You cannot set the dimensions of og:image manually.
Related
I have defined an OpenGraph image at my site (url: https://www.psychotherapiepraxis.at/pt-forum/ ), but the Facebook Object Debugger tells me
og:image was not defined, could not be downloaded or was not big
enough. Please define a chosen image using the og:image metatag, and
use an image that's at least 200x200px and is accessible from Facebook
As the image is 500x500px, I really wonder why it doesn't work? The image should also be accessible for Bots and displays fine if its URL is entered directly into the browser. Any clue on why it isn't accepted?
I refreshed the data in the debugger and the error message is gone, but still:
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
...
Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.
Source: https://developers.facebook.com/docs/sharing/best-practices#images
I'm trying to create a custom open graph story to Facebook but I'm having some trouble getting the og:image to show properly. I'm using a 1200*630 sized image as recommended here and here but on my timeline it gets cropped in to a square from the left edge of the image. It also shows as a square in the story preview though this time it's cropped from the center.
How can I get the image to show in the correct aspect ratio and size? Is it just the test environment to blame or do I need to add something on my server side? I've already tried to use the meta tags width and height with no success.
Currently the tag looks like this:
<meta property="og:image" content="http://www.linktomyimage/1200x630pixels.png" />
Open Graph Stories Images appear in a square format. Image ratios for
these apps should be 600 x 600 px.
from Facebook sharing best practices
Be sure to have your image at an 1.91:1 aspect ratio. Facebook also notes that images for game app stories appear square, but I'm not sure from your information above if that applies to your situation. GL
It shows the 1200 X 630 image on retina screens only.
When I use the Facebook share code with the s= option, Facebook displays a small square thumbnail in the news feed instead of the new larger rectangular thumbnail image.
https://www.facebook.com/sharer/sharer.php?s=100&p%5Btitle%5D=My+Page+Title&p%5Burl%5D=http%3A%2F%2Fwww.mysite.com%2Findex.html%23lead&p%5Bsummary%5D=Check+out+my+page+by+clicking+here.&p%5Bimages%5D%5B0%5D=http%3A%2F%2Fwww.mysite.com%2Fimages%2Fmy_meme.jpg
But if I use the share code below with the u= option facebook scrapes the og information off the page and displays the larger rectangle thumbnail image in the news feed.
https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%www.mysite.com
Any ideas why this is happening?
Thanks for any help.
Consider the image shown here http://www.facebook.com/CT.dineto under the "Please peruse our New Testing Menu" shared link.
The link points to this page:
http://www.dine.to/article2.html
the og meta tags in there seem OK according to the Facebook debug tool.
Notice the original image is not square but 440x240px in size, but when shown on timeline as a thumbnail it gets cropped to a square and not just resized.
So my question: is there a way to have the thumbnails be resized versions of the original image rather than cropped and squared?
When sharing a link with thumbnail images on timeline or news feed, usually regardless of the original image size ( however small), Facebook resets the images to something else that many times only half of the image is displayed or if entire image is displayed it is re-sized and as a result gets blurred! so what is this magic size to which we can set our website thumbnail images so that they don't get resided or degraded when shared on Facebook?100X100? 93X97?
It has to be at least 200px in each dimension. Here is a link at which you can enter your website link for validation to see what the problems are: https://developers.facebook.com/tools/debug/og/
Facebook wants an og:image to be at least 200px on a a side, and with an aspect ratio smaller than 3:1. There is no maximum size for images.