Google+ button is not using the specified opengraph image.
Facebook does.
I've seen one post about the image size being a factor.
Is there any documentation that specifies the correct image size to use with google+ and opengraph?
Google+ FAQ: Why isn't my +Snippet image appearing in the share bubble?
Images that are too small or not square enough will not be included in
the +Snippet, even if explicitly referenced using schema.org microdata
or Open Graph markup. Specifically, the height must be at least 120px,
and if the width is less than 100px, then the aspect ratio must be no
greater than 3.0.
Related
Using the Facebook API Graph Tool and trying to retrieve a full size image that is larger than 720 it gets cropped to a square.
This is the image for use in the Facebook graph API tool using version v2.12:
127495184638742_166955060692754?fields=full_picture,picture,link
How can I get back a full version of the image? Scaled is ok, just need the full image.
The docs that reference 'full_picture' are here:
https://developers.facebook.com/docs/graph-api/reference/v2.12/post
They say:
URL to a full-sized version of the Photo published in the Post or scraped from a link in the Post. If the photo's largest dimension exceeds 720 pixels, it will be resized, with the largest dimension set to 720.
But do not outline how to change the square cropping that is being applied.
the cropped version of the image
If it's an 'event' type, then you can get the full image if you take the object_id and use it in a separate facebook call to:
(object_id)?fields=cover,place,start_time,end_time
and the cover url will contain the full image.
Hit photo_id/?fields=images in graph api. This will return a set of different size images. Use the high resolution one.
For full reference: https://developers.facebook.com/docs/graph-api/reference/photo/
I've been banging my head against the wall with this issue and I hope someone can help:
I have a page that I'm sharing on Facebook (currently using the js sdk / fb.ui / method: 'share'), the flow works fine, the page gets shared BUT the preview of the page on the user's wall or feed sometimes shows a square image sometime shows a rectangle image.
I have set the open graph tags properly on the page and the scraper seems to find everything fine, but I still get this inconsistency when it is displayed on user walls. Is there a way that I can specify 2 different images (one for square presentation another for rectangle)?
One more thing, the image that I have specified on the og:image tag is exactly 1200 x 630 pixels, as per the best practices docs.
The problem is that Facebook will crop pictures that appear to have white space on the sides. To avoid this problem, fill the sides with a different color (like a light grey). Also sometimes the preview image seems to be cached on FB servers longer than it should be, especially if you haven't changed the filename. You can use FB's debug tool at https://developers.facebook.com/tools/debug/sharing to preview image links for any URL before you insert them.
https://developers.facebook.com/docs/sharing/best-practices#images
Since you said that the image is 1200x630, there should be no problem. That being said, Facebook decides how the posts look like and there is nothing else you can do. It depends on several factors afaik (how many likes, how many spam reports, ...).
Facebook will crop pictures that appear to have white space on the sides
They don't seem to do that with me. They just hack it into a square, usually centered (I'm assuming we're talking about general pics in posts, and not profile pics.)
What I've had to do is make the image square by adding dummy filler strips to the top and bottom for landscape pics, or to the left and right sides for portrait. I'll have to be careful if I use white filler.
I am using the facebook plugin on my wordpress website. My posts are image-only. I am able get the open graph functionality to work, however the image is either a tiny thumbnail with a useless excerpt box beside it, or full-sized with half of it cut of because of the useless caption box.
Now, I say useless, but I wouldn't mind having only my url presented below the image if possible, but without all the extra space. It looks terrible. Also, My image posts do not have titles so in the excerpts box the only title option without a separator for the "collection" theme I am using is sitenameonly....which leave my
sitename
site url
< .........huge extra excerpt space..............................................................................................................................................................................................................................................................................................................................................................>
I have looked elsewhere, in fact all over but can't find information to:
make images full-sized (as if they were posted directly to facebook)
Remove extra space in the excerpt box, leaving only the url
(or remove the box entirely--leaving a full-sized image)
thanks so much in advance
As long as your Wordpress plugin assigns a proper image to each post using the og:image tag and the conditions stated below (emphasis added) then you should be able to get full size posts.
We've increased the size of images in link page posts by 4x on mobile
and 8x on desktop to help you drive better fan engagement. As part of
this change, we've also made the aspect ratios for images consistent
across mobile and desktop. We recommend the following steps to
optimize your images for this new format:
Use images that are 1200 x 630px or greater for the best display on high-resolution devices. At the minimum you should use images that are
600 x 315px to display link page posts with larger images.
Use images that have an aspect ratio of 1.91:1. Try to keep your images as close to this aspect ratio as possible to avoid any cropping
in News Feed.
Use the og:image tag to choose the image that you want to share. If you don't use the og:image tag, users can choose the image they want
to post, giving them a chance to select an image that is poor quality.
Source: Larger Images for Link Page Posts
I have been scouring the Facebook docs and Stack Overflow to try to find a way to set the Open Graph image meta tags declaration to none or blank. I cannot find this anywhere, which is strange because I would almost be certain someone would have wanted to do this before, too.
I can find nothing.
My next guess -- to pull this off -- would be to set the OG meta image to a blank gif or png. This seems kind of hacky, but if there is no way officially to set the OG image tag to blank or none, is this the best (and only) way to do it?
I think you've answered your own question. There is no way to do it in the Facebook API docs. You could try setting the meta data to a blank or white image and see if it works.
I hope that helps, even tho its not much of answer.
After extensive research, I also tried the transparent image route, and while it does appear to get used by Facebook, there are various difficulties that made it unusable in our case.
I attempted both a 1x1px transparent og:image (which Facebook
ignores, because it doesn't meet Facebook's minimum specs (i.e., the image must be at least 200x200px).
This led me to a 200x200 transparent PNG, which is used, but it presents a blank white image to the left of the article presentation (Facebook preview of a 200x200px og:image).
I even attempted to set the width and height (OG) tags, and set it to 1px wide and 1px tall (though the actual image was 200x200). This seemed to achieve the desired result in Facebook's Object image debugger (i.e., no image on the left, just showing article text), but this success was short-lived. When I posted this same test to my actual Facebook news feed, the width/height attributes were ignored, and the image was again a square (200x200px) white box to the left of the article presentation.
So we landed on using a default image (company logo), giving up hope that Facebook would allow us to force the omission of an og:image.
Ihave a sharer FB popup window on my site. It worked, but for some time it doesn't show an image of a page. My code of the link:
<a title="Opublikuj na Facebook" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[summary]=Sebastian+%C5%9Awiderski%2C+by%C5%82y+reprezentant+Polski+i+trener+Zaksy+K%C4%99dzierzyn+Ko%C5%BAle%2C+potwierdzi%C5%82+sw%C3%B3j+udzia%C5%82+w+meczu+gwiazd+dla+hospicjum.+Pojawi+si%C4%99+r%C3%B3wnie%C5%BC+Piotr+Makowski%2C+szkoleniowiec+reprezentacji...&p[title]=Kolejne+gwiazdy+potwierdzaj%C4%85+sw%C3%B3j+udzia%C5%82+w+turnieju+dla+hospicjum&p[url]=http%3A%2F%2Fsalps.szczecin.pl%2Findex.php%3Fcontent%3Dnews%26view%3D285937&p[images][0]=http%3A%2F%2Fsalps.szczecin.pl%2Fzdjecianewsow%2F285937_1.jpg', 'sharer', 'toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)"><img src="maingraphics/f_logo.png" alt="Facebook logo"></a>
What can cause, that image is not loaded? It is public and anyone can access it.
Any ideas?
Your picture is too small, which only 100*66 pixel. The document at https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ stated:
og:image – This is an image associated with your media. We suggest
that you give us an image of at least 200x200 pixels. However, bigger
is better, so if you have a 1500x1500 image that you can use, please
give it to us. We'll downsample and crop it for for people using
smaller-resolution devices but will use it on a larger device. The
larger this image is, the more likely it will be used when sharing
stories on Facebook. (Note: image sizes must be no more than 5MB in
size.)
I do a quick test and noticed that 200*200 pixel also got problem. So i recommend you using higher resolution picture if possible.