With the web being more social driven, it is being more important to support little features that these social media sites offer.

One that is used often is the Facebook Link capability. The basics of it is, is that if someone links to a site, facebook will grab the site title, description, and an image from the site it is linking to.

The site title and description are easy enough to control, but what about the image that it thumbnails. In order to control it, you must understand how it works. Don't worry, its really easy to understand. All it does is look for <img> tags and makes every one into possible thumbnails. It will not pick up on background images.

Now depending on your layout, chances are that you site is not picking up on a suitable image. Lets change that. We are going to use a little trick that fools facebook into using the correct image, but not being obstrusive to your normal users. Its as easy as some simple CSS you probably already know.

Luck for us, facebook can not read CSS, so we will use that to our advantage.

Create a small image of your company logo or anything you want Facebook to display as the thumb.

Before any content in your site (especially images). Add this:



The display:none; will prevent your normal users from seeing the image, but since facebook can't read the CSS, it will display it as the first choice for a thumbnail if someone links to your site from Facebook.

Have Fun.

Thanks Cib.