I'm having issues when a user tries to share the URL to a Facebook tab app that I have setup.
When they paste the URL to the tab in their share window and then post their status update, the tab image is shown when viewed on their profile, however there is no image shown on the newsfeed version of the same post.
I've tried adding open graph meta tags to the app, but I believe that it is being ignored since it is located inside of the iframe, and the facebook open graph meta overrides it.
Does anyone know how to ensure an image is maintained when the tab URL is shared directly?
I've burnt a lot of time trying to solve this issue as well. The best I've come up with is that Facebook is going to chose to display the 111x74 app icon. Sharing this on a page's news feed makes it very pixelated and oddly offset, as it should be using a 1200x630 minimum image size, as dictated by the OG tag best practices, but Facebook has not allowed us to have that option in the app configs. It may be that your app icon is being offset enough to not appear like it's visible in the news feed.
So, from my research, we're out of luck until Facebook decides to fix this issue. Until that time, I don't think it's even worth trying to get the any image to work.
Someone feel free to prove me wrong.
Related
I've seen this is a common issue here on stack but it seems that the answer is always dependent on the specific scenario. I'm looking for a fellow coder to give me that "AHA" moment.
Problem: Ads posted to my website do not show the og:image content when shared to facebook until the ad is shared at least 4 times
I have thought about/ tried the following things
Checking the image size to make sure it's not large (128kb) is the norm. I compress all uploads.
Giving the ad some time to marinate before sharing (perhaps the fb crawler takes a while to cache the page)
I tried using the debug crawler tool on fb to see if I could reproduce the problem and I indeed could.
I tried sharing the ad to my own page regardless of the missing image to see if the image showed up on my wall. It did not.
The image will not show up on ANY shares until someone has clicked on the share icon on an ad at least 4 times. It seems to me like it might be some latency issue on facebook's part.
What could cause og:image to only show on subsequent share clicks?
Edit
Here's a test ad.
https://www.jdmxchange.com/Classifieds/Details/6ae72690-14d8-4bab-b039-3a2d79923794
Reading https://developers.facebook.com/docs/sharing/best-practices I found this, which might be just what you're looking for:
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
This means, if you set the width and height of your og:image with tags, the image will show straight away.
UPDATE
Actually debugging your URL shows like this URL is redirecting to another page, and then another. Which makes me suspect the Facebook crawler is not able to access the actual OG meta tags you're using.
As a random test, I would add OG metatags to that last URL and see if Facebook uses them. But the actual solution would be to use URLs which are actually reachable to FB (no credentials necessary).
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
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.