Does anyone know the exact rules of the Facebook sharer thumbnail?
From my understanding, what it is supposed to do, is look at the <head> and find the <meta type="of:image"> and have that as the default thumbnail, but what it should also do, is crawl the webpage, find all the images on it, and have it alternative thumbnail options.
Am I completely wrong here?
Take a look at this site for example, http://a-d-c.net
When on the Homepage, click on the Share link (select Facebook one) on the bottom nav, I can only see 3 thumbnail options, even though there are plenty of other images on the page.
Can anyone explain how Facebook decide which images are 'allowed' to be used as the thumbnail?
Kind Regards
Related
I've seen it several times on my facebook timeline where the image of a shared link is not in the post itself. Example:
https://www.facebook.com/BarakaBits/posts/1065758210116791 - Image has text on it.
screenshot
Here's the post itself: http://www.barakabits.com/2015/01/beauty-moroccos-diversity-captured-stunning-photo-series
Is this a hidden image? I'm using a wordpress blog, how can I do this? Do I need a special plugin?
Thank you in advance!
Wil
I don't know exactly what this site is doing, but you can suggest that Facebook use a specific image (not necessarily one found on the page) by using the og:image Open Graph tag. For example, something like this would go in the <head> portion of your site:
<meta property="og:image" content="http://www.barakabits.com/wp-content/uploads/2015/01/Moroccos-faces-featured-6.jpg">
As you can see from the site you referenced, you can have multiple og:image tags, and the user will be able to choose which one is displayed in the post.
Here's Facebook's guide to Open Graph tags: https://developers.facebook.com/docs/sharing/best-practices
The ShareThis Facebook button will only pull the logo as an image to choose from a page. I am not sure why this is the case since I have other images on pages that I am trying to share from. Can someone help me out with this. I am not really familiar with the ShareThis API. Thanks for any help or feedback.
I tried using the Facebook URL Debugger: https://developers.facebook.com/tools/debug. When doing so, Facebook found all the images on the page, but ShareThis doesn't seem to do the same. That is why I am guessing it is a ShareThis related issue.
The client wants the person posting the page/blog post to be able to select the image from the images on the page. This is normally the case with the ShareThis API, but does not seem to do so. Otherwise I would have just used the open graph option.
URL of site: http://www.atranquilnook.com/
1-30-14: I tried specifying an image with open graph meta on a page. The image was larger than 200 x 200, but it still did not work.
This appears to be happening on every page of the site.
Note: I did not build this site. It was built in Adobe Muse by someone else.
This is not a real answer, but I have to use the space here, to get you all the details of what I found out.
On the debugger it says https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.atranquilnook.com%2F :
Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://www.atranquilnook.com/images/header-home03.png' will be used instead.
Since there is the image with the couple, which is bigger than 200px x 200px, I do not know if this is the answer, but you could try by uploading some bigger image.
Although the whole warning is deceptive, since a line above it states, that there is no og:image.
Looks like you are relying on Facebook being smart enough to find "better" image on your site. What you should do instead is adding a meta tag in the head section of your page.
<meta property="og:image" content="http://www.yoursite.com/img/some-image.jpg"/>
This will tell Facebook exactly what you want to rest of the world to see.
quick question:
one tiny prob i have is when i try to share a page from my site on facebook (for example:http://pent-house.co.il/index.php/sale/52-2013-12-12-13-41-40), i cannot see thumbnails for the gallery. i see only the logo :\
is there any way that i can share the photos throw facebook?
thank you very much and have a damm nice day! XD
i wanted to shar a pic but i dont have enough reputation
You have to set an og:image meta tag like this:
<meta property="og:image" content="THE LINK TO YOUR IMAGE"/>
In the <head> of your document otherwise facebook bot uses (usualy) the biggest images he can fin. On the example page you linked to the biggest one is the logo.
Once you have set the og:image meta tag don't forget to delete facebook's cache by entering your page url on this page so you can see the modifications you make.
More information about thos meta tags and open graph here
Using the "Share" link of a page does not always show the picture of the page as thumbnail in the Facebook link. For example, linking the page http://www.tekes.fi/tekes/tulokset-ja-vaikutukset/caset/2013/managed-outcomes-tuotantotalouden-logiikkaa-terveyspalveluihin/ to Facebook by using the red "Share" > "Facebook" link at the bottom of the page makes the link show in Facebook so that the picture of the article also shows in the link. However, linking the page http://www.tekes.fi/nyt/blogit-2013/katoavatko-tyopaikat/ in the same way does not show the picture in the Facebook link. The "Share" links in the pages are implemented by using the AddThis Toolbox.
When copying the urls of the above links directly to Facebook, both of the links are shown with pictures in Facebook as they should.
Could you tell us what could cause the problem with the "Share" link? Is there something wrong with the "Share" link implementation? Is there a solution to this problem? We have tried to add a
<meta property="og:image" content="<picture url>" />
tag to the pages with no effect. The Facebook debugger tool (https://developers.facebook.com/tools/debug) tells about both of the pages the same things: that the 'og:image' property should be explicitly provided, even if a value can be inferred from other tags, and that the provided og:image is not big enough and that an other image will be used instead.
Here are some other urls where the picture shows correctly when sharing it to Facebook using the "Share" link:
http://www.tekes.fi/nyt/uutiset-2013/suomen-peliteollisuus-nousi-kahteen-miljardiin/
http://www.tekes.fi/nyt/uutiset-2013/suomalaisyritys-pistaa-kampoihin-pelikonsolijateille/
http://www.tekes.fi/nyt/uutiset-2013/verkosta-vauhtia-liiketoimintaan-ict-ammattilaisten-avulla/
Here are some other urls where the picture does not show correctly when sharing it to Facebook using the "Share" link:
http://www.tekes.fi/nyt/uutiset-2013/yritys-suomen-puhelinpalvelu-tarjoaa-hyvan-kanavan-yrittajille/
http://www.tekes.fi/tekes/tulokset-ja-vaikutukset/caset/2013/lasten-sijoitukset-vahenivat-raisiossa/
The magic begins with using <figure> tag around article image. In this case, sharing works better. For example in Facebook and Google+.
One of the problems I face while sharing a link of my blogger post on facebook or linkedin is that the thumbnail shared is my picture (which is the only picture on the page). I would prefer no thumbnail being shared.I tried using
<meta property="og:image" content=""
I.e the content is kept as blank, yet it shows a thumbnail. How do i set it to no picture?
You can't. Facebook/Linkedin will crawl your site and decide on it's own what images to offer the user. The og:image meta tag is just a suggestion and not a directive.
The only way to share without image is for the user to remove it.
Update: there is another way. You could detect (on the server) FB/LinkedIns crawler and serve them HTML that does not contain any images. That way they wouldn't have anything to display (just text). I don't know if that's possible on blogger. And if you go down this path, check FB/LinkedIn's TOS if this is allowed (doing this with google, for instance, will get you banned).