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.
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
When I share portrait orientation images using the FB SDK they turn up as cropped landscape orientation images on the FB wall - chopping off the top and bottom.
I got the OG tag in my page like this:
<meta property="og:image" content="http://graphics.myfavnews.com/images/logo-100x100.jpg" />
Is there a way to give FB instructions on how to crop (or not to)?
There isn't any way of specifying cropping or scaling requirements for the image in the og:image tag. According to the Facebook docs, images should follow a 1.91:1 aspect ratio. This should prevent the image from being cropped.
There are some additional details about optimizing images here: https://developers.facebook.com/docs/sharing/best-practices#images
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?
I am using https://graph.facebook.com/" + FB_id + "/feed as the target for a post to publish to the feed of a user as described here: http://developers.facebook.com/docs/reference/api/ (search for "Publishing" section).
The picture parameter is described here:
http://developers.facebook.com/docs/reference/api/post/
But I was unable to find what is the recommended image size to be used when publishing like this.
I know the Image is displayed on both the user's own time-line and an hid friends' feeds and it would seem like they are differently sized in those two places.
So, What are the recommended picture dimensions when posting to Facebook Feed via the API Grpah ?
Facebook recommends a photo size of at least 200px on a side, and an aspect ratio of no greater than 3:1. The maximum largest dimension for a photo is 960px.
The current recommendation for optimizing images in the feed, including image size, are on the Sharing Best Practices for Websites & Mobile Apps documentation page.
Optimize your image sizes to generate great previews
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.
Small Images
If your image is smaller than 600 x 315 px, it will still display in
the link page post, but the size will be much smaller.
We've also redesigned link page posts so that the aspect ratio for
images is the same across desktop and mobile News Feed. 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.
Game Apps Images
There are two different image sizes to use for game apps:
Open Graph Stories Images appear in a square format. Image ratios for
these apps should be 600 x 600 px. Non-open Graph Stories Images
appear in a rectangular format. You should use a 1.91:1 image ratio,
such as 600 x 314 px.
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.