Facebook not displaying image thumbnails for URL shares

Monday, 10 September 2012 00:30 by ranjanbanerji

When you share a link on your facebook wall facebook will scan the link and will show you thumbnails of images on that page and let you choose the thumbnail that you want displayed.  Lately I noticed that for some pages on my photography site FB would not display any thumbnail.  So I started searching on the web and found that several people are having similar problems.

The first hit was http://stackoverflow.com/questions/1079599/facebook-post-link-image.  This led me to reading up on FP Open Graph Tags and their new and improved Like button.  I also learned about FB’s linter tool or their debug page at https://developers.facebook.com/tools/debug.  This is a great resource because you can put in your page URL and see how FB’s crawler sees your page.  As for my offending pages I noticed that the tool would find my images but would not display them.

I went on and implemented the Open Graph Tags.  FB provides a helper for the Like button and Open Graph Tags at https://developers.facebook.com/docs/reference/plugins/like/.  If you do not know your FB ID (fb:admins) for the Open Graph Tag, the tool will provide it to you as long as you are already logged into FB.  I spent some time looking for my ID and realized the FB tool was already giving it to me.

Once I had all the Open Graph meta tags in my pages I retested the offending pages and they still did not work.  Further searches on the web led me to this article http://stackoverflow.com/questions/8855361/fb-opengraph-ogimage-not-pulling-images-possibly-https but my site had nothing to do with https.  Then I fell upon this link: http://drupal.org/node/1164110.  Various people on this link argue over whether there is a size limit for images to show up as a thumbnail choice.

I decided to test it for myself and modified the Open Graph Tags to point to lower resolution, i.e., smaller images and sure enough FB started displaying thumbnails.  I am not sure what the size limit is but there definitely is one.  So bare that in mind when you are designing a web page that you want to work well with sites like FB.  Facebook does not like large images on pages you wish to share.  My facebook Open Graph Tags were like:

<meta property="og:image" content='http://pointToLowResOrThumbnailImage'/>  This is what helps process thumbnails if someone shares this page on FB.  If FB finds the actual image too large it will still use this smaller image to create the thumbnail

<meta property="og:title" content="Some Title" />

<meta property="og:type" content="website" />

<meta property="og:url" content="URL of the page itself" />

<meta property="og:site_name" content="Name of the site" />

<meta property="fb:admins" content="FB User ID" />

Tags:   , , ,
Categories:   Facebook
Actions:   E-mail | Permalink | Comments (1) | Comment RSSRSS comment feed