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
Related
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.
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 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.
This is a long shot but I'm hoping there's a way to stop IPhones from resizing a page on load. Problem is if it's a site with a lot of need for refreshing (Say a forum) it gets a little old for users to have to resize that page every refresh.
Is there a way to force Safari/The IPhnone to not minimize the site on refresh that doesn't involve a user changing a setting?
There is a meta tag you can use that will constrain the viewport for the iPhone:
<meta name="viewport" content="width=320" />
From Apple's developer documentation:
Use the viewport meta tag to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, then set the width to the width of the device.
There is a constant you can use for the iPhone's device width: width=device-width.
Not sure if this link will work, but you can read more about Mobile Safari and the viewport tag on the Apple Developer website
How do I go about making an image or section of the page full screen on the iPhone?
I have an image that is 480 x 320 and I want to pull that up full screen on the iPhone but it has to be within a webpage so that I can make the image a link back to the previous page.
Currently if I drop the image on a blank page and I open it up on the iPhone it just shows up in the top left corner.
Hopefully I'm not in breach of the NDA here, but here goes.
Mobile Safari, by default, renders a page as if that page had been viewed by a desktop browser, with a default width of 980 pixels.
To change this behavior you need to explicitly declare the viewport, which you do via meta tags. If you declare the width to the constant device-width, it'll default to 320 instead of 980, and everything looks great.
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
</head>
I'd say set the viewport meta tag in your blank page so Safari knows to render the page at the right size. For more information, see this link:
Apple iPhone Safari Documentation
nice links which may help you further:
How to optimize your website for mobile devices:
http://solutions.treypiepmeier.com/2008/12/01/optimizing-a-website-for-iphone/