Empty thumbnail when sharing a link on Facebook - html

I'm trying to understand why I'm getting an empty thumbnail when sharing a link on Facebook.
Initially, I set an og:image meta and it correctly worked, now I resized the image to make it appear as a big thumbnail (with image size greater than 600px on the wide side) and I don't see my thumbnail anymore.
I tried to debug the link on the Open Graph Debugger, but I still get an empty thumbnail! Does anyone have any hint on how I can fix this?
If you need it, here's the link to the webpage, and here's how I set my meta tag:
<meta property="og:image" content="http://messages-svil.ciacola.it/00002/00002/8619/shared/preview_8619_social.png">
(As you can see the image exists, but Facebook doesn't show it on the post)
Thank you!

Related

How to hide a particular image in HTML

I am using a og:image meta property to define an image so whenever I shared my webpage in WhatsApp or Facebook, that image will be shown as a thumbnail.
But all my pages had a specific image. I want to show these images as a thumbnail. So I removed the meta tag.
<meta property="og:image" content="https://www.website.com/download.png">
But all my pages have 2 images. One is on top and the other is on the footer. As the footer image is big, whenever I shared my page, only the footer image is shown as a thumbnail. I want to show the top image to be a thumbnail. So how to hide the footer image?
You can use the Sharing Debugger to see the information that is used when your website content is shared on Facebook, Messenger and other places.
https://developers.facebook.com/tools/debug/sharing/
And it will also displays the missing properties.
Open Graph Object Debugger will also help you
https://developers.facebook.com/tools/debug/og/object/
If you want to know more about OGP you can visit
http://ogp.me/

Facebook og:image does not work

I am still trying to get a thumbnail as preview when sharing this site on facebook:
http://hundeschule-olching.de/
I have added the following code to my header:
<meta property="og:image" content="http://www.bilder-upload.eu/show.php?file=3d2bee-1459359037.jpg" />
I needed to load that image up first, even though it already is posted on facebook, but for some reason facebook does not accept its own links.
This would be the original facebook link:
https://www.facebook.com/202405526459834/photos/pb.202405526459834.-2207520000.1459358633./1184106678289709/?type=3&theater
It was already showing me the correct image in the debug tool from facebook, but when i tried to post the link in facebook, a completely different image was shown..(pick option).
After running the debugger again the image that was fetched correctly a few minutes before was gone and it told me there will be a selection shown to pick from.
So I tried to fetch the image from the Data folder on the server going like this:
<meta property="og:image" content="Data/chak.jpg" />
did not work as well.
Please help me I'm going crazy about this problem.
http://www.bilder-upload.eu/show.php?file=3d2bee-1459359037.jpg does not deliver an image, but an HTML document – at least for me. It is probably some sort of hotlinking protection of that upload service at work. You should test this with an image on a server you have control over, to avoid such problems.
And you need to use an absolute URL – a relative one like Data/chak.jpg won’t work either.

Facebook share image sharethis

In my site I add sharethis plugin to share pages
My problem is to manage the image in sharing page, and seems that facebook take the first image and not my image.
this is my page
http://www.netafim.com/testimonial/netafim-customers-video-testimonial---uvs-south-africa
In this page i have this meta tag
<meta property="og:image" content="http://www.netafim.com/Data/Uploads/South Africa_sugarcane_share.png"/>
this is my image in the meta tag
But when sharing i see another image
[]
Why and how can i manage my sharing image?
thanks
FIX: Rename the image filename without any whitespace characters(ie. space in filename)
So far, all it could scrape is just the title and description of it. And since it can't scrape the image(due to the space in the image filename), it has fallen back to the default image for your website, which is
Hope this helps. :)
After fixing the name I can't see the image on the dialog page.
When I Share the page I see the image from the og:image tag.
But on the Dialog sometime the image exists and sometimes not.
some time its like this with no image
and some times with the image
On the debugging page when click on the "see this in the share dialog" its seems good as expected
but when click from the site
i got "thin" version with no image. what can be the reason for the differant

Website thumbnail on other websites

I just added my personal website http://oatmeeel.com/ to my Linkedin. It appears that there is no thumbnail/icon showing on my LinkedIn (https://ca.linkedin.com/pub/oat-wongsajjathiti/63/55b/967)
How do I add some sort of an image (like favicon) to any links to my website from other websites. Sorry if I'm being unclear. Here is an image of my issue.
Thank you
I believe Linkedin uses three open graph protocols, one of them being image to scrape an image to use from your website. Scrolling through your source code I didn't see one. Try adding <meta property="og:image" content="http://URLTOYOURIMAGE" /> to the of your website and see if that changes anything.

How to add a Facebook share button that shares specific image from web page?

I am trying to add a Facebook share button to an interactive page I am working on. On this web page users can manipulate a customizable image by selecting different colors to appear on the image. I'd like to know if there is any way I can add a Facebook share button that shares their finalized image.
The web page is a PHTML file and I have successfully added a plain Facebook share button to the page that just shares a link to the web page.
Thanks in advance!
Update the Open Graph meta tag with the link of your final image and when the user Share the page on Facebook, the final image will be displayed as a thumbnail.
<meta property="og:image" content="http://yoursite.com/images/final.jpg" />