I've got some image on our site where I included the Open Graph tag og:image.
For example the main company logo has such a tag as it should always be selectable and then there are some article pages or news and the lead image of those pages also has also the og:image tag.
When I test it using the sharer button on our page or browserbar-button (or any other way) the share dialog does only show me the image of the article page and not the company logo for selection.
You can test it here:
http://www.up-great.ch/unsere-firma/wegbeschreibung
Funny thing is, that if I use the Facebook Debugger Tool the images (2 images) are all there:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.up-great.ch%2Funsere-firma%2Fwegbeschreibung
Why is there a difference between the debug tool and the share dialog? (Btw, I know that I don't use og:url tag but I once added it to the page and there was no difference even after resetting the Cache with the FB debugger).
FB sharer bug oder am I doing something wrong?
One year later still no answer.
I just tried the same and it doesn't work neither in your nor in my testcase: http://mattweb.de/open-graph-multiple-images/
To me it seems Facebook changed this to one image only, but it's not documented anywhere.
I remember once it worked (even without Open Graph tags) but couldn't tell when that was. Now I know that it must have been more than a year. So thanks for your question.
Regards,
Matt
Related
I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.
I write movie reviews and share them on Facebook. At first the facebook thumbnails would show the pictures I wanted for my reviews, like the movie poster. However, now they only show my blogger profile picture every single time I post a link. It's very frustrating because I want to be taken seriously and I don't want my blogger profile picture showing up every time I post a link. I tried the facebook developers debugging tool and it did nothing. Does anyone have any other suggestions?
Thanks!
I don't know to what extent you can modify the HTML code of a Blogger blog, but you can use Open Graph tags to define the exact image you want Facebook to show, for example the tag you want is the following:
which must have a 100px x 100px size at least. Note that this tag goes into the Head section of the site.
It has taken some time, but I think I have worked out what is happening, thanks to Facebook Debugger. Put the post URL in and then scroll down to "OPen Graph Warnings That Should be Fixed". You may see something like this -
Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook.
Chances are your image is too small and that is why it is grabbing the profile image. I played around with my posts until I got it right, checking it through Debugger each time. It was a pain, but it worked.
Upon sharing a link on Facebook with og:image and og:video tags it will, under the right conditions, consistently display the wrong thumbnail image. Our clients are having this problem but unfortunately I cannot consistently replicate the conditions under which this issue occurs.
Go to the QVC UK Facebook page and look for video shares (example post). You'll see that the thumbnail for the video is the QVC logo when it should be the image given in the og:image tag. When putting the link through Facebook's debug tool the correct image is displayed with no content warnings or errors. This only seems to be happening when the URL is shared for the first time as subsequent shares will display the correct image. The image is present on our CDN before the URL is shared on Facebook. When I did manage to luckily replicate this issue; running the debugger before sharing on Facebook did not seem to solve the problem.
Am I missing something obvious, is there something wrong with my meta tags or could this be a potential facebook bug?
I've seen that multiple people are recording the same sort of problem on Facebook however only this bug has been left open (as of June 21st). In a related bug report Facebook mention that their crawlers don't only look at the image in the og tag but also look for other relevant images within the page.
Is it possible that it is seeing the QVC logo used so many times on the page that it decides to randomly overwrite the one specified?
Thanks
-- UPDATE
This only seems to be a problem when sharing to Facebook pages as opposed to a user's timeline. Changing the image URL seems to have temporarily fixed the problem. This looks like a Facebook bug
Despite the meta tags (the first one I never used before, but it came up in the addthis forums);
And the debug tool getting the data in a correct manner:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.mondiales.nl%2F
The facebook sharer code does not use the image specified. No images show up at all, there is no thumbnail chooser.
Looking at the HTML of the facebook sharer page, the image is actually there! The thumbnail chooser has a display:none. And when posting the damn thing, no image shows up on the wall.
Stop using addthis and implement a like function using the just the Facebook API? But from what I read, Facebook does a request for the page to get it's data so the JS part should not be the issue, should it?
Did I overlook something?
There's a restriction on the width/height ratio of images shared, the ratio must be less than 3.0
Your image is too wide (211/66 = 3.19) - add some vertical whitespace and it'll share OK i think
For future reference this is mentioned on both the old Share Button docs and the Open Graph protocol docs (under 'og:image')
I've found that once I've posted something to my wall from the sharer or the app, if I try to repost it, it will remember the original image (or no image in your case).
It might be worth clearing the whole cache/cookies from your browser and see if that does the trick.
If not, you'll find that if you log in as another user of Facebook and they try to post it, it will pick up on the new image on their account and not yours.
I'm not exactly sure how Facebook caches the images.
I know this thread is old but this may help someone else with the same issue. FB caches shared urls along with the thumb images and descriptions. To update the cache, add a bogus parameter to your shared query string, like, "?v=1". This gets the latest og tags.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
Ok guys.. I've researched this thoroughly- I'm at the end of my rope and my supervisor is getting pissed. Any help is appreciated.
facebook opengraph thumbnails do not work when I share pages from my site. I'm sure I have og:image implemented correctly. I have resized the JPG thumbnails to 130x110 pixels. I have even tried hiding another copy of the same thumbnails in the pages with display:none.
example page: http://www.classical917.org/houston_public_radio-arte_publico.php
from that page:
The Facebook debugger (formerly the Linter) picks up the URL of the image, but displays a blank box. When I click on the blank box, the image loads.
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.classical917.org%2Fhouston_public_radio-arte_publico.php
When I post a page from my site into a Facebook 'What's on Your Mind?' box, Facebook gets the title and description from my og: tags, thinks for a while about the image, then loads with no image.
Is it because I'm trying to use the same logo image for every page on the site? Is that a no-no? Is there something wrong with my image (although I've tried several versions)? Am I being penalized for using the debugger too often? Does Facebook hate my site?
Thanks for any ideas or pointers on this. I'm desperate to fix it before I get called into my supervisor's office.. : P
Your site has 215 xhtml validation errors according to the w3c validator. Facebook may be having a hard time parsing your page with so many errors. It could also be a caching issue, although the linter tool should clean up the cache, and the linter tool is pulling in the image properly. It may also not like full path URL's. Try a relative path.
As a work-around, you could also try specifying an image the old way:
<link rel="image_src" href="/_images/logo-facebook-130x110-kuha.jpg" />
The rest of your questions are invalid (Facebook isn't penalizing you and they don't care if you are using the same image).
Try removing line break in the og:description meta.