Facebook like button – Display the images and content you want.

When a user likes your site using the facebook like button. Facebook posts an image, a link and a description to their wall. But how do you get facebook to show the image and text you want it to display? Afterall this is a good way to advertise and an opportunity not to be missed.

By inserting a couple of metatags (open graph tags) into the head of your page you can select the content you wish to display really easily. You can find comprehensive information on how to do this on the facebook developer site.

However I am going to give you a quick summary of my interpretation of this information.

The header of your site should contain the following:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Page Title</title>
            <meta property="og:title" content="Site Page Title Goes Here"/>
            <meta property="og:type" content="article"/>
            <meta property="og:url" content="http://yoursite.com"/>
            <meta property="og:image" content="http://yoursite.com/images/thumbnail.jpg">
            <meta property="og:site_name" content="Site Title"/>
            <meta property="og:description" content="A description of your site"/>
            <meta property="admins" content="12345"/>

Notes on the above code:

  • Ensure you have all the extra information required after
  • og:title should be your page title
  • og:type should be set to article. There is a wide range of types available however article seems to be the most relevant for a page that is transient. eg a blog post or marketing landing page. Article also seems the most reliable option and produced the least amout of errors for me in facebook lint.
  • og:url This should be your website url and the page you have this code on. This may sound stupid but the url must be url of the page with this code on! Modifying this to the live url (before the page is live) will mean facebook cannot find the correct image path.
  • og:image This should be the path to a thumbnail image of your choice.
  • og:description A short description of your page.
  • admins Despite facebook suggesting you use “fb:admins” I found this to be buggy. “admins” seems to be more reliable. You can find out your facebook admin by clicking on an image within your photo album and looking at the url for the numbers proceeding ?fbid= e.g http://www.facebook.com/photo.php?fbid=NUMBERHERE&set=t.11111&type=1&theater

Verifying your code
You can check your code by using Facebook Lint Tool. This will let you know any mistakes and also make facebook aware of your page.

Hopefully the above code helps! More information on Open Graph Tags or the like button can be found on the facebook developer website.