How to create a facebook preview thumbnail for your website

[update: more on this topic and open graph in new entry at http://tutorialsave.com/how-to-integrate-your-website-with-facebook/]

You may have noticed that when you attach a link to wall posts and other messages in Facebook a tiny preview thumbnail is automatically created. This preview image is designed to help users visualize what’s on the other side of the link and the system also includes a way to select from multiple images if and when they are available. Additionally, if you’re sharing a video a preview icon is generated that resizes and begins to stream when clicked.

But what if you own a website that is made entirely in Flash or maybe just doesn’t have any images or videos on it? When people share a link to your site on Facebook all they get is a boring link, no image no icon, nothing. That is unless you know how to tell Facebook where to look and in doing so, you gain a lot of control over what is shown to represent your site.

It’s actually not all that hard to add a preview image to your site and it will dramatically improve your Facebook image. Here are the steps:

  1. create a small image, no larger than 100px wide and 100px tall, .png works best for clear background images but .jpg also works
  2. upload the image to the root directory of your website
  3. add the following code to the header of all the pages you want to display preview icons in facebook
    <link rel=”image_src” href=”http://yoursite.com/image.png” />
  4. now login to Facebook and post a link to see if your thumbnail is being picked up, if you don’t see it automatically try attaching the link using the icon in the Attach menu just below the wall text field