Getting thumbnail image to display on Facebook when sharing URL's

May 26, 2014 1:47 pm

How to get a thumbnail image to show up on Facebook when sharing url's from your Freedom CMS site:

In order to load a specific image, facebook requires the following code to be placed in the <head> section of your website:

<meta property="og:image" content="http://www.accrisoft.com/graphics/simple/logo_250.png"/>

The accrisoft.com image path is replaced with your own.

Note: Facebook prefers this image path to be the full path as opposed to a relative image path (content="graphics/simple/logo_250.png")

The above will force a single image everytime someone shares a link, but what if you want the user to choose which image to post that is found on a page?

Do not include the tag <meta property="og:image"> in the head section
If you are not using HURLs, Facebook should automatically find as many images that are on the page and allow the user to choose between them
If you are using HURLs on your website, Facebook requires image paths to be full paths as opposed to relative image paths.

Additional Notes:

If your thumbnails aren't displaying correctly, make sure they are larger than 200 x 200 pixels and smaller than 600 x 600 pixels.
If you want to specify a group of images they can choose from, embed the <meta property="og:image"> in the head section for each image.
Example:

<meta property="og:image" content="http://www.accrisoft.com/graphics/simple/logo1.png"/>
<meta property="og:image" content="http://www.accrisoft.com/graphics/simple/logo_2.png"/>

More information about Facebook's Open Graph Protocol can be found here:
https://developers.facebook.com/docs/opengraphprotocol/

Use the following to debug your open graph tags (see what facebook sees)
https://developers.facebook.com/tools/debug