Some web developers get frustrated when they want to share their links on facebook, but no thumbnail preview appears in the facebook post. This is annoying mostly because that thumbnail does a LOT to attract attention to your post. Facebook readers are much less likely to notice a link post if there is no thumbnail preview to go with it.
In this article, I will show you the code you need, and the image format you need to ensure that your thumbnail shows up every time.
Facebook will search through the meta tags on your website to find a link to the preview image. Below is the code you need to have between the <head> </head> tags of your page
<meta property=”og:image” content=”http://website.com/facebook-thumbnail.jpg” />
(Replace website.com with your own website, obviously) – However, facebook also has image specifications regarding what types of images it will use in the preview. See below:
The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.
So your best bet is to crop and re-size your facebook preview thumbnail to be exactly 130×110 pixels if possible. You should upload this thumbnail so that it is hosted by your own website and not somewhere else like photobucket, etc…
I also recommend using a .jpg file format because I’m not sure if facebook will reject .png images that have transparency. I would also recommend trying to keep it less than 15k. I’m not sure what image size facebook starts to reject images as.
What if it still doesn’t show?
If you have fixed everything and it still doesn’t show, that is because you have already attempted to share the link previously, and facebook caches the thumbnails server side when you share a link. So if you share it again, rather than download the new thumbnail, facebook calls up it’s saved thumbnail from its own cache.
Solution: Share the same link but slightly different. For example, if you are trying to share the home page to your website (www.example.com), you can add some PHP jibberish to the end of the url which will go to the same page but make facebook think it is a different URL. For example:
http://example.com/index.php?facebook=1
If you use PHP to code your websites, you can add this “GET” data to the URL. This simply adds a variable called “facebook” with a value equal to “1” to the URL. Your PHP code could call and use if it was programmed to do so, however, in this case, it’s simply tricking facebook into thinking that this is a brand new URL that needs a fresh thumbnail preview to store in it’s cache.
If you are just using plain old HTML, try directing straight to your index page by changing the link to
http://example.com/index.html
rather than
http://example.com/
The above two URL’s go to the exact same page. On some servers, index.html is replaced by default.html depending on who your webhost is. But if you are a web programmer you should know this already.
See the images below for how changing the URL in this manner can cause facebook to download a new thumbnail preview from your website:
Thumbnail not showing
Facebook Thumbnail Preview Working With new URL
So… I hope I have showed you how to get a facebook thumbnail preview showing 100% of the time you attempt to share a link! Let me know how it’s worked for you or if you had any problems!
Visit facebook developers share tutorial to learn about more tags for sharing different sorts of content from your website
Recent Comments