This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
According to Facebook's Open Graph protocol documentation, you may include multiple og:image meta properties to associate multiple images with your page:
og:image - 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.
However, when I load my page in the URL Linter, I get a warning:
Duplicate tags: You used "image" multiple times, but it should only appear once
So which is it?
Is there a better way to associate multiple thumbnail images with a page?
You can add multiple og:image meta tags. facebook has left/right arrow controls that allow the user to choose between the images.
If URL Linter sees more than one og:image tag, it should show under the Debug as a Data Source with multiple values:
Extracted 3 values from <meta property="og:image" />: [image
location], [image location], [image location]
As an alternative to the og:image meta tag, you can add your thumbnail images to the end of the DOM and set their visibility to hidden. The thumbnails will be recognized by Facebook even though they are not visible on the page itself. I usually do this as an added precaution just because I have experienced some flaky behavior with the meta tags in the past.
Related
I have a page with a fb share widget and sharing via this one the image associated with the link correctly gets read from my <meta property="og:image" ....
However, when a user manually pastes a link to the page on facebook, the associated thumbnail is not taken from the meta tag, but there are images from the page available for selection.
Shouldn't the meta tag overwrite that behaviour and only my selected og:image be available? How can I make my specified image the default also for manual link sharing?
When debugging via http://developers.facebook.com/tools/debug there is a message:
Open Graph Warnings That Should Be Fixed
og:image should be larger: Provided og:image is not big enough. Please use an image that's at least 200x200 and preferably 1500x1500. (Maximum image size is 5MB.) Image 'htt...jpg' will be used instead.
It turns out my small icon image was good for the sharing on page, but the manual sharing of a link on facebook requires a big enough image to use that defined image instead of any image fetched from the page.
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.
When I wanna add a link on facebook wall, Facebook make search for photos under pasted link. But it gets only first 6 photos.
I'm curiouss if there is some class, id or rel atributte important for facebook which will indicate exactly what image we want to show?
You can define the og:image meta property to assign images to be used on liked and shared items on Facebook, like this:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
It's described as:
og:image - 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.
For more information have a look at the documentation here. You can use the Facebook URL Linter to inspect where it is fetching the different meta data, such as the images.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
Want to have share thumbnail when user shares site url using share button on site which uses http://www.facebook.com/sharer.php to achieve that.
Site dose not have img tags, all images are defined in css.
I added meta tags for image:
<meta property="og:image" content="/images/branding/branding-logo.png"/>
and
<link rel="image_src" href="/images/branding/branding-logo.png"/>
but it's not working :(
Use the full list of Open Graph Meta Tags:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
Also use absolute URLs instead of relative!
EDIT:
Please note that Facebook caches webpages for specific periods so you may not notice your changes right away. A good way to check if Facebook is/will actually take your changes is by faking a parameter in your URL.
for example if your URL reads: http://example.com/index.php
Add something like: http://example.com/index.php?123 and then use it in the URL Linter. ;-)
EDIT 2:
You could directly use the Facebook Linter (now called Debugger), but be aware that some data cannot be changed in some cases, described here:
Editing Meta Tags
You can update the attributes of your page by updating your page's
tags. Note that og:title and og:type are only editable
initially - after your page receives 50 likes the title becomes fixed,
and after your page receives 10,000 likes the type becomes fixed.
These properties are fixed to avoid surprising users who have liked
the page already. Changing the title or type tags after these limits
are reached does nothing, your page retains the original title and
type.
Paste your ulr here https://developers.facebook.com/tools/debug/ . The facebook Open Graph Debugger will tell you exactly what is reading from your page. And also will update facebook cache of your page so it can try to read images from it again.
As ifaour said, you have to use absolute URLs or they won't be displayed. The <link> tag should work fine.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
Ok, I just launched a site: http://www.haavekuva.fi/ yesterday and on that site I've implemented Facebook's social plugin "fb:like", so it's possible to like a photo.
Everything else works fine ("Like" gets published to my feed with correct title, link, etc.), but for some reason the og:image does not show up? When I hover over the the"Like"-link ("Janne likes Shopping on Haavekuva.") on my profile feed, on the hover-box it shows only Facebook question mark.
If I linter the page at developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.haavekuva.fi%2Fkalenteri%2Fpaiva%2F2010-10-10%2Fshopping%2F there the photo is correctly visible.
Does anyone have any idea why so?
Are your images the right size and ratio? They have a limit of at least 50x50 pixels in size and at max an aspect ratio of 3:1.
og:image - 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.
Read more: Facebook open graph tags
It could be something else though...
Until a couple of days ago, everything worked fine on my site http://ahrengot.com/. But now, for some inexplicable reason, the images won't show when pages are shared. I know facebook detects the images, because they show up in The URL Linter. I have not changed anything in the code. This just came as a bug out of the blue.
I think this might be a temporary bug on their part, but it sure is annoying.
Yes, the above was a temporary bug on Facebook's part. My images are included again whenever pages from http://ahrengot.com are shared on Facebook
No image will be represented within the stream when a user "Likes" something, unless they also add a comment (at the point of liking it). Not sure if that was the answer you were looking for, but hopefully it clears things up.