I wasn't sure if it is possible at all to force Facebook's sharer.php to use an image different from the one specified as og:image meta property.
Before now a these guys somehow do it: http://news.distractify.com/culture/vintage-photos-that-will-make-you-wish-we-dressed-like-we-used-to
There are multiple sets of share buttons on page.
The first one is just under the article name. It shares the article with a default image (which is specified as og:image meta property).
Furthermore, each image in article has share buttons (which appear on hover). If clicked on one of these, sharer.php will be forced to pickup a correct image (and not the default one).
They pass an extra parameter to the script which is &img=xxxxxx.
But opening the page with this parameter doesn't have influence on og:image contents.
So what's the trick?
Related
I have a page Yummitube . If I share any link of the webpage on Facebook than no image thumb appears. My og:image is ok.
Let's say url is: http://www.yummitube.com/?id=936
Meta og:image is the folowing:
The image is accesible.
Moreover Facebook linter shows that my og:image is ok.
but what I paste http://www.yummitube.com/?id=936 in facebook no thumb appears.
Any ideas? I tryed to use different sizes of image but that did not help me.
Your link in Open-graph debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.yummitube.com%2F%3Fid%3D936
Problem found: The parser's result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: 'fb:admins'
Two solution found:
Trim admins string because most probably it is generating some extra
space
Provide og:type
og:image is page-specific.
When I have a list of newsitems (like 10 newsitems with 10 small pictures ) and I want to like 1 newsitem on that list (you can like every item), then the standard facebook like code works fine .. but.. in my knowlegde you can only set one page specific og:image and not use multiple og:image on one page or pass (through the normal FB like functions) the right og:image
How can I get this right? So that on one overview page with 10 items and 10 images i like the 1 item and the corresponding right image is figured in FB?
You can only set 1 og:image on a page, but I have 10 items on a page with 10 different pictures.
For the URL for each of the items, you can include a different query string parameter. And on the page itself, depending on the query string parameter, you can specify a different value for og:image. This will need to be done server side because Facebook's bot that scrapes the page will not recognize if the value is changed by JavaScript on the client.
The Goal: There will be a Facebook [like] and [send] option underneath all our products and it will show the proper thumbnail image.
The problem: All the OG (open graph) tags are in place. According to Facebook's test, it works. I can see the preview image (as I should) on their test site. There, it works! In reality, this doesn't work at all. Outside of Facebook's test page.. it NEVER has worked.
Direct link to an example page showing the problem
The Open Graph tags are in place, including this:
`<meta property="og:image" content="http://img.loveculture.com/ProductImages/1044214_15_1.jpg" />`
Now it's randomly choosing images through out the page. I am beyond frustrated.
I'd like to rule out a few things.
Yes, the images are on a subdomain. Even using images on the same domain gives random thumbnails.
Yes, I've contacted Facebook about this and the issue was ignored. I'm losing hope on this issue.
UPDATE
Great.... Now it decided to use one of the pink arrows for the thumbnail image.
No, according to the Facebook debugger it doesn't work:
Open Graph Warnings That Should Be Fixed:
Tiny og:image: All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.
The file you are passing is 180x258px. Pass the full size image and it should be fine.
Ok, problem solved. Thank you all.
The issue was within the URL used within the HTML.
<div class='fb-like' data-send='true' data-width='450' data-href='http://www.loveculture.com/Item/ItemDetailView.aspx?StyleId=1043361' data-show-faces='true'></div>
It was a war between two legit urls.
http://www.loveculture.com/Item/ItemDetailView.aspx?StyleId=1043361
vs
http://www.loveculture.com/Item/ItemDetail.aspx?StyleId=1043361
I'm glad this has been resolved.
I have set Facebook metadata to let Facebook get the right data when sharing. But i am having troubles with the images. I have used the url linter tool from Facebook , but i dont know where is the error:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.agendaburgos.com%2Fagenda%2Ffiesta-curpillos-parral.aspx
The warning it shows is this:
The parser's result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input property =>content pairs that were not seen in the parsed result: og:image:url => http://www.agendaburgos.com/Imagen.ashx?url=uploads%5ceventos%5cfiestas-del-curpillos-en-el-parral_5417.jpg&h=200&estirar=true
The link from og:image is right, where is the problem?
It appears if the Facebook Debug Tool doesn't like the URL to your image. You are using a script to generate a resized version of the uploaded image. Try referencing the original image in your og:image tag and see if it helps:
<meta property="og:image" content="http://www.agendaburgos.com/uploads/eventos/fiestas-del-curpillos-en-el-parral_5417.jpg" />
Remember to scrape the page again to update Facebook's cache.
I think the reason you're getting this warning may be due to the way you are building the image URL using an ASHX handler.
Don't bother with the dynamic resize. Facebook will handle that once they get the image. Just send your image at full resolution to Facebook.
You also have a problem that you aren't explicitly defining an og:description tag. If you can, you should repeat your description tag as og:description.
I have set the meta tags as shown in the example
Everything works fine, except the og:url tag. Before i hit the share button, it's displaying the correct url as set in the tag. But after I hit the share button, the shared message display the domain name of the site instead. So for example if I set the og:url as www.helloworld.com/hellouniverse, the shared message (this can be seen after i hit share) will instead display www.helloworld.com.
Does anyone probably have any idea how to fix this ?
Thanks
As far as I know, this is the default behavior of facebook, they take the domain name from the og:url parameter and display it.
I've tried several approaches to deal with it, but eventually came up with nothing.
Because it is their internal script, there isn't much you can do about it.