I'm curious to know if multiple images actually show up in the feed. I know they're supported but in not one single case of testing have I seen multiple images show up on the feed. So what the point in having multiple images in the open graph object? Where do secondary, tertiary images go?
An image URL which should represent your object within the graph. The
image must be at least 50px by 50px and have a maximum aspect ratio of
3:1. We support PNG, JPEG and GIF formats. You may include multiple
og:image tags to associate multiple images with your page.
Doing a test with object debugger clearly shows that they're in there correctly (sans the image type property):
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fpluggin.it%2Fs%2FTI4o%2F
(http://pluggin.it/s/TI4o/ - note the OG tags only show up for Facebook user agent)
You may specify multiple images using this markup. The first image
matching minimum requirements is the default selection. A Facebook
user authoring a status update might select a different thumbnail
based on your explicitly-defined images. A hotel might include
multiple photos of the property as Open Graph protocol images,
allowing the person sharing the story to share a view of the pool or a
view of the restaurant.
Basically I know how to get images into the graph, but I can't seem to find where / how they are displayed in new feed. Are apps like Instagram putting images into photo galleries rather than using open graph? Is that how they display multiple images?
There’s always only one image in these feed posts.
“A Facebook user authoring a status update might select a different thumbnail based on your explicitly-defined images.”
When you give multiple images in your OG tags, the user making the post has the choice between them while making his post. He choses, he posts – and that image chosen stays the one image for that post.
Related
So for the webpage I want there to be 5 different images that are shareable to Facebook. I have it all set up with the buttons, but cannot figure out how to make it so that a person can pick which one they share. If I use opengraph then I can only select one image. Is it possible to have multiple images be shareable to facebook from one webpage?
A share on Facebook only allows for one image that will be displayed in the feed etc.. If you want to have multiple images, your only option is to combine the images the user selected into one and provide this in the og:image tag of your URL.
If your only goal is to let the user choose one out of n different pictures, simply add multiple og:image tags, this should allow the user to then choose one of them in the Share dialog.
We have a PHP based real estate template and when we SHARE PAGE on Facebook, the resulting photos to choose from do not include the desired photo(s) to select from. IE we have 10-15 images on this page, and facebook only offers 3-4 as an option to share, none of which we want to share.
Suggestions?
Example http://kemptvillerealestate.com/listings/listing_body.php?id=118521
I have seen some cases that image size and/or aspect ratio did not satisfy Facebook's requirement and those images did not appear on users' wall, timeline or Facebook page.
The best practice is shown here and I think this is the latest one. As Facebook design including timeline, news feed and page changes this optimization practice changes accordingly. So be careful catching up the latest specifications.
So far the document describes as follows:
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.
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.
And when you update images on your pages, make sure you visit Facebook Debugger and let Facebook crawler scrape your page again so they will get the latest version of your page content. Or you can do it programmatically as stated here:
This Graph API endpoint is simply a call to:
POST /?id={object-instance-id or object-url}&scrape=true
The response from this endpoint will be a JSON object that contains all the information about the object that was scraped (the same data returned when the Object ID is read from the Graph API).
I often link to my podcast on Facebook and when I post the link I want our podcast logo to show as the link picture.
Through much trial and error and using the Facebook debugging tool, I eventually got all the Open Graph tags set and set my Open Graph image. Here's my problem:
iTunes wants a 1400x1400 image. However, if I use that image, then when I post the link on Facebook, the link picture appears as a larger rectangular banner above the link and only displays part of the (square) picture.
If I instead use a 300x300 Open Graph image, it looks great on Facebook, but does not meet the iTunes standard of needing to be 1400x1400.
Is there any solution to this? Any way to somehow make Facebook and iTunes use separate images or have FB resize my image and display it properly?
iTunes reads the cover image (recommended size 1400x1400px) from the RSS feed. This image is specified (in the XML containing the podcast feed) by the tag <itunes:image href="hereGoesTheURL" />
On the other hand, Facebook reads the image (recommended size 300x300px) specified through the open graph tag <meta property="og:image" content="hereGoesTheURL" /> which has to be placed in the head section of the html code of the page containing your episode (i.e. the page that you post on Facebook).
Therefore, in principle, if you specify the iTunes cover in the RSS feed and the open graph image in the code of your website, the two images can be different and won't interfere with each other.
Does anyone know how to give the user the option to choose between multiple images when sharing a page on Facebook?
I've used an url like the one below in the past. The images param would be
p[images][0]=...&p[images][1]=...
etc. However, it seems that this doesn't work anymore. The user sees the arrows to select the next or previous image with but there is only one image to choose from.
Web page
http://occasions.dvangorkum.nl/Land-Rover/Range-Rover-Sport-2.7-/TdV6-HSE-Navigatie-PDC-Climate-Xenon-Luchtvering--1606304/1603/1/11/details.aspx?zoek=&so=gallerij
URL:
https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http%3A%2F%2Foccasions.dvangorkum.nl%2FLand-Rover%2FRange-Rover-Sport-2.7-%2FTdV6-HSE-Navigatie-PDC-Climate-Xenon-Luchtvering--1606304%2F1603%2F1%2F11%2Fdetails.aspx%3Fzoek%3D&p[images][0]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_1.jpg&p[images][1]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_2.jpg&p[images][2]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_3.jpg&p[images][3]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_4.jpg&p[images][4]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_5.jpg&p[images][5]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_6.jpg&p[images][6]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_7.jpg&p[images][7]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_8.jpg&p[images][8]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_9.jpg&p[images][9]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_10.jpg&p[images][10]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_11.jpg&p[images][11]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_12.jpg&p[title]=++++Land-Rover%C2%A0Range+Rover+Sport+2.7+%C2%A0TdV6+HSE+Navigatie+PDC+Climate+Xenon+Luchtvering+&p[summary]=Occasion+te+koop+aangeboden+Land-Rover+Range+Rover+Sport+2.7++TdV6+HSE+Navigatie+PDC+Climate+Xenon+Luchtvering++uit+2007%2C+187618+km%2C+Diesel%2C+SUV%2C+Automaat%2C+Grijs&so=gallerij
However, it seems that this doesn't work anymore.
Yes, the Share dialog does not accept these parameters any more after a recent change, but will now get all its info about the shared link from the Open Graph meta information embedded in the shared document.
So if you want multiple images the user can chose from, you have to put multiple og:image meta tags into your document. (Be aware that Facebook seems to offer no more than three images to chose from any more, so putting more images in there is pointless.)
For documentation on Open Graph meta information, see https://developers.facebook.com/docs/opengraph/using-objects/#creating and http://ogp.me/
In all of my testing it seems that Facebook treats Youtube & Vimeo's video embeds differently than our own. Specifically, when a video link/embed is shared to the Timeline and set to the full-width 2-column display, the image specified via og:image is still shown as a scaled-down thumbnail (as it does in the 1-column display mode), and the og:description occupies the rest of the space to the right.
This is in direct contrast to Youtube & Vimeo embed shares, which instead display the og:description above (full-width), and the scaled-up og:image below, also full-width.
I've tried to replicate as much as their Open Graph tags as possible, including similar image and video dimensions, ordering, etc, but in every instance it never seems to treat our embeds quite the same. I used the FB URL linter to break cache after each test, and to make sure it's pulling my OG tags properly.
Observations:
When the video dimensions are specified, FB tries to scale the video embed down as necessary to fit a smaller available space (Timeline 1-column display).
When the video dimensions are not specified, FB tries to scale the video embed up or down to fit the full available space (both 1-column Timeline and wider 2-column Timeline).
Listing multiple og:images of varying sizes (each with their own og:image:width and height specified) does not seem to have any effect on displaying differently based on context; FB always grabs the first one specified, and scales it up/down as needed for thumbnails, news ticker, timeline 1- and 2-column, etc.
Specifying the og:type as 'article' -- as Vimeo does -- does not seem to have any effect on the embed display. It displays it the same as if it was rightfully specified as 'video' or 'video.movie'.
Specifying image dimensions via og:image:width and height do not seem to have any observable effect (compared to not specifying them).
Anyone have any insights? It seems FB's implementation of Open Graph tags for video shares have changed quite a bit with the recent introduction of Timeline, but their documentation does not reflect the changes, nor how they are best used for display in the Timeline.